Deploying Astro on Firebase

Astro is a frontend framework, famous for its high lighthouse scores. Astro achieves this by extracting UI into smaller components and by replacing unused javascript with HTML. So, less Javascript results in faster loads and better time to interactive(TTI scores).

Firebase is a PAAS which provide a set of services which provides a variety of services including hosting. And the main point to note is that Firebase provides a free tier. So, you can start building your app and host it for free.

Github actions can also be configured if you are using Github for version control. Whenever you push to the main branch or merge a PR to the main branch, deployment to firebase is triggered automatically. Firebase setup includes Github action configurations as well.

Step 1: Create a Firebase project

Set up a firebase project where the Astro app will be deployed. If you need help setting up a firebase project, refer to this video on how to set up a project on Firebase

Step 2: Initialise Firebase on your machine

Run the following commands in your terminal at your project path. You can skip this step if you have already initialised firebase before.

Use the following command to install firebase. we are using the -g flag to install it globally. So that we wouldn’t need to install it again for a new project.

npm install -g firebase-tools

Use the following command to log in to firebase.

firebase login

Step 3: Setup Firebase for your Astro App

Run this command from your app’s root directory to start the Firebase setup process for your app.

firebase init

Select Hosting Service

Select hosting service from the list and optionally select “Set up Github Action deploys” if you would like to set up auto deployment using Github actions

Map to Project

Choose the “Use existing project option” to find the project you have created in step1 and select it, so that out Astro app is tied to that project

Hosting Setup

Choose the appropriate hosting configurations

• Choose dist as your public directory, since Astro’s build target is build unless you have configured the output directory to a different directory
• Configure if you want to use the app as a single page app. If yes, select yes.
• Choose if you want to set up Github actions for auto deployment

Github Action Setup

Provide the repository name in the format required to set up a workflow, this step requires you to log in to Github.

Once the set-up is complete, the following files should be created in your project, as well as files under .github folder if you opted to set up Github Actions

• firebase.json
• .firebaserc