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

Variables in Java Variables in Java A variable is something which is associated with a value can be changed. For example: int i=10; Here variable name “i” wh...
Decision Control Statement C has three major decision making instructions— the if statement, the if-else statement, and the switch statement. The if Statement It is used to ex...
Strings String can be represented as a single-dimensional character type array. Strings in C are group of characters, digits, and symbols enclosed in quotatio...
Firebase Push notification | Swift tutorial Push Notification by firebase in IOS.For Firebase Push notification we need to have paid apple developer account. You need to Enroll into the Apple D...
Dart Introduction | Dart programming language Dart Introduction Dart is a scalable language that you can use to write simple scripts or full featured apps. Whether you’re creating a mobile app, w...
Navigation Tab Bar in IOS | Swift tutorial Navigation Tab Bar in IOS | Swift tutorial Different Customizing techniques for Navigation bar with storyboard and code 1) Custom NavigationTabBar b...
Author

Write A Comment