Create Firebase single Page Website

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  

1
npm install -g firebase-tools

 .

For host our single page website, We need the firebase command line tool sing npm.
Command : 

1
 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 

1
$ firebase login

 command.

Command : 

1
$ firebase login


1
? 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 : 

1
Firebase init

after run this command it will ask a question


1
2
3
4
5
6
7
? 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


1
? 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


1
? 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


1
? 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  

1
Firebase Deploy

and our Terminal / CMD  for host index.html on firebase.

Our firebase single page website is here.

Related Post

Dart Data type | Dart Tutorial Dart Data type Variables can store data of different types, and different data types can do different things. Dart supports the following data typ...
Array An array is a collection of similar kind of data elements stored in adjacent memory locations and are referred to by a single array-name. The first el...
Use of CollectionViewDataSource method moveItemAt ... Use of CollectionViewDataSource method moveItemAt for Reordering CollectionView cell In IOS (Swift 4) In this tutorial we are study about how we can ...
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...
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...
Introduction to JVM Introduction to JVM JVM stands for Java Virtual Machine. It works as an engine that derives the Java Code. The JVM does not understand Java ty...

Leave a Reply

Your email address will not be published. Required fields are marked *