Skip to content

Web App Deployment with Firebase in 2 minutes

In this tutorial, I'm going to show you how to deploy your web app to Firebase in 2 minutes! (that's the goal 😏)

🔗Setting Up Firebase

  1. Go to https://firebase.google.com/, and sign in with your Google account.
  2. Go to Console
  3. Click on Add project
  4. Enter the name of your project
  5. Disable Google Analytics

Screen Shot 2019-12-12 at 3.51.13 PM 6) Click on Create project 7) Click on Hosting on the left sidebar Screen Shot 2019-12-12 at 3.53.47 PM 8) Now, on the main banner click on Get started Screen Shot 2019-12-12 at 3.54.15 PM 9) Install the Firebase CLI tool in your machine by running:

npm install -g firebase-tools

🔗Building Your Project

  1. Before you can deploy your project, you have to build it. If you are using React or Angular, you can easily do this by running the following command:
npm run build --prod

Note: Depending on the tech stack you are using (React, Vue, Angular, etc), a folder will be created after running the build command. This folder will contain your HTML, CSS, JS, etc.

🔗Firebase App Setup

  1. Inside of your project, open the command line and run:
firebase login
  1. Then run:
firebase init
  1. Select Hosting

Screen Shot 2019-12-12 at 11.26.00 AM

  1. Select 'use an exciting project' and select the project you just created in Firebase.

Screen Shot 2019-12-12 at 11.27.19 AM

Screen Shot 2019-12-12 at 11.27.26 AM

  1. When it asks you about the public directory, you select the folder that was created whenever you ran your build command. E.g In React it's build, and in Angular it's dist/Your-project-name

Screen Shot 2019-12-12 at 4.19.08 PM

  1. When asked to configured as a web app, enter Y

Screen Shot 2019-12-12 at 11.27.45 AM

  1. When asked about overwriting the index.html type N

Screen Shot 2019-12-12 at 11.31.18 AM

🔗App Deployment

  1. run the following command:
firebase deploy

After a successfull deployment, you should see something like this: Screen Shot 2019-12-12 at 11.28.32 AM

Now, clicking on Hosting URL, should open the web app you just deployed.

  1. You can also access the hosting url in your Firebase console. You can also setup a custom domain via the console.

Screen Shot 2019-12-12 at 4.28.42 PM

This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit [thisdotlabs.com]((https://www.thisdotlabs.com).

This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.

You might also like

General

Semantic HTML: Why it matters and top tips on how to apply it

General

Getting Started with Git

General

Intro to Google DevTools: Console Panel

General

Intro to Google DevTools: Network Panel