By @akash_dathan
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