deploying to firebase hosting

Hosting with Google’s Firebase is as easy as it gets. And with Github’s workflows, updates to your site are as easy as pushing to your repo.

Firebase Hosting can be free depending on your use case (as is in my case at the time of this writing at least). Added complexity and functionality may require a paid plan (pricing info here). But for a simple portfolio site, it’s free. Let’s get into it.

The Setup

First thing’s first: get firebase installed on your machine, allowing you access to their services from a terminal.

npm install -g firebase-tools

Once successfully installed, you’ll need to login to your firebase account through the terminal:

firebase login

This will open a browser window where you can login to your firebase account. Once logged in, you can close the browser window and return to your terminal, which, if all went well, should confirm that you are logged in:

✔  Success! Logged in as <your email address>

Firebase and your Project

Now that you have firebase installed and are logged in, you can initialize firebase in your project. Navigate to your project’s root directory and run the following command:

firebase init hosting

This will initialize Firebase hosting in your project (if you are using other Firebase services, firebase init lets you choose the services you want). Firebase will walk you through a series of questions to get your project set up. At the time of this writing, the questions are as follows:

1. ? Please select an option: Use an existing project
2. ? Select a default Firebase project for this directory: <your firebase project>
3. i Using project <your firebase project>
4. ? What do you want to use as your public directory? dist
5. ? Configure as a single-page app (rewrite all urls to /index.html)? N
6. ? Set up automatic builds and deploys with GitHub? Y
7. File dist/404.html already exists. Overwrite? N
8. File dist/index.html already exists. Overwrite? N
9. ✔ Success! Logged into GitHub as <your github account>
10. ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) <your github repo> 

Profits

And that’s it! You’re all set up. Now, whenever you push to your repo or merge pull requests, Github will rebuild your site and deploy it to Firebase hosting. You can see the status of your deployments in the “Actions” tab of your Github repo. And you can see your site live at the URL provided by Firebase.

• #firebase
• #github
• #hosting