How to deploy your frontend APP on firebase hosting.

Whenever you construct your beatifull app you have to present it to your folks.

Within the dynamic panorama of net improvement, showcasing your masterpiece to the world includes extra than simply crafting impeccable code—it requires a dependable and environment friendly internet hosting answer. Firebase Internet hosting emerges as a beacon on this realm, providing builders a seamless platform to deploy their frontend purposes with ease. On this information, we’ll embark on a journey to demystify the method and discover the steps to deploy your frontend app on Firebase Internet hosting. Whether or not you are a seasoned developer or a coding fanatic, buckle up as we unravel the secrets and techniques to unleashing your net creation upon the digital stage.

What’s Firebase internet hosting

Firebase Internet hosting is just like the VIP lounge on your net purposes—it gives a first-class ticket to the web world with its safe, quick, and globally distributed internet hosting service. Developed by Google as a part of the Firebase suite, Internet hosting lets you deploy your net content material effortlessly, turning your code into a sophisticated and accessible expertise for customers worldwide.

At its core, Firebase Internet hosting simplifies the deployment course of, sparing builders from the complexities of server administration. As an alternative of grappling with server configurations and infrastructure intricacies, you may concentrate on perfecting your frontend code. The internet hosting service leverages a Content material Supply Community (CDN) to make sure that your utility is delivered swiftly to customers, no matter their geographical location.

In essence, Firebase Internet hosting is your backstage go to a hassle-free deployment expertise, permitting you to shine on the digital stage with out breaking a sweat.

How one can deploy on it ?

Init the challenge

• Clone this repo
  git clone https://github.com/hermannleboss/vue-typescript.git
  This can be a VueJs Challenge
  To run it in native : npm run dev
  For construct: npm run construct
  Construct create recordsdata inside /dist folder.

• Create A Firebase Challenge

  • Set up firebase CLI with npm
    npm set up -g firebase-tools
  • Connect with firebase
    firebase login
  • Init the firebase internet hosting
    firebase init internet hosting

Earlier than we get began, preserve in thoughts:

  * You're at present exterior your house listing
  * You're initializing inside an present Firebase challenge listing

? Are you able to proceed? (Y/n) 

Create a brand new challenge in case you don’t have an present one, or choose your challenge.

? Please choose an choice: (Use arrow keys)
> Use an present challenge
  Create a brand new challenge
  Add Firebase to an present Google Cloud Platform challenge
  Don't arrange a default challenge

Sort you construct listing : right here dist

? What do you wish to use as your public listing? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Sure
? Arrange automated builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? No

Now you’ll have two recordsdata

firebase.json and .firebaserc that include firebase config

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

You possibly can edit the firebase.json file to do the identical factor because the CMD.

Deploy Your App:

Earlier than deployment, construct the challenge with:

npm run construct

Then deploy to firbase

firebase deploy

ou’ll obtain a Internet hosting URL to view your freshly deployed web site.

Now, your frontend marvel is reside on Firebase Internet hosting, able to dazzle audiences worldwide! Hold refining your craft, and comfortable coding!