Art of Deploying a Static Website(React)

13 min readJun 29, 2021

It’s time that you took your applications out of development and into production. The process of deploying an application built on top of a framework such as React, Vue, Node.js, Ember.js, Next.js or Angular is much different from that of deploying a site built with HTML, CSS, and JavaScript.

In this blog, we’ll demonstrate how to deploy a React application in many different ways. All the services described in this post are completely free.

In this blog, we will Discuss some Deploying Sites:

First of all, Clear some Questions.

🚀What is Deploy?

Deployment in software and web development means pushing changes or updates from one deployment environment to another. When setting up a website you will always have your live website, which is called the live environment or production environment.

🚀What is React.js?

React is an open-source front-end framework that is based on JavaScript, developed by Facebook in 2011 currently it is the most popular javascript liberty for building user interfaces. The main purpose of React is to be fast, scalable. The Heart of React application is Components. Components are a piece of the user interface.

Let’s get started!

1.Firebase

Firebase is an entire platform that you can use to develop and scale your application. Along with hosting, it offers myriad other services, including authentication, Cloud Firestore, cloud functions, and more.

If you haven’t already, create an account on Firebase and then create a new project

Install Firebase CLI globally. Having it installed globally makes it easier to use in different projects.

npm install -g firebase-tools

firebase login

You’ll be prompted with a URL in the terminal that will open in the browser to verify. After giving the necessary permissions, you’ll see a successful login message.

Next, go to your project root directory and run the following command to initialize a Firebase project.

firebase init

You’ll be asked to confirm. Reply Yes.

? Are you ready to proceed? Yes

Choose the hosting option.

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

When asked to choose the Firebase project associated with your application, since you already created a project in the first step, choose Use an existing project. Otherwise, you can select Create a new project.

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

If you choose to, you’ll be asked to provide a unique project ID.

Lastly, change the default public folder build for your create-react-app project. If you’ve not initialized the project with create-react-app, choose the appropriate build folder.

=== Hosting SetupYour public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

If you’ve already built the project, you’ll be asked whether to overwrite or not. Answer No.

? File public/index.html already exists. Overwrite? No

With this, firebase init is complete.

Before proceeding to the next step, build your React project.

npm run build

The next and final step is to deploy the project. Run the following command.

firebase deploy

Once the process completes, you’ll see the deployed links in the terminal.

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/react-project/overview
Hosting URL: https://react-project.web.app

2.GitHub Pages

GitHub Pages is one of the fastest and most widely used methods for beginners to deploy websites. It’s easier to maintain than many other tools described in this guide. With GitHub actions, you can trigger automatic deployments, configure CI/CD, and much more.

Create a GitHub account if you haven’t already, then create a repository for your application.

In your terminal, initialize the local directory as a Git repository, commit all the changes, and push it to remote by running the following command in the project root.

git init
git add .
git commit -m "initial commit"
git remote add origin .git
git push -u origin master

You’ll get this repository URL when you create a new repository.

With this, your project will be pushed to GitHub.

In your project’s package.json add a homepage field, like this:

"homepage": "https://myusername.github.io/my-app"

myusername is your GitHub username and my-app is your repository’s name.

Next, install gh-pages in your project.

npm install --save gh-pages

In your package.json, add the following scripts.

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

predeploy and deploy are the only additions to the scrips. predeploy will automatically run before deploy and make sure the latest build of the application is deployed.

Run the following command to deploy the application.

npm run deploy

This command will create a new branch named gh-pages in your project’s GitHub repository. You may need to set a source under the GitHub Pages option in your repository’s settings to gh-pages branch.

3.Vercel

Vercel, formerly known as ZEIT, is a revolutionary serverless deployment service designed for React, Angular, Vue, etc. You can easily import projects from GitLab or Bitbucket with Vercel. Automatic SSL is one of the many cool features it offers.

To deploy Vercel, create a new account. You can quickly log in using OAuth.

After a successful login, the dashboard screen will appear. You can use either this dashboard or Vercel CLI and deploy it from the terminal. We’ll discuss both methods in more detail.

