Single page app with Google's Firebase
Nowadays deploying a website out on the web is a trivial process. All you need is a computer to write your code in, an internet connection, a hosting provider, a DNS record, use versioning system to host your app files, and money…. Eh, that list is getting long.
Let's start over, shall we?
Nowadays deploying a website out on the web is a trivial process. Google's Firebase cloud system makes the deployment easy. In this tutorial, we will deploy a single-page website on the web in just a few steps.
Prerequisites
- Command line experience. You should be able to create directories and files and run a few commands.
- Able to run commands on the command line. Administrator privileges on your machine.
- A computer with internet access.
- 5-10 minutes.
- Gmail account.
Step 1
Log in to the Googles Firebase developer console here:
https://console.firebase.google.com/
Step 2
Once you have logged in and are on the main page, click on “Create a Project”. Choose a name for your project. I chose firebase-tutorial.
Feel free to enable/disable analytics for your project in step 2 of the wizard.
Select the default account if you chose to enable analytics*.
Then click “create project”
If you chose to disable analytics, go ahead and click the “create project” button.
*Make sure to accept google analytics terms if you enabled analytics.
Step 3
Once you have created your project, you should now be on the project's homepage.
Let's go ahead and create an app by clicking the web ( </> ) icon.
Step 4
Choose a nickname for your app, I chose “firebase-tutorial”. then click “Register app”.
if you select the Firebase hosting checkbox, you can either accept Google’s site name or you can create a site name. if you create a new site name. your website will be available at **your-site-name.web.app*
Step 5
Download the Firebase tools
curl -sL https://https://firebase.tools | bash
Step 6
Once Firebase tools are installed, type the following
firebase login
Make sure you use the same account to log in as the one you used for creating a project earlier.
Step 7
In your command line, let's navigate to our desktop (or where you keep your project files) and create a directory there. Type the following:
cd ~/Desktop
mkdir firebase-tutorial
cd firebase-tutorial
Step 8
Initiate your project
firebase init hosting
in the prompts that follow,
- we already have a project so select, use an existing project. hit enter.
- hit enter again for selecting the default project
- what do you want to use as your public directory? (public).
- hit enter again. we will use the default directory.
- configure as a single-page app ?
- enter ‘y’
- we will not be setting up automatic deployment with GitHub, enter ‘N’
Step 9
Deploy your app
great!! we are almost there. You now have a single-page web application.
let's see it live on the internet by doing the following:
firebase deploy
Visit your site on the web by selecting the Hosting URL value in the printed output of your terminal.
when you visit your site, you should see something like this:
Congratulations, you now have a single-page web app live on the internet.
Bonus Points
The default page is boring. Let’s spice it up some and let's have our friends visit our site.
Step 1
Rename your index.html file to index1.hml and create a new index.html file inside your public directory. copy the content below and put it in the new index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Jokes Website</title>
</head>
<body>
<p>Welcome Friends,</p>
<p>Want to hear a joke? click the button below. ;)</p>
<button onclick="fetchAJoke()">Tell me a joke</button>
<p id="joke-paragraph"></p>
<script type="text/javascript">
function fetchAJoke(){
$("document").ready(function(){
const jokes_api_url = 'https://v2.jokeapi.dev/joke/Programming,Miscellaneous,Dark,Spooky,Christmas?blacklistFlags=nsfw,racist&type=single'
$.get({
url: jokes_api_url,
type: 'GET',
success: function(result){
const jokeParagraph = $("#joke-paragraph");
jokeParagraph.text(result.joke);
},
error: function(error){
alert("error, try again later" + error);
}
})
})
}
</script>
</body>
</html>
Step 2
Let's deploy our website.
firebase deploy
if you followed the steps above, you should have something like the following image.
see my live site here:
https://fir-tutorial-d6310.web.app/
Conclusion
If you are looking to deploy a small site, Googles Firebase is a good tool. It is convenient and you don't have to worry about the other things that come with trying to host a site online. This is also good for showcasing your projects.
Post in the comments your site URL. I look forward to seeing any remixes you guys make.
Top comments (0)