[Question] Retrofitting TS to vanilla create-react-app proj

[JonyTek]

Can someone tell me if there is a resource out there to explain the process of bringing this in to an existing project?

I have just stumbled across this and would like to bring this into my current js app that has been built off the vanilla create-react-app template. I have run through your docs and created a new ts app and from what I can see there is nothing more than a few tsconfig.* and tslint files, react-scripts-ts dependency and updated scripts commands to point to react-scripts-ts.

Is it just the above and then simply updating jsx file extensions to .tsx. Would this assumption be correct?

I will give this a try this evening and if successful will create a pull request with additional docs documenting the process.

Thanks.

[tpetrina]

This can be done, but it requires changing how webpack works.

1. Open node_modules\react-scripts-ts\config\ and notice two files: webpack.config.dev.js and webpack.config.prod.js
2. Copy them to the root dir of your project (e.g. along node_modules)
3. Edit them in the following way: find the line with the comment // Compile .tsx?
4. Change the test line (two lines before the comment) to test: /\.(js|jsx|ts|tsx)$/,
5. Copy paste that file over the one in node_modules i.e. overwrite it.
6. Apply the same thing to the production version.

Now, every dev will have to do this on every clone and it presents problems with CI builds. Best way to handle this is to create .sh and .bat files that will copy the modified webpack configuration after restoring npm packages. Inform your devs to run this and also add it as a build step after npm install.