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.
Using Webpack to Create A Production-Ready Bundle
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.
npm installto create the
node_modulesfolder with all the project dependencies.
Build the 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. Contact us below for a free consultation with our CEO.
Projects start at $25,000.
An interpreted high-level programming language great for general purpose programming.
A server side programming language known for its ease of use and speed of development.
View a sampling of our work implemented using a variety of our favorite technologies.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this server side programming language known for its ease of use and speed of development.
Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Detailed profiles for each member of our team.
Our step-by-step process for designing and developing new applications.
Get answers to the questions most frequently asked by new clients.
Learn more about FullStack Lab’s Mission, Vision, & Company Values.
A high level overview of FullStack Labs, who we are, and what we do.