A few assumptions before we begin:
- A repository on GitHub with a website ready to host (In my case, a fresh Angular App “ng new”)
- A Firebase account
- The latest Firebase cli installed and ready to go
First up, head over to Firebase and create your new Project. Just follow the basic steps, add your project name, enable analytics if you want to.
Now let’s hop into our command window and setup the Firebase and GitHub stuff.
- Get a command window open in your project directory.
- Type the following command.
firebase init hosting:github
This will walk you through the process from start to finish
Follow the steps in the console, use the existing Firebase project you made earlier.
When prompted for the GitHub repository, type in the following “Username/Repository”, or in my case
- You’ll also be asked to input the build directory of your site, and your build command, in my case “npm run build”
You’ll have seen in the output that this has created a service account in your Firebase project with permission to deploy Firebase Hosting. Also that service account’s JSON key has been uploaded to the GitHub repository as a GitHub Secret.
In your files you’ll notice a folder called “.github” with a couple of YAML files in the workflows folder. If you take a look at these you will see how they reference the newly created secret and configure the GitHub Action to deploy Firebase Hosting.
It doesn’t really matter if you do this on a new branch or not, but you probably should. Navigate to your repository and click the Actions tab. You will see your action executing and building the project.
Notice step 4 deploys to FireBase, if you check out your new project in Firebase Console you will see a freshly deployed and hosted app.
This now updates your live FireBase hosted website with every merge into your main branch, and every PR in this GitHub repo will get its own preview URL!