How should I deploy my remix app to Firebase hosting?

[beumsk]

Hi,
I'm looking to deploy a remix app on to Firebase hosting.

I've been nowhere after several hours of trying and searching in the doc and on the internet so I reach out to you.
All I got is deploying an empty, default firebase site because it does not seem to take my built remix app into account.

I did follow firebase init, remix build, firebase deploy and the likes.
I think firebase needs a build output starting from index.html but I didn't manage to do that with remix build.

For the record, here are the useful files (i guess):
firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ['**/.*'],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  serverModuleFormat: 'cjs',
  future: {
    v2_dev: true,
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
};

Thanks already

[dmitriifrlv]

@beumsk Have you managed to successfully deploy the Remix application to Firebase hosting?

[fahadahmed]

Deploying a Remix app via firebase deploy —only hosting would be highly appreciated. Currently the NextJS app is able to use the functionality by bundling the serverless function with the build folder before being deployed to Firebase hosting. @ryanflorence - would really like this support. I can give it a shot if I can get some direction.

[Holarmc]

@beumsk Have you been able to deploy this? I am currently having the same issues I Came here to ask the same only to see it has been asked.

[fappaz]

Has anybody figure out how to do this? Writing a custom server to deploy to Firebase Functions is the only way I know.

[sergiodxa]

You can use Remix SPA Mode if you're ok with not having a server (only use clientLoader/clientAction), if you want to SSR your app you need a server, in that case you will need to use Firebase Functions to run the server-side part of your app.

[fappaz]

You can use Remix SPA Mode if you're ok with not having a server (only use clientLoader/clientAction), if you want to SSR your app you need a server, in that case you will need to use Firebase Functions to run the server-side part of your app.

@sergiodxa Thanks for the quick reply. I did try that, but came across 2 issues:

• I was trying to migrate a JS project, but clientLoader and clientAction only work with Typescript because you must import type { ClientLoaderFunctionArgs, ClientActionFunctionArgs }
• The app is hydrating the full document instead the sub sections, even after following the official instructions on how to avoid that.

I also have read your article and agree that in this case I might as well use Vite + React Router instead of Remix in SPA mode.

Is there any official recommendation on how to get a Remix app deployed to Firebase? I found articles from 1-2 years ago, but some are not even using the loader and action functions so I'm assuming they're obsolete, or at least not compatible with Remix v2.

[sergiodxa]

You doing need to import those types to use clientLoader and clientAction, just export the functions

If you create a replication I could check it, most likely JS didn't loaded client side

And I don't know of anyone using Remix with Firebase hosting.

[fappaz]

You doing need to import those types to use clientLoader and clientAction, just export the functions

I believe I tried this at some point but got errors when tried to build the app. Will give it a shot someday though, but would be cool if the official docs were clearer about this to avoid confusion.

If you create a replication I could check it, most likely JS didn't loaded client side

I ended up using React Router instead, but thanks for offering though.

And I don't know of anyone using Remix with Firebase hosting.

Yeah it seems that they're just not compatible at the moment, unfortunately.

[gustavopch]

Yeah it seems that they're just not compatible at the moment, unfortunately.

You can use Remix with Firebase Hosting + Firebase Functions, except response streaming won't really stream: #6834 (comment).

[fahadahmed]

Can someone share how the latest Remix Express server can be deployed to Firebase Functions? I am struggling to make it work for a Remix app built with vite and express server.

[sergiodxa]

Can you run Express on Firebase? If you can it should be essentially the same, if you can't then you won't be able to do it with Remix Express.

[gustavopch]

This is using Firebase Functions + Firebase Hosting + Remix + Vite.

Note that Firebase Hosting caches all responses, so response streaming won't really be streamed, but buffered and sent as a whole when it's ready. Firebase's new App Hosting product is supposed to work with streaming, but I've since migrated from Firebase and haven't experimented with it.

Bonus: this shows the easiest way to use TypeScript in Firebase Functions as they currently don't support it natively.

P.S.: the imports use .js to import TypeScript because I use moduleResolution: 'nodenext'.

// File: firebase.json
// =============================================================================
{
  "functions": {
    "runtime": "nodejs18",
    "source": "."
  },
  "hosting": {
    "public": "./build/client",
    "rewrites": [
      {
        "source": "**",
        "function": {
          "functionId": "ssr",
          "pinTag": true
        }
      }
    ]
  }
}

// File: server.ts
// =============================================================================
// ...
export const app = express()
// ...

// Only start the server if running this file directly. If running via Firebase,
// it will use the exported Express instance in its own server.
if (process.argv[1] === import.meta.url.replace('file://', '')) {
  app.listen(port, () => {
    console.log(`Listening at port ${port}`)
  })
}

// File: functions/index.js
// =============================================================================
import { register } from 'tsx/esm/api'

register()

initializeApp(
  process.env.FIREBASE_SERVICE_ACCOUNT
    ? {
        credential: cert(JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT)),
      }
    : undefined,
)

export const { ssr } = await import('./functions.js')

// File: functions/functions.ts
// =============================================================================
import { onRequest } from 'firebase-functions/v2/https'

// Firebase Emulator loads this module twice: first simply for discovery, then
// to actually handle requests. In the second case, we need to load the server
// module because it will tell Remix the server is ready. In the first case
// though, we shouldn't load the server module because the required environment
// variables are not loaded and it would crash.
//
// IMPORTANT: after HMR, Firebase will kill the worker that runs this module
// and only restart it when a new request arrives, rendering HMR useless as such
// request won't happen. As a workaround, we need to pass '--inspect-functions'
// to `firebase emulators:start` which changes the behavior so the worker is
// forcefully restarted when the code is changed.
const server = process.env.FUNCTIONS_CONTROL_API
  ? null
  : await import('../server.js')

export const ssr = onRequest(
  { memory: '2GiB', timeoutSeconds: 540 },
  (request, response) => {
    server.app(request, response)
  },
)