How to deploy a remix app to GCP firebase hosting (via firebase CLI and github actions)

My new job in recup.de has been a total blast so far, thanks for asking.

Our frontend is written in Remix and I love it!. I've been deploying the application to firebase and haven't found a whole lot of documentation about how one would do it. Here's a repository that illustrates what we ended up doing: https://github.com/colossal-squid/remix-firebase-deploy-demo

Short TLDR; explanation of all the gotchas

At the moment of writing this, there's support for Angular, Next.js, Flutter and Express. First thing I've attempted was following Integrate other frameworks with Express.js guide and using Express server adapter.

You CAN do it like that, but if you scroll adapters page a bit more you'll find remix-google-cloud-functions which we ended up using.

In a nutshell we will invoke our remix server from a cloud function. For that:

  1. You need to build your server app into a single file, here's how you can do that

  2. You need to add a function to your remix app. Use firebase CLI for this, firebase init, chose "cloud function", follow the steps.

  3. Your "static" firebase-hosting app will need "rewrites" to redirect all requests to cloud function backend.

  4. Once you can run firebase deploy in the root of your project, and the goddamn thing actually deploys - you'll need to Allow public (unauthenticated) invocations to your cloud function

Four easy steps. Perhaps look through this commit in case something is missing - you can do it.

Also here's an old repo where I've used express adapter: https://github.com/colossal-squid/remix-app-test

Deploying via GH actions

One stupid problem I had with deploying to GH actions was using a wrong workflow. See, if you google "deploy to firebase github action" you'll get bunch of links to FirebaseExtended/action-hosting-deploy which is a killer action, except one little problem. It deploys with --hosting flag by default, i.e. only deploys your static assets, not your lambda, lol.

Instead, I've ended up using this action to deploy

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
          args: deploy # you need to pass SOME command to firebase cli
          GCP_SA_KEY: ${{ secrets.SA_KEY }}
          PROJECT_ID: ${{ secrets.YOUR_PROJECT_ID }}

Other gaps in documentation and tutorials I've encountered

In the last few weeks I had many questions without easy obvious answers. Easy one that comes to my mind was "How to implement user-tracking in a remix app" - Solved it using partytown framework, calling our Piwik PRO dataLayer.push~es right from react click handlers.

Remix is cool, GCP is cool, me and you are cool. If my blabbering helped you - you're welcome, and enjoy your day ;)

29-05-2023, work i guess