Dashboard

To deploy using the Vercel dashboard, integrate GitHub, GitLab, or Bitbucket, wherever your React application is stored. Click “New Project” on your panel.

You can opt either to import the project from the Git repository or use a template, which is another excellent feature of Vercel.

Click “Continue” under “From Git Repository.”

You may have integrated GitHub, GitLab, or Bitbucket; for the purpose of this tutorial, we’ll assume you used GitHub. At any rate, you’ll have the option to import projects from GitHub, GitLab, or Bitbucket.

Click “Import Project from GitHub.” If this is your first time using Vercel, you’ll see a screen like this.

Click “Install Now For GitHub.” You’ll be prompted to install Vercel for GitHub. Save the setting for GitHub, navigate back to the import Git page, and you’ll see that your GitHub is now connected. Click “Import Project from GitHub.”

You’ll be prompted to choose which project you want to deploy. Choose the React project and click “Import.” Next, you’ll be prompted to write a project name. Leave it as the default and click “Continue.” When asked for the root directory, choose accordingly and click “Continue.”

This step is important. If you’ve initialized your React project using create-react-app, Vercel will autodetect it and choose a suitable configuration on its own. Leave the default configuration and click “Deploy.”

If your React app was not initialized using create-react-app, you’l be asked for the configuration. Using the above configuration as an example, fill all the configuration fields and click “Deploy.”

Your React application will now be deployed within a matter of seconds with two to three preview links.

Vercel CLI

The first step is to install vercel globally.

npm i -g vercel
// or
yarn global add vercel

Once vercel is installed, run the following command.

vercel login

You’ll be prompted to enter the email with which you registered on Vercel. After submitting that, you’ll receive an email to verify your login.

Next, go to your project root directory and run the following command.

vercel

You’ll be prompted to answer a few questions. First, confirm that this is the project you want to deploy.

? Set up and deploy “path to your project”? [Y/n] y

Next, you’ll be asked in which account to deploy this app. It’ll give you a default option; just hit enter.

After this, you’ll be asked whether to link this to the existing project. Answer N.

? Which scope do you want to deploy to? Your Vercel Account
? Link to existing project? [y/N] n

The next step is to name your project and specify the path. Since we’re already in the project directory, it’ll be the same as the default option, ./.

? What’s your project’s name? project-name
? In which directory is your code located? ./

It will autodetect whether your project was initialized using create-react-app and configure the settings accordingly. Otherwise, it will ask you to set them. Answer No if asked to override the settings.

Auto-detected Project Settings (Create React App):
- Build Command: `npm run build` or `react-scripts build`
- Output Directory: build
- Development Command: react-scripts start
? Want to override the settings? [y/N] n

Your project will be deployed.

 Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).

4.Netlify

Netlify is one of the most popular services out there for web deployment. It easily imports projects from GitHub, GitLab, and Bitbucket.

To get started, create a Netlify account if you haven’t already.

Like Vercel, you can choose to deploy your app either through Netlify Dashboard or Netlify CLI.

Netlify drag-and-drop

One of the coolest features that Netlify offers is the ability to drag and drop your site folder and deploy your app like magic.

For your React app, you’ll have to drag and drop the build folder on Netlify Dashboard. Run npm run build beforehand to deploy the latest build.

You can also connect GitHub, GitLab, or Bitbucket, depending on where your project is stored.

Choose the project repository that you need to deploy.

Once you’ve selected the project, the final step is the configuration, which Netlify will autodetect if the project is initialized with create-react-app.

Click “Deploy site” and your app will be deployed.

Netlify CLI

If you prefer deploying apps through the terminal, here are the steps to do so with Netlify CLI.

To deploy the latest build, run npm run build beforehand.

Next, install netlify-cli globally.

npm install netlify-cli -g

In your project root directory, run the following command.

netlify deploy

You might be prompted to grant access to Netlify CLI. Click “Authorize.”

After successful authorization, you’ll see a successful login message in the terminal.

