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

Loops in java Loops in JAVA Loops are used to execute a set of statements repeatedly until a particular condition is satisfied. Loop is used in programming to ...
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...
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...
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...
Custom View by use of xib in swift Custom View by use of xib in swift We can create the custom and common view by the use of xib in swift 3.1 and XCode 8.3.2 . Custom views are common ...
How to use Flutter most usable Widgets | Flutter t... We need some basic widgets for creating our first flutter app. Widgets describe what their view should look like given their current configuration and...
Author

Write A Comment