Deploy with Firebase CLI
Once you have created a new project and site in your Firebase Console, you will need to deploy the site files and any functons/databases/etc. You can do this using the Firebase CLI.
This guide will walk you through deploying a static site using hosting for you endpoint to direct toward.
Be sure the Firebase CLI is installed
If you have not already, install the CLI (Follow the official docs)
To see if it is installed, you can run the following command:
firebase --version
Login to Firebase in the CLI
The first thing we need to do is login to Firebase.
firebase login
Problem with the CLI?
Check that you have your CLI setup properly.
firebase --version
If you don't have it installed, you can install it with npm or globally. Instructions here
Shortcut to install:
npm install -g firebase-tools
If it has been a while since you logged in...
Sometimes the auth token expires, but says you are still logged in. If there has been a version update this can happen.
The best thing to do is to first logout and then login again. This will usually clear up most of the errors.
firebase logout
firebase login
Initialize the project
Now initalize the project and follow the prompts. You'll be setting it up as Hosting into the existing project where you placed your new site. In my case, I am choosing my portfolio project id.
firebase init
If you have a monorepo you'll need to pick a strategy for where to place your firebase.json file.
A. In the case of wanting to deploy with Github Actions (recommended) initialize the project in the directory of the site you want to deploy, NOT the root of the repo.
B. Figure out how to deloy from the root of the repo. This requires some experimentation I haven't conducted, likely requiring an entryPoint or pointing the public folder to a subdirectory in the firebase.json file. An article to get you started
In either case, you should add a deployment script to your package.json to make it easier to run.
Clarifications & Common questions
Q: I can't see the site I just added to Firebase Console.
A: This is because we are selecting the PROJECT not the site. We will handle the target site later.
Q: What should I write to be the public directory?
A: When you build your project, it will create a folder with all the files. This is the name of the public directory. In my case, it is build.
Q: Configure as a single-page app (rewrite all urls to /index.html)?
A: If your build files have a bunch of index.html files it is not an SPA. If you have a static site generator (like Docusaurus) you will want to answer No.
Example Setup
? Which Firebase features do you want to set up for this directory?
Press Space to select features, then Enter to confirm your choices.
- Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
=== 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 an existing project
? Select a default Firebase project for this directory: portfolio-5a951 (Portfolio)
i Using project portfolio-5a951 (Portfolio)
=== Hosting Setup
Your 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)? No
? Set up automatic builds and deploys with GitHub? (y/N) No
If you have already built your project, you probably already have a ./buildfolder with index.html and 404.html. You should choose to not overwrite these files. If you do, it is no big deal. Just rebuild. You may also need to add some analytics script tags too.
? File build/404.html already exists. Overwrite? No
i Skipping write of build/404.html
? File build/index.html already exists. Overwrite? No
i Skipping write of build/index.html
Configure the deployment to the new site
You'll notice that the CLI placed the firebase.json and .firebaserc files in the root of the project. This is where the configuration for the deployment is stored.
In the firebase.json file we need to add the site we added earlier. If you haven't deployed, you can see this if you go to the Firebase Console -> Hosting -> your-site -> Previous releases -> Instructions.
But the name on your the site card is the correct name. In my case it's read-it-somewhere.
{
"hosting": {
"site": "read-it-somewhere",
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}
}
Deploy the site
Now you can deploy the site. If you have a multi-site setup you can point to the site you want to deploy. In this case, hosting:read-it-somewhere.
As we are only deploying the site files (not the functions or other features) we use the --only flag to indicate we are only using hosting. Read more about deploying functions here.
firebase deploy --only hosting:read-it-somewhere
If you decided on strategy A (init from the package root, not repo root) make sure to change directory into the correct folder before deploying.