DEV Community

Cover image for Deploy a website using Firebase Hosting
Gabriel Rufino
Gabriel Rufino

Posted on • Updated on

Deploy a website using Firebase Hosting

There's a lot of options cheap or even free in the market to deploy our projects. One of these and my favorite is the Firebase Hosting, a service of Google.

This is my first post written in English. I'm from Brazil and I decided to try to write a series of articles in a new language with more reach than Portuguese using a translator eventually because I'm not fluent yet. So, I ask you for feedback and corrections if you find any errors. Thanks!

Firebase is a set of services of Google that provides you a BaaS (Back-end as a service), which means you don't have to worry about the boring part of deploy a back-end to your project. One of these services is the Firebase Hosting that you can deploy your website or web app made in HTML, Javascript, and CSS.

I'll show you how to deploy a simple website in the Firebase Hosting at zero cost.

Create a project

We need to click in "Go to console" in the top right corner.

Firebase Page

So the Firebase console. Now, we gonna create a project by clicking in "Adicionar projeto" (I didn't find how to change the language on the firebase console)

Alt Text

Now, we chosen the name of the project and keep on! In the mine, I've chosen the name "Firebase Lab"

Alt Text

Here you can disable google analytics for now:

Alt Text

The project finally created:

Alt Text

Deploy website

We gonna create a folder and a simple html:

$ mkdir firebase-lab-website
Enter fullscreen mode Exit fullscreen mode

Look at our simple html in the folder:

firebase-lab-website/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Lab</title>
  </head>
  <body>
    <h1>Firebase Lab</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now, we need to install the CLI of the firebase with the command below:

$ npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

Now, we need login:

$ firebase login
Enter fullscreen mode Exit fullscreen mode

After that, execute this command in the website directory and choose the right project:

$ firebase init
Enter fullscreen mode Exit fullscreen mode
  • First, you select the option "Hosting: Configure and deploy Firebase Hosting sites" with the space bar and press Enter.

  • Second, choose the option "Use an existing project" by press Enter.

  • Third, choose the project that you created.

  • Fourth, enter the folder of your index.html. The default is "public", but in my case, is "./".

  • Last, we need to say if your website is a single-page app.

All ready! Now, the last command in the directory is to deploy:

$ firebase deploy
Enter fullscreen mode Exit fullscreen mode

Our website is online!!

You can see details of the deploy in the option "Hosting" at the left menu:

Alt Text

Give me feedback! :) Thanks!

Top comments (13)

Collapse
 
removereports profile image
Martin Horan

Does it support wordpress and is it free?

Collapse
 
gabrielrufino profile image
Gabriel Rufino

Unfortunately, it's not possible because WordPress requires PHP. In the Firebase Hosting, you can put only static files: HTML, JavaScript, CSS, Assets...

Collapse
 
rajaborntohack profile image
Ilaiyaraja

no. under firespark plan we can use upto 10 gb per month as free after that you have to pay per usage.

Collapse
 
nathn profile image
Nathan

Is it possible to use a custom domain ?

Collapse
 
denom profile image
Den

Absolutely

Collapse
 
sergeichamkin profile image
SergeiChamkin

Great work! Thank you, very interesting

Collapse
 
gabrielrufino profile image
Gabriel Rufino

Heey, thanks!!

Collapse
 
nakon90120952 profile image
NAKON

ขอบคุณคร้บ

Collapse
 
gabrielrufino profile image
Gabriel Rufino • Edited

No problem :)

Collapse
 
olalani profile image
Olalani Oluwaseun

I will give a try 😊

Collapse
 
gabrielrufino profile image
Gabriel Rufino

Thank youu! 😊

Collapse
 
jundolor profile image
jundolor

Can I use it to host my Vuejs website?

Collapse
 
gabrielrufino profile image
Gabriel Rufino

Yes, you can! VueJS compiles to HTML, JavaScript and CSS.