Angular To React.js - Deployment (Part 6 of 6)

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.

• Go to my Stackblitz repository, or your own fork in Stackblitz.
• Download the React repository by clicking the download icon in Stackblitz’s Project panel.

• This will give you access to the app locally. Unzip the files and open the extracted folder in your local editor.

• Go to the terminal and run npm install to create the node_modules folder 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.

1. Go to the build folder, cd build.
2. Inside the build folder run: npx lite-server.
3. Navigate to http://127.0.0.1:8080 in your browser to view the app.

‍

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:

1. An Introduction to React.js Hooks
2. Keyboard Shortcuts with React Hooks
3. Production-Level Patterns for React Hooks
4. Reusable State with HOC Components - React.js
5. Dynamic Sitemaps for a Static React app