Art of Deploying a Static Website(React)

  1. Firebase
  2. Github Pages
  3. Vercel
  4. Netlify
  5. Heroku

🚀What is Deploy?

🚀What is React.js?


npm install -g firebase-tools
firebase login
firebase init
? Are you ready to proceed? Yes
? 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
=== 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
=== 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
? File public/index.html already exists. Overwrite? No
npm run build
firebase deploy
+  Deploy complete!

Project Console:
Hosting URL:

2.GitHub Pages

git init
git add .
git commit -m "initial commit"
git remote add origin .git
git push -u origin master
"homepage": ""
npm install --save gh-pages
"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"
npm run deploy



Vercel CLI

npm i -g vercel
// or
yarn global add vercel
vercel login
? Set up and deploy “path to your project”? [Y/n] y
? Which scope do you want to deploy to? Your Vercel Account
? Link to existing project? [y/N] n
? What’s your project’s name? project-name
? In which directory is your code located? ./
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
 Deployed to production. Run `vercel --prod` to overwrite later (


Netlify drag-and-drop

Netlify CLI

npm install netlify-cli -g
netlify deploy
You are now logged into your Netlify account!
This folder isn't linked to a site yet
? What would you like to do?
You are now logged into your Netlify account!
Link this directory to an existing site 
Create configure a new site
? Team:Priyadarshan's Team
Choose a unique site name (e.g. or leave it blank for a random name. You can update the site name later.
? Site name (optional):
Please provide a publish directory? Publish directory build
Deploying to draft URL...Finished hashing 89 filesCDN requesting 30 filesFinished uploading 20 assetsDraft deploy is live!Logs: 
Website Draft URL:
If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --prod
netlify deploy --prod
Unique Deploy URL:
Website URL:
/*    /index.html  200


npm install -g heroku
heroku login
git init
heroku create -b
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

Heroku dashboard




Learn 👨‍💻 | Think 💭 | Earn 🏅 | Repeat ♾️ | Achieve 🚀

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reflection in Swift using NSObject

Day 2

Insights, Hidden Content, and Block Formatting Context…Oh My

Experimental approaches to selecting a programmer’s tools

Minoca OS 0.4: We love the eighties!

A Guide to Monitoring Servers/Services with Nagios — Part 4


What is Java Programming Language

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Learn 👨‍💻 | Think 💭 | Earn 🏅 | Repeat ♾️ | Achieve 🚀

More from Medium

Coding Bootcamp Week 9/13: New Year, New Tech

Using Params and Filter to Render a Page with Specific Item From List

Implementing GraphQL subscriptions in Rails and React

Rails, GraphQL and React logos

Lessons learned publishing a Content Security Policy