You are now logged into your Netlify account!

The following steps will guide you through the prompts that you’ll encounter in the terminal.

First, you’ll be asked to link this project to a site, since this is the first time you’re deploying this app. Select Create configure a new site.

This folder isn't linked to a site yet
? What would you like to do?

After successful authorization, you’ll see a successful login message in the terminal.

You are now logged into your Netlify account!

The following steps will guide you through the prompts that you’ll encounter in the terminal.

First, you’ll be asked to link this project to a site, since this is the first time you’re deploying this app. Select Create configure a new site.
This folder isn't linked to a site yet
? What would you like to do?

Link this directory to an existing site 
Create configure a new site

Then you’ll be asked for the Team. Unless you’re already using Netlify in your local machine, chances are you will see only one option with your name, select it.

? Team:Priyadarshan's Team

The next prompt is Site name. This is an optional field, as you can see below. If you already have a name in mind, type that and hit enter. If you leave this blank, Netlify will give this site a random name that you can change later.

Choose a unique site name (e.g. netlify-thinks-Priyadarshan2000-B-is-great.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional):

After this step, your site will be created and you'll be asked for a Publish directory. Type build here.

Please provide a publish directory? Publish directory build

With this, your site will be published and you will be provided a draft URL.

Deploying to draft URL...Finished hashing 89 filesCDN requesting 30 filesFinished uploading 20 assetsDraft deploy is live!Logs:https://app.netlify.com/sites/serene-fermi-6d50a8/deploys/5f1194c3b9763cadb238eabb4 
Website Draft URL: https://6f1194c3c903cadb238eabb4--serene-fermi-6d50a8.netlify.appIf everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --prod

Go to this draft URL. If everything checks out, you can deploy the website to the main site URL.

Run the following command to deploy to production.

netlify deploy --prod

It will ask for the Publish directory one final time. Type build and hit enter. You’ll be provided with two URLs.

Unique Deploy URL: https://5f11967085gf8fafe7535ff9--serene-fermi-6d50a8.netlify.app
Website URL:       https://serene-fermi-6d60a8.netlify.app

The difference between these two URLs is that Unique Deploy URL points to a specific version of your application. For example, if you make a change in your application and deploy again, you’ll get another Unique Deploy URL that is specific for that change. Your Website URL is the main URL, which corresponds to the latest version of your application.

You might encounter a 404 error if your application uses a router, such as React Router.

In your build folder, create a new file called _redirects and add the following to it.

/*    /index.html  200

You'll need to redeploy your application.

5.Heroku

Like most of the other services, we’ve discussed thus far, start by creating a free account on Heroku.

Install heroku-cli globally by running the following command.

npm install -g heroku

You can read about other installation methods in the official docs.

Log into heroku-cli.

heroku login

You’ll be prompted to log into your account in the browser. Click “Log In.”

Below is all the code you’ll need; you can copy/paste and deploy in one step.

git init
heroku create -b https://github.com/priyadarshan2000/React-Deploy.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

Heroku dashboard

You can also deploy with Heroku via the dashboard.

Make sure your project is stored in a GitHub repository.

Go to your Heroku dashboard, click “New,” and then click “Create new app.”

You’ll be prompted to give your project a name. Type your application name and click “Create app.”

After creating an app, sync your GitHub repository. You’ll see something like this on your app dashboard.

Once you’ve successfully connected your GitHub to Heroku, you can search for the project repository and deploy it.

Select your project from the list of repositories.

You’ll have two choices: manual deploy or automatic deploy. For the purpose of this tutorial, we’ll go with manual deployment.

Click “Deploy Branch” under “Manual Deploy” and your application will be deployed once the build process completes.

Now that we’ve discussed ten different ways to deploy React, you should try out as many as you can to determine which best aligns with your deployment requirements. After all, they’re free to use.

For a good next step, try to add custom domains to your deployed application. It’s good to have a distinctive domain for projects, which have different ways to add a custom domain — some easy, some relatively complex.