Welcome to the final chapter of my six-part guide for Angular developers looking to learn React. In the previous five articles we set up routing, data management, async actions, and form management. Our final step is to get our app production-ready and deploy it.
To get our completed app production-ready, we need to leverage Webpack. Webpack is a module bundler that transforms our code into a production-ready application by bundling and packaging the files.
Fortunately we don’t need to manually set up Webpack, as the react-scripts package provides default webpack configurations for production. React-scripts was included in the Create React App template we used to set up our app in the first article of this series.
Note: You can access Webpack manually by running the npm run eject script. After running the command, all of the Webpack files will be included in your project.
Stackblitz cannot run Webpack, so we need to download the app locally to create our production-ready bundle.
Now that your app is set up locally, run npm run build to build the production-ready bundle. This will create a new folder, build, which includes all the optimized files required to run the application in production.
We can use the lite-server command to quickly test the bundle.
Congratulations! Your app is now ready to be deployed on any hosting service of your choice.
Thanks for following along with this series. I hope it has helped you learn the fundamentals of React development. If you’d like to continue learning, check out a few of the other React articles written by experienced FSL developers:
We’d love to learn more about your project.
Engagements start at $50,000.