How to Deploy your Website with “FIREBASE”

Deploying your app is one of the major tasks in completing your website or your application.

So what do you mean by deploying?

Deploying a website really means that you are detaching your project from your framework and you are making it a standalone project so that you can publish it over a website aur share it with anyone you want.

Generally you might know that if you want to run your website on a framework, then your website runs on a localhost which is only accessible by you; but in order to make it accessible to rest of the world. The first step which you need to do is → deploy our project. It can be either mobile application or website.

Today we are going to learn how to deploy our project from Firebase.?

Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app and web development.

Firebase is the first choice of developers because it is easily accessible, it is free, you have all the codes at a single place.

It supports

1. Authentication,
2. Database management,
3. queries and also
4. Deploying functions.

In firebase all the codes are already written which we just have to copy and paste from website to our project.

→ Let’s start with Firebase:

So let’s prepare our database and authentication before we even work on them. We will be using Firebase. Go to https://firebase.google.com and log into your Google account.

Now let’s see how do you set up your project. Once you’re in the Firebase console, follow the following steps.

• Click on “Add Project”

• Give your project a name, it can be any name!

• It doesn’t matter if you turn on Google Analytics for the project, it will make no difference. But in this case, we will just enable it.

• Once you see the below image, your Firebase project is created. Click on continue.

Well done! Now let’s set this project up according to our needs.

• From the right panel, select Cloud Firestore
• The Cloud Firestore is the database for Firebase.
• Click on Create Database.
• Select Start in Test Mode.
• Click Enable and wait for Google to provision you Cloud Firestore.
• Your database is made.

Let’s now set up authentication!

• Select Authentication from the side panel.
• Select Set up sign-in method.
• Click on the pencil icon near Email/Password

• Enable it and click on Save.

Now click on Settings icon on the side panel and select Project Settings so that we can setup this Firebase project with our React project.

• Click on the third icon (Web) at the bottom

• Enter the project name and remember to select Also setup Firebase Hosting.

• Hit Next until you’re back into your Firebase project.
• Now, let’s go back to the React app to install dependencies named firebase and firebase-tools

npm install -g firebase-tools && npm install firebase && firebase login

• This will install both the dependencies for you. Also it will ask you to log into your Google Account so that you can use Firebase tools. In the mean time let’s go back to Firebase, and select the config option.

• Copy the entire config and then go back to Visual Studio Code, make a new file named firebase.js and paste it.
• Let’s make the use of the firebase package we just installed through npm and let’s edit the firebase.js file so that we can use authentication and the database from your project.
• Remember to use your own config with this!
• In this code, we initialize a Firebase app with the config.
• We get database and authentication from your Firebase Project and export these objects so that we can use them anywhere.

That’s all with the setup for Firebase! Now let’s go ahead and setup authentication for your beautiful Project.

→ Now as our Firebase is set up, Let’s deploy your Website:

To deploy a production version of the Amazon Clone, we need to set up Firebase hosting. So let’s go to console and type the command:

firebase init

• Select to use an existing project
• Type in the public directory to be “build”
• Allow to rewrite all URLs to index.html

After you do this, run in the console:

npm run build

This will basically ask React to build your app so that you can run this in production. After the build has completed, type this command to finally deploy the application on the internet!

firebase deploy

Once you’ve completed this, you should get an URL at the end of the process. This is the URL where your app is hosted online.

Hurrah.!!

Your app is deployed and now you can share that link with anyone to access. Go ahead and make your website live.

That’s it for this blog.

Thank you! I hope you enjoyed it.

~ Raunak Kumar (code.by.fab)