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 =).