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.
Command :   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.

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 : Firebase init
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.

Related Post

Compile C/C++ program (Dev-C/C++) what is Dev-C/C++? Dev-C/C++, developed by Bloodshed Software, is a fully featured graphical IDE(Integrated Development Environment),which ...
Asset Color Catalog | Swift Tutorial Asset Color Catalog is the feature of XCode 9. BY the use of this feature we can maintain the colors easily and avoid the mistakes. We can create the ...
Loop Control Statement Loop control statements are used when a section of code may either be executed a fixed number of times. C gives you a choice of three types of loop st...
Switch Case Statement Switch Case Statement The switch statement is a multi-way branch statement. It provides an easy way to dispatch execution to different parts of c...
Invitation Letter for Visa Invitation Letter Samples These letter are necessary for taking visa of another country. so these samples are the most important document. Sample 1 ...
Data Types in Java Data Types in Java Data types represent the different values to be stored in the variable, for example if a variable has int data type, it ...
Author

Write A Comment