Using Firebase for the First Time

As a junior dev localhost is the bread and butter to testing webapps but then comes the time to start showing off our work online, we need something more. That is where hosting websites come in and I have chosen Firebase as my first platform to host my portfolio with.

To start, you will need a Google account. As a developer in the modern age, I’d assume you’d have one and even if you don’t it’s free and easy to obtain. Next you would need Node,js installed. Another piece of free software that you can get at nodejs.org.

Now with your google account, it is time to access the Firebase console which is easily accessed by searching with your search engine of choice or I can provide the URL here: https://console.firebase.google.com/u/2/

Here we really begin with the add project button, it looks like this:

Now name your project

However note that the “Project-ID” will be used in your URL to find your website. Keep that in mind before naming a website about therapists, it will be amusing if you do. You now have a name reserved for your project, time to connect your code to it.

Assuming your terminal is in your project folder’s directory, enter this:

npm install -g firebase-tools

to install the Firebase CLI and then:

firebase login

to log your Firebase in. Upon completion of downloading the CLI and logging in, you will be greeted by this in your defaulted browser.

If it was not your defaulted browser something has gone horribly wrong but we can continue to the next step nonetheless.

Following the “Woohoo!”, you will need a build to be created for initialization so use:

npm run build

It is now finally time to initialize your local project to firebase. Or in simpler terms, connect it to the project you made within the Firebase console. Enter:

firebase init

and it will bring this up:

With your arrow keys go down to Hosting, PRESS SPACEBAR and then enter. I happen to have pressed enter a few times without selecting anything. If you did the same please leave a comment below.

Now go through the steps according to your preferences HOWEVER when it asks:

Enter build to reference the build you just created before initialize process and when it asks:

Please for the sake of your project say no. I hit yes and that broke my code for a good while before I realized this was the problem. I proceeded to go to github and retrieve the code for that index.html file.

And now with the connection between your project and the project within firebase connected, you are done after this next step. And that is where you enter:

firebase deploy

This is the point where you are uploading your code to your firebase project. When the deployment is completed, you it will give you a familiar looking URL to go to, in order to see the website you’ve just uploaded.

Now please note that this is what I believe to be the bare minimum to hosting a site on Firebase. There are however a lot of tools to choose and use on the Firebase console, such as connecting your new site to another domain name. As a new web developer, this is plenty sufficient in hosting a portfolio. However if you think there was anything wrong with my procedure in using Firebase, you’re wrong. But please leave a comment below detailing your wrong idea that may simplifying this process or alternatives.

Thanks for reading and here is the portfolio that I hosted with Firebase:

http://jn-zhang622.web.app/