DEV Community

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

Posted on

4 1

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!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay