“Google Firebase you can host your website and single page application”
Are you wondering where to host your NextGen website or full blown single page application built using Angular JS or Ionic Framework.
Google Firebase hosting gives you a chance to skip evaluating from various cheap cloud based hosting vendors and rest all in one place.
All you need is latest nodejs installed, working data connection and Google Firebase account created.
Lets get started, point to the Nodejs official page and download the current version. Then login to you Google Firebase account and create a project. I’m using the free plan for this demo but you may also choose to purchase a suitable plan and use any custom domain name of your business.
After installing the current version of nodejs, open terminal/command and type below command:
npm install -g firebase-tools
Above will install Firebase on your local workstation. Use sudo/ or run as administrator on windows.
Now, lets try logging into your firebase account from the command line, type below while in the same terminal/command:
firebase login
Above command will prompt you something to accept certain permissions/ this may change in future.
When asked type Y and hit enter, you will be redirected as below (accept them and you are logged in via CLI ):
Then create a folder on your desktop with all your files that you need to host, make sure to have one index.html file in the root.
For this demo have created a directory called “sampledemo” and within this i created a sub-directory called as “public” on my desktop which has one index.html file. Firebase will look for a “public” directory while uploading/sync.
Now via terminal/command point to that directory called sample demo, using below command:
cd Desktop > cd sampledemo
When you are inside sample demo directory in you CLI, type below command:
firebase init
and you should see below:
You’re about to initialize a Firebase project in this directory:
/sampledemo/
? What Firebase CLI features do you want to setup for this directory? Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
First, let’s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use — add,
but for now we’ll just set up a default project.
? Select a default Firebase project for this directory: hostingdemo-c67e3 (firebase-hostingdemo-c67e3)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build’s output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔ Wrote public/404.html
? File public/index.html already exists. Overwrite? No
i Skipping write of public/index.html
i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…
After, the initialisation is complete lets deploy the app files to Firebase. type below command:
firebase deploy
You should see like below in terminal/command:
=== Deploying to ‘hostingdemo-c67e3’…
i deploying hosting
i hosting: preparing public directory for upload…
✔ hosting: 3 files uploaded successfully
i starting release process (may take several minutes)…
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/hostingdemo-c67e3/overview
Hosting URL: https://hostingdemo-c67e3.firebaseapp.com
Now if you point your browser address bar to Hosting URL: https://hostingdemo-c67e3.firebaseapp.com
You can see your app running in the browser.
To check via Google Firebase console go to hosting tab and you should see like below:
Under Hosting > Usage tab, you can select to add a custom domain for this hosting by clicking on connect domain previously connect custom domain option.
If you do not see this connect domain button as above you need to hit the Get Started button and press Continue followed by Finish to have this appear on dashboard, interface has been upgraded since I posted this.
Thats it! Hosting was never so simple Google Firebase Rocks!