How to deploy your frontend APP on firebase hosting.

#developer #website

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

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.

? 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

? 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

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