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?

1.Firebase

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: https://console.firebase.google.com/project/react-project/overview
Hosting URL: https://react-project.web.app

2.GitHub Pages

git init
git add .
git commit -m "initial commit"
git remote add origin .git
git push -u origin master
"homepage": "https://myusername.github.io/my-app"
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

3.Vercel

Dashboard

Vercel CLI

npm i -g vercel
// or
yarn global add vercel
vercel login
vercel
? 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 (https://vercel.link/2F).

4.Netlify

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. 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):
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:https://app.netlify.com/sites/serene-fermi-6d50a8/deploys/5f1194c3b9763cadb238eabb4 
Website Draft URL: https://6f1194c3c903cadb238eabb4--serene-fermi-6d50a8.netlify.app
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: https://5f11967085gf8fafe7535ff9--serene-fermi-6d50a8.netlify.app
Website URL: https://serene-fermi-6d60a8.netlify.app
/*    /index.html  200

5.Heroku

npm install -g heroku
heroku login
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

--

--

--

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

Introduction

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
PRIYADARSHAN GHOSH

PRIYADARSHAN GHOSH

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