Apphosting test page

Hello!

I have a question about how do you guys handle the updates you make on your website. Currently every change I make I publish to the website right away. But I want to move away from that and push my updates to a test page first.

I want to test the new updates first to make sure I don’t break anything else since I already have around 15 people using it and adding more 40 people in a few weeks. And 100s more in a few months. ( It’s a website I made for the company I work for and is gaining steam)

How do you guys handle that can I have some suggestions?

Thanks!

Hello! This is a fantastic question, and it’s the perfect next step for a growing app. :rocket:

Moving from “publish right away” to a “test page” is a professional workflow, and it’s exactly what you should be doing as your user base grows. You’re looking for what we call a “staging” or “preview” environment.

Firebase App Hosting is built specifically for this exact workflow, and the recommended way to handle it is by integrating with GitHub.

This will change your workflow from a single, risky “publish” button to a safe, professional process.


The Recommended Solution: GitHub Integration

This is the standard for production apps. You connect your GitHub repository to App Hosting, and it will automatically create a test page for you every time you want to make a change.

Here’s how to set it up:

  1. Go to your Firebase Console (console.firebase.google.com).

  2. Go to the App Hosting dashboard.

  3. You should see an option to connect your GitHub repository. Follow the steps to link your project.

  4. Firebase will automatically set up a GitHub Action in your repo.


Your New, Safer Workflow :partying_face:

Once this is set up, your development process will look like this:

  1. Make Changes: Instead of working on your main code, you create a “branch” in Git (e.g., update-user-profile-page). You make all your changes on this new branch.

  2. Open a Pull Request (PR): When you’re ready to test, you open a Pull Request (PR) in GitHub to merge your update-user-profile-page branch into your main branch.

  3. Automatic “Test Page” (Preview): As soon as you open the PR, the Firebase App Hosting GitHub Action kicks in. It automatically:

    • Builds your entire app (frontend and backend).

    • Deploys it to a new, temporary, shareable URL.

  4. Test: App Hosting will post this new URL (e.g., my-app--pr123-abcdef.web.app) as a comment right inside your Pull Request. You and your team can click this link and test your changes on a live site that isn’t your production one.

  5. Go Live: If everything looks good and nothing is broken, you simply click the “Merge” button on the Pull Request in GitHub.

  6. App Hosting sees the merge and then automatically builds and deploys this approved code to your live production website.

This flow is the best of both worlds. You get a perfect test page for every single change, and your live site only updates when you’re 100% ready. This is how you can scale to hundreds of users without the stress of breaking things. :+1:

Hello! Thanks for the reply!

I was able to publish the test page. I had to add the secrets to the apphosting.yaml and grant the necessary permissions to each secret using this “firebase apphosting:secrets:grantaccess TWILIO_ACCOUNT_SID --backend test”

Now I just need to learn how to use branches.

Thanks!