Publish Ionic Web App to Firebase Hosting

Firebase hosting allows to host web apps, let’s see how can publish the Ionic app to Firebase hosting.

Following are the steps:

Generate production www web app folder from the Ionic app

Use following command in existing ionic project to generate production web app www folder.

ionic capacitor build browser --prod

This will generate a www folder, which we need to publish to the Firebase hosting.

Prepare Firebase Hosting project to publish the web app

Install Firebase CLI

Install Firebase CLI globally, if not already installed.

npm install -g firebase-tools

Login to Firebase, through Firebase CLI

Login to Firebase through firebase CLI, using following command. This will open a login screen in browser window. Login there.

firebase login

Create Firebase hosting project

Create new directory for firebase hosting project

mkdir hosting

Switch to directory

cd hosting

Initialize Firebase hosting project

Enter following to initialize firebase hosting project.

firebase init

Choose Yes, to initialize the Firebase project

Choose following hosting feature from listed options:

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

Next selected Use an existing project, because in my case I had an existing project.

Then select your project from the list.

Next question is

What do you want to use as your public directory? (public)

type www

Next Question

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Choose Y

Next question

Set up automatic builds and deploys with GitHub? No

Enter, and firebase initialization will complete.

In the hosting folder one www folder will be created.

Copy www folder to Firebase hosting project

In the hosting folder one www folder will be created.

Replace this folder with the www folder generated above from Ionic production web app build .

Publish the web app

Finally, enter following command to publish the web app.

firebase deploy

Web app will be published to firebase hosting and you will be presented with the published web app url.

Congrats! We successfully published web app from ionic project to the Firebase hosting.

Conclusion

In this post we learned how to publish an Ionic web project to Firebase hosting.

First we generated the www folder from the Ionic app. Then We created and prepared a new project for publishing to Firebase hosting. In the Firebase hosting project we copied the www folder from the Ionic app and then finally published to Firebase hosting using firebase deploy

Leave a comment