Deploying React App
Once you have your production build ready, it's time to deploy it so users can access your app. There are many hosting options available from simple static hosting to more advanced platforms. This chapter covers common deployment methods.
Where Can You Deploy React Apps?
- Static hosting: Netlify, Vercel, GitHub Pages, Firebase Hosting ideal for SPAs.
- Traditional web servers: Apache, Nginx serve the static files.
- Cloud platforms: AWS S3 + CloudFront, Google Cloud Storage, Azure Storage.
- Platform-as-a-Service: Heroku, Render can also serve static files.
Since React apps are just static files, any service that can host HTML/CSS/JS will work. Choose based on your needs ease, features, or cost.
Deploying to Netlify
Netlify is a popular choice for React apps. Steps:
- Build your app: `npm run build`.
- Drag and drop the `build` folder to Netlify Drop, or connect your Git repository for continuous deployment.
- Netlify automatically deploys and gives you a URL.
Deploying to Vercel
Vercel is another great platform, especially for Next.js but works for any React app.
npm install -g vercelvercelFollow the prompts, and Vercel will deploy your app.
Deploying to GitHub Pages
To deploy to GitHub Pages:
- Install `gh-pages`: `npm install --save-dev gh-pages`.
- Add `"homepage": "https://yourusername.github.io/repo-name"` to package.json.
- Add scripts: `"predeploy": "npm run build", "deploy": "gh-pages -d build"`.
- Run `npm run deploy`.
Handling Client-Side Routing
If you use React Router, you need to configure your server to always serve `index.html` for any route. On Netlify, create a `_redirects` file:
/* /index.html 200For Vercel, add a `vercel.json`:
{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]}Two Minute Drill
- React apps are static files any static hosting works.
- Popular platforms: Netlify, Vercel, GitHub Pages.
- For client-side routing, configure the server to always serve `index.html`.
- Deployment is usually just uploading the `build` folder.
- Use environment variables for different API endpoints across environments.
Need more clarification?
Drop us an email at career@quipoinfotech.com