FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

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

Written by 
,
Angular To React.js - Deployment (Part 6 of 6)
blog post background
Recent Posts
Integrating GitHub Actions and Docker for a Java Project
Businesses Must Seize the AI Wave (Or Cease to Exist)
Code, Deploy, Succeed: Next.js, Firebase, and Tailwind CSS Unleashed

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.

Table of contents

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
Written by
People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.

company name
name
email
phone
Type of project
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.