remix-express-dev-server
This package is a Vite plugin that loads your Express app in development. It
expects the app to have been created in your entry.server.tsx file via the
createExpressApp
help.
Installation
Install the following npm package:
npm install -D remix-express-dev-server
Configuration
Add the Vite plugin to your vite.config.ts file. Also, configure
build.target='esnext'
to support top-level await.
import { expressDevServer } from 'remix-express-dev-server'
import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
build: {
target: 'esnext',
},
plugins: [
expressDevServer(),
remix(),
tsconfigPaths(),
],
})
Options
The expressDevServer
plugin also accepts options:
export type DevServerOptions = {
entry?: string
entryName?: string
appDirectory?: string
configureServer?: (server: http.Server) => void
}
Package.json
The scripts
for dev
and build
have been simplified.
Update scripts
in your package.json file. For development, Vite will handle
starting express and calling Remix to build your app, so simply call vite
.
For building, Remix will build your app and create the server and client bundles.
The server bundle is in ./build/server/index.js
To run your production build, call node ./build/server/index.js
Make sure to set NODE_ENV=production
, otherwise it will not create your server.
{
"scripts": {
"dev": "vite",
"build": "remix vite:build",
"start": "NODE_ENV=production node ./build/server/index.js"
}
}
Advanced configuration
Socket.io
You can wrap the Vite dev server with the socket.io server.
NOTE: configureServer
is only called for development. In production, use the
createExpressApp({ createServer })
function to initialize socket.io. You
can import same init function in both places.
export default defineConfig({
plugins: [
expressDevServer({
configureServer(server) {
const io = new Server(server)
io.on('upgrade', async (req, socket, head) => {
console.log(
`Attemping to upgrade connection at url ${
req.url
} with headers: ${JSON.stringify(req.headers)}`,
)
socket.on('error', err => {
console.error('Connection upgrade error:', err)
})
console.log(`Client connected, upgrading their connection...`)
})
io.on('connection', socket => {
console.log('Client connected')
socket.emit('server', 'hello from server')
socket.on('client', data => {
console.log('Client sent:', data)
socket.emit('server', data)
})
socket.on('disconnect', () => {
console.log('Client disconnected')
})
})
},
}),
],
})