Deploy Ionic Apps on Firebase Hosting: A Step-by-Step Guide

If you’ve just finished building an app using Ionic and Capacitor, you might be wondering: What’s the best way to host it for the world to see? The answer is Firebase Hosting. With its simplicity, blazing-fast content delivery, and built-in security features, Firebase is an ideal choice for deploying modern web and mobile apps. In this guide, I’ll take you step-by-step through the process of deploying your Ionic/Capacitor app to Firebase Hosting—even if it’s your first time!

My Ionic/Capacitor app folder structure

Before starting go to the firebase website: https://firebase.google.com/

Click on “Get started” we need to create a project first

Click on “Create a project”

Give the project a name (i have already made a project with the name “Mindfulnesspad”)

for now we are done here, get back to your code

We start by installing global firebase CLI tools

npm install -g firebase-tools

Go to the project folder and build the app as a production application, (i’m using VueJS) so if you use another framework it can differ.

npm run build

Init Firebase hosting in the root of your project

firebase init hosting

If everything went fine you will be greeted by this console window

Type Y and enter, the default app folder is public, i working with Ionic/Capacitor and VueJS so i chose the dist folder (as there is the prod version i build). You are not bound to this folder but for convenience i chose so, you can change this in the “capacitor.config.ts” file

As told before, i chose the dist folder. You need to set up firebase and answer some questions with “y” or “n”

Here i chose “dist” folder as this is the prod folder of my VueJS/Ionic app, we want to rewrite all urls to /index.html (as a single page app). you can chose to either setup automatic build for Github (i did not), dont let the index file be overwritten! select n and hit enter

now the best part, deploying the web app!