Deploying a React Application
Introduction
After building and testing your React application, the final step is deployment. Deployment means making your application available to users on the internet. Instead of running locally on your computer, the app is hosted on a server so anyone can access it through a web browser.
In this chapter, you will learn how React apps are prepared for production and how they can be deployed.
Development vs Production Build
When you run a React app using npm start, it runs in development mode. This mode is optimized for debugging, not performance.
Before deployment, you need to create a production build.
npm run build
This command creates an optimized build folder with minified files for better performance.
What Happens During Build
The build process:
Minifies JavaScript and CSS files
Removes unnecessary development code
Optimizes assets for faster loading
The output is a static bundle that can be hosted on any web server.
Choosing a Hosting Platform
There are many platforms where React apps can be deployed, such as cloud hosting services and static site platforms. These services host your files and provide a public URL.
Common hosting features include:
Automatic deployment from Git repositories
Custom domain support
Secure HTTPS connections
Deploying to a Static Hosting Service
Typical deployment steps include:
Push your project to a Git repository
Connect the repository to a hosting platform
Set the build command to npm run build
Set the output directory to build
The platform automatically builds and hosts the app.
Handling Routing in Deployment
If your app uses routing, you must configure the server to return index.html for unknown paths. This ensures routes work correctly when users refresh the page.
Without this setup, users may see a 404 error when accessing nested routes directly.
Environment Variables
Sometimes apps need different settings for development and production, such as API URLs.
React supports environment variables using files like .env. These values are injected during build time.
Common Mistakes to Avoid
Deploying without creating a production build
Forgetting to configure routing on the server
Exposing sensitive data in environment variables
Summary
In this chapter, you learned how to prepare a React app for deployment by creating a production build, optimizing assets, and hosting the app on a server. You also learned about routing configuration and environment variables. Deployment makes your React application accessible to real users worldwide.