How to deploy your frontend APP on firebase hosting.
Tags: developer, website
Published: 2023-11-11 14:34:10

When you build your beatifull app you need to show it to your friends.

In the dynamic landscape of web development, showcasing your masterpiece to the world involves more than just crafting impeccable code—it requires a reliable and efficient hosting solution. Firebase Hosting emerges as a beacon in this realm, offering developers a seamless platform to deploy their frontend applications with ease. In this guide, we'll embark on a journey to demystify the process and explore the steps to deploy your frontend app on Firebase Hosting. Whether you're a seasoned developer or a coding enthusiast, buckle up as we unravel the secrets to unleashing your web creation upon the digital stage.

## What is Firebase hosting

Firebase Hosting is like the VIP lounge for your web applications—it provides a first-class ticket to the online world with its secure, fast, and globally distributed hosting service. Developed by Google as part of the Firebase suite, Hosting allows you to deploy your web content effortlessly, turning your code into a polished and accessible experience for users worldwide.

At its core, Firebase Hosting simplifies the deployment process, sparing developers from the complexities of server management. Instead of grappling with server configurations and infrastructure intricacies, you can focus on perfecting your frontend code. The hosting service leverages a Content Delivery Network (CDN) to ensure that your application is delivered swiftly to users, irrespective of their geographical location.

In essence, Firebase Hosting is your backstage pass to a hassle-free deployment experience, allowing you to shine on the digital stage without breaking a sweat.

How to deploy on it ?

### Init the project

- Clone this repo
`git clone https://github.com/hermannleboss/vue-typescript.git`
This is a VueJs Project 
To run it in local : `npm run dev`
For build: `npm run build`
Build create files inside `/dist` folder.

- Create A Firebase Project
  * Install firebase CLI with npm 
  `npm install -g firebase-tools`
  * Connect to firebase
  `firebase login`
  * Init the firebase hosting
  `firebase init hosting` 

```shell
Before we get started, keep in mind:

  * You are currently outside your home directory
  * You are initializing within an existing Firebase project directory

? Are you ready to proceed? (Y/n) 
```

Create a new project if you don’t have an existing one, or select your project.

```shell
? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project
```

Type you build directory : here `dist`

```shell
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? No
```

Now you will have two files

firebase.json and .firebaserc that contain firebase config 

```json
//firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

```

You can edit the firebase.json file to do the same thing as the CMD. 

#### Deploy Your App:

Before deployment, build the project with:
```shell
npm run build
```

Then deploy to firbase 

```shell
firebase deploy
```

ou'll receive a Hosting URL to view your freshly deployed website.

Now, your frontend marvel is live on Firebase Hosting, ready to dazzle audiences worldwide! Keep refining your craft, and happy coding!