How to host SPA with Firebase hosting?

 

Step 1: Prerequisites

Before starting, ensure you have the following:

• Node.js and npm installed.
• A Firebase account.
• Your Single Page Application (SPA) ready to be deployed.
• Firebase CLI installed.

If you haven't installed Firebase CLI, you can do so using npm:

npm install -g firebase-tools

 

Step 2: Initialize Firebase in Your Project

Create a Firebase project through the Firebase Console if you haven't already. Once you have a project, initialize Firebase in your local project by opening a terminal and executing:

firebase login

Then, navigate to your project's root directory and run:

firebase init

You'll be prompted with several options:

• Select "Hosting: Configure and deploy Firebase Hosting sites."
• Choose your Firebase project you want to deploy.
• Set the public directory. This should point to your directory where the build output of your SPA resides. For instance, if you are using a framework like React or Angular, this might be build or dist.
• Decide whether or not to configure as a single-page app, say "Yes" to rewrite all URLs to /index.html.

 

Step 3: Build Your SPA

Before deploying, ensure your SPA is ready and built for production. Depending on the framework you used, this step may vary. For instance, with React:

Navigate to your project directory and run:

npm run build

This will create an optimized bundle in the build directory.

For Angular:

ng build --prod

This creates a build in the dist/project-name directory.

 

Step 4: Deploy to Firebase Hosting

Now that your SPA is built and Firebase is initialized, run the deploy command:

firebase deploy

Firebase CLI will take care of the rest. It uploads your files to Firebase Hosting and provides you with a deployment URL.

 

Step 5: View Your Deployed Application

After a successful deployment, you'll see a URL in the terminal output. Open this URL in your browser to view your hosted SPA.

 

Step 6: Manage Hosting via Firebase Console

You can manage your hosting and view more details about your deployments in the Firebase Console:

• Go to the Firebase Console.
• Select the project you have deployed.
• Click on "Hosting" to see your deployed site, manage versions, and set up custom domains if needed.

 

This completes the step-by-step guide to hosting a Single Page Application on Firebase Hosting. Make sure to verify everything is functioning correctly after deployment.