DEV Community

Shun Yamada
Shun Yamada

Posted on

How to deploy a React application to Firebase Hosting

#firebase #react

Firebase is awesome. You can build a functional application in React + Firebase soon. Here is a tutorial for deploying your React App to Firebase Hosting.

Install the Firebase CLI globally to your node modules:

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

Next associate the Firebase CLI with a Firebase account:

$ firebase login
Enter fullscreen mode Exit fullscreen mode

And then, you have to connect Firebase hosting with your React app:

$ firebase init
Enter fullscreen mode Exit fullscreen mode

Choose the Hosting options.

Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.

$ Hosting
Enter fullscreen mode Exit fullscreen mode

Select a default Firebase project for this directory

$ <your-firebase-app-name>
Enter fullscreen mode Exit fullscreen mode

What do you want to use as your public directory?

$ public
Enter fullscreen mode Exit fullscreen mode

Configure as a single-page app (rewrite all urls to /index.html)?

$ Yes
Enter fullscreen mode Exit fullscreen mode

File public/index.html already exists. Overwrite?

$ No
Enter fullscreen mode Exit fullscreen mode

Done!

You have to update firebase.json like below:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

public should be build.

And you should delete .firebases folder every time you deploy.

Top comments (0)