In this story, I am going to talk about firebase hosting for Angular and Express API. I have considered MEAN stack here.
In this article, I will assume the application is ready with SSR and express API is ready.
What is Firebase Hosting?
Firebase hosting is a Google hosting service which provides static web content to the user in a secure, fast, free and easy way.
Why Firebase Hosting?
Most of the web hosting will charge you or will be slow if they are free, also you have to pay extra for getting an SSL certificate to convert your website to a secure one with https.
Firebase hosting is free. So, it won’t cost you anymore. It by default provides SSL certificate and offers an impressive speed across multiple geographic locations without the need for a separate CDN on top.
Requirements
Google Account:
I believe you might already have a Gmail account, which is enough. If not create one.
Firebase-CLI:
Before you can install the Firebase CLI, you will need to install Node.js on your machine.
Once you’ve installed NodeJs, you can install the Firebase CLI using npm (the Node Package Manager) by running the following command:
npm install -g firebase-tools
Lets get started :)
Step 1: Creating firebase project
Go to (https://firebase.google.com/) and sign in with your Google account
then create new project, enter your project name (firebase-express-demo in my case)
Step 2: Firebase Login
Now come back to the command line and go to your project folder
cd firebase-express-demo
First we have to login into firebase from command line. Type in the following command.
firebase login
It will take you to the sign-in page in the browser, once you’ve successfully logged in it will show you something like this.
Step 3: Setup firebase in project
To setup firebase in your existing project you have to perform below task.
- Create firebase.json to root of your project (You can read more about firebase.json(https://firebase.google.com/docs/hosting/full-config)
- Optional, Create .firebaserc (This may useful, if you have multiple environments and multiple websites)
This is how my firebase.json and .firebaserc looks like
(https://github.com/erashu212/firebase-express-demo/blob/master/firebase.json)
We will use firebase functions and http events to route express API.
In my firebase.json, there is a section of hosting which is having public, rewrites and functions property.
“public”
It tells firebase to make that folder publicly accessible. This should be the folder which are meant to be available for end user. In my case, I have marked dist as public (this dist folder is generated using angular-cli)
“rewrites”
As the name suggest, It is a re-writer which trigger the function on hit of specified source.
In my case, on hit of public domain (https://firebase-express-demo.firebaseapp.com/), it will trigger the function expressApp
“functions”
This block is used to expose your https events and firebase functions. In my case I have stated where expressApp function can be found.
"source": "<dir_name>", in my case it is functions folder
In this project, I have created two sub-folders under root folder.
“server ”: This directory will keep all express related stuff.
“functions ”:This will keep code and structure for firebase hosting.
Firebase deploy requires all the dependencies to be listed under functions folder package.json.
The dependencies defined in package.json are going to be installed freshly during deployment.
Step 5: Deployment
In this demo project, I have written a small script which will copy the dist, server and dependencies to “functions” directory.
You can see the scripts here
(https://github.com/erashu212/firebase-express-demo/blob/master/index.js)
When we say
firebase deploy
it is going to deploy the folder mentioned in firebase.json and functions defined under “functions” sections
Congratulations! your website is now live, you can check by going to url which is provided in the command line in my case it is (https://fir-demo-63781.firebaseapp.com/)
If you liked this, click the ❤️ below so other people will see this here on Medium. Please don’t forget to like, subscribe and comments.
Top comments (3)
Nice.
@jeffchavez_dev Share with your friends
Great