App hosting with Firebase in 2 Minutes (React, Vue, Angular, etc)
Tags: firebase, angular, vue, react
Published: 2020-01-15 00:39:52

In this tutorial, I'm going to show you how to deploy your web app with 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](//images.ctfassets.net/zojzzdop0fzx/3kdQMLZn3N6dHdc1r7qhcd/b7d442703934c8d1e688156c96141fc0/Screen_Shot_2019-12-12_at_3.51.13_PM.png)
6) Click on __Create project__
7) Click on __Hosting__ on the left sidebar
![Screen Shot 2019-12-12 at 3.53.47 PM](//images.ctfassets.net/zojzzdop0fzx/e3L79IJ308KVZjZHB3u6O/f1f3b0c7ce649238b01d71cff08e95e9/Screen_Shot_2019-12-12_at_3.53.47_PM.png)
8) Now, on the main banner click on __Get started__
![Screen Shot 2019-12-12 at 3.54.15 PM](//images.ctfassets.net/zojzzdop0fzx/7IKkQOXtWhZyP2pLEdII9w/28faa2a1e3f3d3ee0f407db737b2fb97/Screen_Shot_2019-12-12_at_3.54.15_PM.png) 
9) Install the Firebase CLI tool in your machine by running:

```typescript    
npm install -g firebase-tools
```    
## Building Your Project

10) 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:

```javascript
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

11) Inside of your project, open the command line and run:

```javascript
firebase login
```

12) Then run:

```javascript
firebase init
```

13) Select __Hosting__

![Screen Shot 2019-12-12 at 11.26.00 AM](//images.ctfassets.net/zojzzdop0fzx/4U6NDz3JMNZdx1Sw6nIczn/95580efe2b8fae2bfef966e1dc1668a0/Screen_Shot_2019-12-12_at_11.26.00_AM.png)

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

![Screen Shot 2019-12-12 at 11.27.19 AM](//images.ctfassets.net/zojzzdop0fzx/1EnmZaGBsl6PJZ4zbUlATn/7ff035e71cc03a772bf3a6fcc3fab54f/Screen_Shot_2019-12-12_at_11.27.19_AM.png)

![Screen Shot 2019-12-12 at 11.27.26 AM](//images.ctfassets.net/zojzzdop0fzx/5yvHjzhrcHPdQVsjVCE27d/09abf32c8cd1011785a6b8f4e8a043c2/Screen_Shot_2019-12-12_at_11.27.26_AM.png)

15) 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](//images.ctfassets.net/zojzzdop0fzx/48A3cBCVt2utGZhkk4y8w6/45e897c9c780711231066592a33f22a1/Screen_Shot_2019-12-12_at_4.19.08_PM.png)

16) When asked to configured as a web app, enter __Y__
![Screen Shot 2019-12-12 at 11.27.45 AM](//images.ctfassets.net/zojzzdop0fzx/5PBQJI8ZL1xz7KBVqQ7OLm/cd3de16132786893685b63f22931951d/Screen_Shot_2019-12-12_at_11.27.45_AM.png)

17) When asked about overwriting the index.html type __N__

![Screen Shot 2019-12-12 at 11.31.18 AM](//images.ctfassets.net/zojzzdop0fzx/5OrTAImzuOBzj26ksAlCTq/79bd1068c7b0524e7163017492a4e15a/Screen_Shot_2019-12-12_at_11.31.18_AM.png)

## App Deployment

18) run the following command:

```javascript
firebase deploy
```

After a successfull deployment, you should see something like this:
![Screen Shot 2019-12-12 at 11.28.32 AM](//images.ctfassets.net/zojzzdop0fzx/3Xm6PWadvUta3z9lgzJ7cx/77845de857669cd6101f00394b47f822/Screen_Shot_2019-12-12_at_11.28.32_AM.png)

Now, clicking on __Hosting URL__, should open the web app you just deployed.

19) 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](//images.ctfassets.net/zojzzdop0fzx/1r1BDvQrCfKscVsfJVm0Z0/d2cb2cc0bf6c9a7e4a998576dfe1f486/Screen_Shot_2019-12-12_at_4.28.42_PM.png)