React Beginner 10: Deploying React

Introduction

After building a React app, the next step is to deploy it. Deployment makes your app publicly accessible. There are many hosting options including Vercel, Netlify, GitHub Pages, and traditional servers.

1. Build the Production Version

React provides a build command that optimizes your code for production:

npm run build

This creates a dist or build folder containing static files ready for deployment.

2. Deploy to Netlify

Netlify is a simple hosting platform for static sites:

1. Sign up at Netlify.
2. Click “New Site from Git” and connect your GitHub repository.
3. Select the branch and set the build command to npm run build.
4. Set the publish directory to build (or dist if using Vite).
5. Click “Deploy Site”.

3. Deploy to Vercel

Vercel is another popular hosting platform for React apps:

1. Sign up at Vercel.
2. Import your GitHub repository.
3. Vercel automatically detects it’s a React app and sets npm run build as the build command.
4. Click “Deploy”. Your app will be live with a generated URL.

4. Deploy to GitHub Pages

You can also host a React app on GitHub Pages:

npm install gh-pages --save-dev

Add the following to package.json:

"homepage": "https://yourusername.github.io/your-repo-name"

Add scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Then run:

npm run deploy

5. Summary

In this tutorial, you learned how to deploy your React application using:

• Netlify
• Vercel
• GitHub Pages

Deployment makes your React app live and accessible to anyone. With this, you have completed the React Beginner series and are ready to build full-stack projects using React and Spring Boot.