Firebase - Hosting an HTML5, CSS3, and JavaScript website
Hello everyone! In this article, we will answer a very common question not only in web development but also for those who wish to publish their company's website, products, or services without incurring many expenses at the beginning of the journey.
To this end, we want to present an incredible solution from Firebase, which is a Google platform for web and mobile applications. In this article, we will introduce Firebase Hosting. In this article, you will learn:
- What is Firebase?
- What is Firebase Hosting?
- Why use Firebase?
- What are the limitations of the free plan?
- Creating your free Firebase account
- Creating the First Project
- Installing Firebase CLI
- Creating an online Project
- Downloading the project from GitHub
- Preparing to publish the project
- Deploy
- Checking for errors
- Registering a custom domain
- Adding a custom domain to Firebase
- What is the next Step?
If you want to check this same content in video format, you can access the link at the end of this article.
What is Firebase?
Firebase is a platform of tools for web and mobile development created in 2011. It was acquired by Google in 2014 and currently has around 19 products, including cloud technologies like Cloud Functions, similar to AWS Lambda service, where functions are created on the server and invoked through events, making it easier, for example, to isolate business rules on the server side without necessarily needing a programming language or setting up a server-side environment. With Cloud Functions, an application written for Android or iOS can trigger events on the server and execute functions written on the server.
In addition to Cloud Functions, another product of Firebase stands out, which is the real-time messaging service between platforms, Firebase Cloud Messaging, which has a notification mechanism between languages and platforms that allows, for example, an app to know that updates are available or to notify a client that new posts from the channel they follow are now available. It is a service similar to Pusher and also to AWS SNS, which facilitate communication between applications.
Firebase has many free features, and some that start to incur charges after a minimum quota is reached, depending on the product. There are two plans,
Spark Plan - Free
Blaze Plan - Paid once the Spark plan quota is reached for the service in question.
Machine Learning tools, along with performance improvement features, are among Firebase's highlights. One of the services that has been gaining ground recently is Firebase Hosting, a free hosting service for static websites, which we will detail below.
What is Firebase Hosting?
It is a Firebase hosting service that allows you to store static websites: HTML5, CSS3, and JavaScript for free on the Spark plan.
To do this, you need to use a Google account, such as a @gmail.com account, to access the service; you also need to use Firebase CLI, a command-line tool to publish your site. Below, we will provide a step-by-step tutorial.
Is Firebase Hosting good? Why use Firebase Hosting?
Firebase Hosting is an excellent option for static websites, such as institutional sites, landing pages, app websites, PWAs that need speed and reliability, since the server side is managed by Google itself and has numerous advantages like:
- Speed - Websites are automatically stored and cached (A cache of the application is created on the first request), and numerous CDNs or content delivery networks are mirrored around the world, making access faster.
- SSL - You get a free and automatic security certificate by using Firebase Hosting.
- SSD - Files are stored on SSDs, making the reading and writing process very fast.
What are the limitations of Firebase Hosting?
With Firebase Hosting, you cannot host applications that use back-end programming languages like PHP, for example; in this case, it is recommended that you use Google Cloud or another cloud solution.
In Firebase Hosting, we have two plans as mentioned, in the Spark plan, which is free, you have a limit of 10GB storage and 10GB transfer per month.
Hoping to host a site on Firebase
How about we put it into practice and publish a site on Firebase using Firebase Hosting and Firebase CLI? When you publish a site on Firebase, it gives you a free domain with the .web.app extension; if you do not want to use a free domain, you can register your domain and point it to Firebase.
Creating a Firebase account
To create a Firebase account, you need to have an email linked to a Google account; any Gmail email will already have this link.
Then access: https://console.firebase.google.com/
Or click on the upper right corner Go to console
It is very important! that you create your first online project before going to the command line to accept Firebase's terms before creating a project.
Creating the First Project
Click on Create a project, then give a name for the project and click on I accept Firebase's Terms:
I will name this project hcode-ferrari. Note at this moment that Firebase will check if the name is available; if not, it will suggest a name close to the one you want. It is very important to be attentive to the project name since the generated URL will be based on this name.
On the next screen, the question is whether you want to enable Google Analytics for your Firebase project. With Google Analytics, you will have full control over access reports, visitor sources, search terms that led to your site, total visitors, A/B Testing for performance improvement and user experience optimization. It is a complete and powerful tool.
You can keep the option Enable Google Analytics for this project enabled. Click Continue.
In the third step, we are informed about the shares that will be necessary to utilize the tool; read carefully, and if you agree, select the Analytics Country, in our case, Brazil, enable the options, and click create a project.
After creating the project, click continue. You will be redirected to the Project Overview.
Although it is possible to create the project visually, let’s look at the Firebase Hosting option, and then we will go to the command line to publish our site.
In the left menu, click on Develop, then Hosting, and click the Get Started button.
From there, we will install Firebase CLI; we have already made a video on this installation, so if you wish, you can watch the video Installing Firebase CLI or continue in the next section Installing Firebase CLI.
Installing Firebase CLI
At this stage, you will need a text editor; we recommend Visual Studio Code, which is currently a powerful tool for building applications, websites, and programs. It is free and modular, so you can add extensions and make it even more powerful.
https://code.visualstudio.com/
You will also need to have Node.js and NPM installed; NPM will be installed automatically along with NodeJS.
Access: https://nodejs.org/pt-br/
Download the LTS version, which is recommended for all users
After installing NodeJS, close VSCode or Visual Studio Code, and open it again. You will also need to install Git to download the example project that is in our GitHub.
Access: https://git-scm.com/
Click the green button Download 2.27.0 for Windows; a 45.8MB file should be downloaded, and after installation, close VSCode and open it again.
Create a folder for the project; it can be any name, but preferably, use the name of your Firebase project.
Click on File-> Open Folder and select your project folder. After loading the project folder, click on the Terminal menu and choose the New Terminal option.
At the bottom, you will see the terminal that was created. It is probably of type PowerShell because that is the default in VSCode.
Tip: If you want to switch from PowerShell to Bash, follow the step-by-step in the next paragraph.
Since you have already installed Git, you can switch to Bash if you wish; click on the right corner where there is a number 1:powershell choose the last option select default shell and a top option will open, choose the third option Git Bash, then go back to the terminal and look for the trash can icon in the bottom right corner, delete the terminal, and reopen it from the Terminal menu -> New Terminal; now it should show Bash.
Install the Firebase CLI tool globally with the command:
npm install -g firebase-tools
The -g option will make the tool available throughout the machine, so there is no need to install it again.
Creating an Online Project
To start our project, we need to link the Firebase login with the terminal; to do this, type the command:
firebase login
If you are already logged in, the terminal will show which account you are logged into; you can disconnect from this account with the command:
firebase logout
To connect to another account, just type firebase login again.
It will open a window to enter your login and password; after authentication, confirm the privileges that Firebase needs on your account.
Click Allow and then the screen indicating that we are connected will appear; you can close the browser.
Go back to the terminal and start the project with the command:
firebase init
The first question from Firebase is about the directory structure; it looks for a folder that has configuration files, such as package.json. Since it didn’t find one, it understands that it is outside the main directory. Do you want to proceed? Type Y for yes.
Which Firebase tool would you like to use? Use the arrows to select the Hosting option and the space bar to select the option, press Enter.
In Project Setup, select the Use an existing project option to select the project we already created online.
Press enter to select the project with the name you assigned, in my case, hcode-ferrari.
Would you like to use a public directory? Yes with the name public? Just press enter.
Your project will be a Single-page application, meaning all URLs will be redirected to index.html; you can press N to not change your code.
The project is set up and ready for deployment or production publishing.
Downloading the Project from GitHub
Now that our Firebase is ready, let's download the example project; this project is a Ferrari website that we built in the Hcode Lab Program, and we also transformed it into a PWA; you can follow the PWA development process in the Hcode Café we did about PWA, and the project is on GitHub. Let's download the project:
https://github.com/hcodebr/pwa
Simply open the terminal and clone this project into our hcode-ferrari folder; Git will generate a folder called pwa with the contents of the repository.
Preparing to publish the project
The pwa folder contains its own Firebase configuration files, like the firebase.json and .firebaserc files, which determine the project's dependencies and its name.
Your folder structure should look like this:
What we will do now is only take the public folder inside pwa; it will overwrite our current public folder. Just move the pwa public folder outside to the project's root by dragging it.
A warning that this folder will overwrite the current public folder will be displayed.
Just click replace, then check if the folder has been copied, and you can delete the existing pwa folder with all the content it had. If VSCode cannot delete this folder, open it in Windows Explorer or Finder (macOS) and manually delete the pwa folder.
Deploy
Now that the files are ready, let's send them to Firebase; simply execute the command:
firebase deploy
Before executing the command, check that the domain with the name of our project has already been created, but it does not have content.
Done! Our site is online! See the result after executing our deploy. Press F5 on the page. A folder named .firebase and a cached version of the application will be generated.
Checking for Errors
If there is any error during deployment, a log file will be generated with a description of the error; try to read this file carefully as it will tell you which step failed.
Registering a new .com.br domain
To register a domain, you will spend around R$ 40.00 per year to access registro.br and create an account, then choose your domain name, see if it is available, and register it, make the payment, and access the domain.
Click on the domain and then on Edit Zone
And in this section, we will work in the next section.
Adding a custom domain to Firebase
After publishing your project, access the Firebase console at console.firebase.google.com and select the project you created, in my case, hcode-ferrari.
You will see a panel with project information, including a blue button: Add a custom domain. Once we have already registered the domain. Click this button and enter the domain name.
We need to verify that we have authorization to publish on the specified domain. Firebase will generate a TXT type record to validate that we have this access; copy the value of the record.
Access the registro.br site and select the domain you wish to redirect to Firebase Hosting.
Click on the Edit DNS option. Click the lower button New entry.
Copy the value of the key from Firebase and paste it into the new entry; select type TXT and paste the text.
If it is a new domain, you may have to wait around 2 hours to make any DNS changes until the DNS propagation occurs.
After adding, click SAVE.
Go back to Firebase and click verify ownership; if everything is correct, the following screen will appear:
After adding the A type records with the two suggested IP addresses, click Save.
This is the final screen at registro.br; remember that it is not the site registro.com.br, it is ONLY registro.br.
It may take up to 24 hours for the domain and DNS changes to take effect. Normally, everything is updated within 10 minutes.
After propagation, just access the .com.br domain, in my case www.hcodelab.com.br.
If you want, you can follow this entire tutorial in video format on Hcode Café #28.
What is the next step?
Did you enjoy Firebase Hosting? We hope so! How about learning more about Firebase and its other tools? Subscribe to our YouTube channel and follow the weekly lives of Hcode Café.
You can also learn to create real-time applications with Firebase in our Complete JavaScript Course with 38 hours of content, where we create a Dropbox clone with Firebase. Take advantage of the great discount.
Check out Firebase documentation, which is also quite complete and has many new features in Portuguese.
If you liked the article, share it with your friends and follow Hcode on social media!
See you in the next article! Until then!
Glaucio Daniel