How to Use Firebase CLI Tools to Deploy a Web Application

This is a quick guide on how to deploy a Firebase web application to the Firebase CDN using their CLI toolkit. I previously wrote a guide on how to use Firebase Cloud Firestore with React and Ant Design to quickly create web application prototypes; you can use this guide to bring that project online for free.

Firebase provides a full suite of products – including a real-time database, authentication, file storage, and “cloud functions” – that can get help you launch in record time. Yes, there is a lot amount of vendor lock-in here but, depending on your goals, it can the perfect set of tools for you.

Installing the Required Tools

First, you will need to install Node.js for your operation system. The website has pretty good instructions so head over there and install Node.js if you need to before continuing.

Once you’ve installed Node.js, you can ensure it is available on your system by running node --version and making sure the version is something close to the latest version available on the website.

Next, you will need to install the Firebase CLI tools from npm – the Node.js package manager.

npm install -g firebase-tools

This tells npm to install firebase-tools globally on your system instead locally inside of another project.

If you need to, create a Firebase account now.

Then log in to your Firebase account:

firebase login

Starting Your New Firebase Project

Now that you have all of your tools installed, you can create a new directory for your new project:

mkdir firebase-project
cd firebase-project

Then, initialize you project with the metadata that Firebase needs for deployment:

firebase init

The tool will ask you some questions to determine what to store in the configuration. For the purpose of this demonstration, use these responses to the questions:

Firebase init Step 1

When it asks you which features you would like to set up for this project choose the features you want to enable. I’m going to choose Firestore and Hosting.

Firebase init Step 2

Then, select “create a new project”.

Firebase init Step 3

For the remaining questions, select the default responses.

Once you’ve initialized the project directory for the Firebase project, head over to the Firebase console and create a new project for this example. To keep things consistent, name it firebase-project. Then go to the “Database” tab and select “Get Started” with Cloud Firestore.

Firebase init Step 4

Finally, once all that is done, run firebase use --add and select your project from the list. If it asks you to choose an alias for the project, call it “live”.

Now you can run firebase deploy to deploy your blank site to the Firebase CDN. Once it’s complete, the CLI should provide you with a link to your new site. Visiting the link should load a page that looks something like this:

Firebase init Step 5

And that’s it! You’ve successfully set up a Firebase project.

Now, whenever you run firebase deploy, whatever is in the /public directory will be pushed to the Firebase CDN. This is handy since most build tools such as Webpack can be configured to write the output of the build process to whatever directory you like – in this case /public.

Next Steps

If you you want a simple project to deploy, you can follow this guide to quickly build a simple React app that uses Firebase Cloud Firestore.

Firebase allows you to connect a custom domain to your project. This can be found under “Hosting” on the left-hand menu. If you want a professional-looking website, using a custom domain is always recommended.

Finally, make sure you set up proper security rules for your database. I intend on whipping up a tutorial for this in the future but for the time being, reference this document for details on how to set up security rules.

Comments