DEV Community

Cover image for How to deploy a React App to Firebase host for free
David
David

Posted on

How to deploy a React App to Firebase host for free

Read the related post on How to deploy a React App to Cloudflare host for free


Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development.

Firebase offers free host services for React SPA deployment. Below is how to do this with trivial steps!

Deploy React Apps on Firebase

Create react app

npx create-react-app project-name
cd project-name

yarn
yarn start
Enter fullscreen mode Exit fullscreen mode

Install Firebase tools CLI

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

Login Firebase using CLI

firebase login
Enter fullscreen mode Exit fullscreen mode

You will be redirected to the Firebase login page. Input your account there.


Setup Firebase project from CLI

Note: you can also create a project using the Firebase console, but using CLI is more convenient.

  1. Run the below command
cd project-name
firebase init
Enter fullscreen mode Exit fullscreen mode

You need cd into the folder where React App is created. Follow the instructions as shown below:

  1. Confirm YES.
  2. Create a new Firebase project, e.g. "xyz-firebase-react"
  3. Input a project ID, e.g. "xyz-firebase-react"
  4. Choose a directory where the contents will be deployed to Firebase, type "build", since when you package the react app using "yarn build" command, the "build" folder will be the default.
  5. Confirm "YES". This is important since we are not deploying the static html!
  6. Confirm NO.
  7. Confirm NO.

Build react app locally

cd project-name
yarn build
Enter fullscreen mode Exit fullscreen mode

This will package the react app, and the output is in the build sub-folder now.


Deploy react app to Firebase

firebase deploy
Enter fullscreen mode Exit fullscreen mode

Open a browser window, and type the url: https://xyz-firebase-react.web.app/

Now, your app is deployed to Firebase! Happy coding, happy deploying!

Top comments (0)