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
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:
You need to build your server app into a single file, here's how you can do that
You need to add a function to your remix app. Use firebase CLI for this, firebase init, chose "cloud function", follow the steps.
Your "static" firebase-hosting app will need "rewrites" to redirect all requests to cloud function backend.
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
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
with:
args: deploy # you need to pass SOME command to firebase cli
env:
GCP_SA_KEY: ${{ secrets.SA_KEY }}
PROJECT_ID: ${{ secrets.YOUR_PROJECT_ID }}
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 ;)