Angular To React - Deployment (Part 6 of 6)

Written by Cristian Marquez

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.


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

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

  4. 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

Let’s Talk!

We’d love to learn more about your project. Contact us below for a free consultation with our CEO.
Projects start at $25,000.

FullStack Labs
This field is required
This field is required
Type of project
Reason for contact:
How did you hear about us? This field is required