Create firebase single page Website tutorial
In this tutorial we are study how to create single page website by the use of firebase hosting its very simple. For this we need the firebase account, its free if you dont have then visit firebase website . For firebase hosting steps are following:
- Create Firebase account
- Create the firebase project
- Install Node.js software (If its not have in your laptop)
- Create a Public Folder
- Run the firebase login Command in CMD or terminal
- Run firebase init command and firebase deploy command in CMD or terminal
1: Create firebase account
If you don’t have firebase account then please first create the firebase account its totally free. For create the firebase account visit the website https://firebase.google.com and create your firebase account
2: Create the firebase project
Click on “GET STARTED” or “GO TO CONSOL” and create a new project by tap on “Add project block”
After that Enter your project name and select your country name then create your project.
Now click on left hand Hosting tab and get start youyr project.
3: Install Node.js software (If its not have in your laptop)
First Open the Node.js official Page and download the latest version of Node software and install them and after installing this Go to your Terminal /CMD and run this command
npm install -g firebase-tools .
For host our single page website, We need the firebase command line tool sing npm.
npm install -g firebase-tools
4: Create a Public Folder
Now create a public Directory and put You index.html file in this folder. Firebase look public directory for Uploading the website. Download the sample Directory here -> Firebase
5: Run the firebase login command in CMD or terminal
Go to that directory by Terminal / CMD in which you create the public folder. and after that run here
$ firebase login command.
$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information?
Now we see the above question on terminal /CMD Select ‘y/Y’ for firebase login.
Now select your firebase account in …
5: Run firebase init command and firebase deploy command in Terminal /CMD
After the successfully Firebase login we run the next command which are mention in firebase “Set up hosting” screen.
-> Run this command in Terminal /CMD :
after run this command it will ask a question
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Database: Deploy Firebase Realtime Database Rules ◯ Firestore: Deploy rules and create indexes for Firestore ◯ Functions: Configure and deploy Cloud Functions ❯◉ Hosting: Configure and deploy Firebase Hosting sites ◯ Storage: Deploy Cloud Storage security rules
Now we need to host the website thats why we select the option “Hosting” and press enter
after this it will show you which project you want to select , if you first select any project and run this command again then it will not show
? Select a default Firebase project for the directory:
Now select your firebase project in which you want to host your index.html file.
After that a new question is present on Terminal /CMD
? What do you want to use as your public directory? (public) Public
Enter the Public folder name here, Because we need to public folder as a public directory.
NOw at last question is presnt
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) n
Type ‘n/N’ because we already have the index.html file int his folder if we type ‘y/Y’ then firebase create a new index.html file.
Now at last We run the last command
Firebase Deploy and our Terminal / CMD for host index.html on firebase.
Our firebase single page website is here.