Publishing your front-end to Firebase Hosting

Hi beloved heroes!

Today we will learn how to publish our front-end assets to firebase hosting. In the first step lets create some code.

Create a folder called MyPublish and inside it create three files: index.html , index.js , index.css :

index.html

index.css

index.js

Go to Firebase Console (create a google account if you are not registered) and create a new project (click on Add project ):

On the project creation modal, chose a name you want, chose your country and click on Create Project :

If all things are done correctly, you will see a screen like this:

Now we must install a cloud hosting on our project.

Open a terminal in root of our project folder and execute:

npm install -g firebase-tools

After the firebase-tools installation we must login in our google account. In terminal, execute:

firebase login

Inform your google account credentials.

After login in, we need to initialize a new firebase app for our project. In terminal, execute:

firebase init

Firebase will ask you to chose a product. Select hosting :

Firebase now will ask you to chose the target project. Chose the project you created previously (for this tutorial, it is My Publish):

Done!

Now lets see what it creates on our project:

• .firebaserc: the cloud configuration for target project.
• firebase.json: the publish configuration for our project (for now, it’s empty)

Now, let’s do some little refactoring.

Move your front-end files (index.html, index.css, index.js) to a new folder called app :

Open your firebase.json and type:

To understand this file:

• hosting: the name of cloud service.
• public: the folder containing the assets that will be published.
• ignore: the files that NOT will be upload to server.

Now we will publish our website.

In terminal, execute:

firebase deploy

And that’s it:

Now just open the Hosting URL on your browser:

Enjoy =).