DEV Community

Cover image for How to deploy your frontend APP on firebase hosting.
EHO
EHO

Posted on

How to deploy your frontend APP on firebase hosting.

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) 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
      }
    ]
  }
}

Enter fullscreen mode Exit fullscreen mode

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

Deploy Your App:

Before deployment, build the project with:

npm run build
Enter fullscreen mode Exit fullscreen mode

Then deploy to firbase

firebase deploy
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
arnon profile image
Arnon Rodrigues

Great article!

Collapse
 
reussiteforever profile image
reussite

Thank you Hermann for this great article.