Skip to main content

Deploying React Apps to Static Hosting Services

In this tutorial, we will discuss how to deploy your React applications to popular static hosting services like Netlify, Vercel, Firebase, and GitHub Pages.

Prerequisites​

Before you begin, make sure you have:

  1. Created a production build of your React application. If you're using Create React App, run npm run build in the terminal to generate the build folder.

  2. Signed up for an account on your chosen hosting service.

Deploying to Netlify​

  1. Go to Netlify and log in to your account.
  2. Click on the "New site from Git" button.
  3. Connect your GitHub, GitLab, or Bitbucket account and select the repository for your React application.
  4. In the "Build settings" section, set the "Build command" to npm run build and the "Publish directory" to build.
  5. Click "Deploy site" to start the deployment process. Netlify will automatically generate a custom domain for your application.

Deploying to Vercel​

  1. Install the Vercel CLI by running npm install -g vercel in the terminal.
  2. Go to your project directory and run vercel to start the deployment process.
  3. Follow the prompts to connect your GitHub, GitLab, or Bitbucket account and select the repository for your React application.
  4. Vercel will automatically detect the build settings for Create React App projects and start the deployment process.
  5. Once the deployment is complete, you'll receive a URL for your deployed application.

Deploying to Firebase​

  1. Install the Firebase CLI by running npm install -g firebase-tools in the terminal.
  2. Log in to your Firebase account by running firebase login.
  3. Go to your project directory and run firebase init to set up Firebase for your application.
  4. Select "Hosting" when prompted, then choose or create a Firebase project.
  5. Set the "public" directory to build and configure the settings as needed.
  6. Run firebase deploy to start the deployment process.
  7. Once the deployment is complete, you'll receive a URL for your deployed application.

Deploying to GitHub Pages​

  1. Install the gh-pages package by running npm install gh-pages in your project directory.
  2. In your package.json, add the following scripts:
JSON
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
  1. Add a homepage property to your package.json with the URL of your GitHub Pages site:
JSON
"homepage": "https://<your-username>.github.io/<repository-name>"
  1. Run npm run deploy in the terminal to start the deployment process. This will create a gh-pages branch in your repository with the static files from the build folder.
  2. Go to your repository settings on GitHub and enable GitHub Pages for the gh-pages branch.
  3. Once the deployment is complete, you'll receive a URL for your deployed application.

Conclusion​

In this tutorial, we discussed how to deploy your React applications to popular static hosting services like Netlify, Vercel, Firebase, and GitHub Pages. With these options, you can choose the best service that suits your needs and easily host your React applications for users to access. Keep in mind that each service has its unique features, so it's essential to explore and understand their offerings to make the most of your chosen platform.

Now that you know how to deploy your React applications, you can confidently share your projects with the world and ensure that they are accessible to users across different devices and platforms. Happy coding!