https://github.com/alessandrojcm/remix-nitro

An example on how to run Remix with Nitro with HMR using Vite's 5.1 experimental runtime API.
https://github.com/alessandrojcm/remix-nitro

Last synced: about 1 month ago
JSON representation

An example on how to run Remix with Nitro with HMR using Vite's 5.1 experimental runtime API.

• Host: GitHub
• URL: https://github.com/alessandrojcm/remix-nitro
• Owner: alessandrojcm
• Created: 2024-03-08T12:09:17.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-03-26T16:10:21.000Z (8 months ago)
• Last Synced: 2024-05-21T04:16:31.468Z (6 months ago)
• Language: TypeScript
• Size: 397 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Remix + Nitro

This is an example of using Remix (with the Vite Plugin) + Remix using Vite's [experimental](https://vitejs.dev/guide/api-vite-runtime.html#vite-runtime-api)

runtime API. It is based on the [Vite Miniflare](https://github.com/hi-ogawa/vite-plugins/blob/main/packages/vite-node-miniflare), modified,

so it runs in node instead of Miniflare and wiring it up with Nitro. To execute, run `node ./dev.js`.

Caveats: since the worker (which is run by Vite) and Nitro run independently to one another, the Nitro's runtime

config is not available within the Remix handler. We work around this in dev by exposing a GET endpoint as a `devHandler`

and calling said endpoint in the Remix worker entry. This is obviously not safe because the Nitro runtime could contain

sensitive information, but it is only for dev, so it is probably ok.

The plugin enables to use `useRuntimeConfig` from Nitro if imported from the virtual `#imports`. I.e:

```typescript

import {useRuntimeConfig} from "#imports";

const runtime = useRuntimeConfig()

```

# Caveats

## Context sharing

This example uses `unctx` to share the event context and the Nitro runtime configuration, so it is available in the 

Vite worker entry. This is a bit experimental, but it works, and it is only for the development server.

## Nitro middleware do not work in dev mode

In order to enable hot reload for the dev server, Nitro internally creates an H3 app for the dev server and then creates

a separate worker to run the Rollup watcher, it does this to be able to re-build the source code as needed without having to re-start

the dev server and to handle the worker's exceptions gracefully, to server the request from the `routes`, `api`, `middleware`, etc

Nitro proxies requests from the dev server to the worker. `devHandlers`, on the other hand, are added programmatically and

are not part of the build process, so Nitro adds them internally to the dev server app and **not** to the worker, so if

the `devHandler` returns a response (which is the case for our Vite middleware) then the request does not hit the proxy

and middleware do not run. This would not happen in production but if you are relying on middleware to modify your

event context to pass it to Remix, then you would need to find a workaround for the dev server.