This package includes a Vite plugin to use in your Remix app. It imports the Express app you create in entry.server.tsx.
npm install remix-express-dev-serverThis 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 thecreateExpressApp help.
Install the following npm package:
``bash`
npm install -D remix-express-dev-server
Add the Vite plugin to your _vite.config.ts_ file. Also, configure
build.target='esnext' to support _top-level await_.
`ts
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(), // add expressDevServer plugin
remix(),
tsconfigPaths(),
],
})
`
The expressDevServer plugin also accepts options:
`ts`
export type DevServerOptions = {
entry?: string // Express app entry: default = 'virtual:remix/server-build'
entryName?: string // name of express app export: default = app
appDirectory?: string // path to remix app directory: default = ./app
vitePaths?: RegExp[] // array of path patterns to send to vite server: defeault = []
configureServer?: (server: http.Server) => void // allow additional configuration
// of Vite dev server (like setting up socket.io)
}
The scripts for dev and build have been simplified.
Update scripts in your _package.json_ file. For development, Vite will handlevite
starting express and calling Remix to build your app, so simply call .
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.
`json`
{
"scripts": {
"dev": "vite",
"build": "remix vite:build",
"start": "NODE_ENV=production node ./build/server/index.js"
}
}
You can wrap the Vite dev server with the socket.io server.
> NOTE: configureServer is only called for development. In production, use thecreateExpressApp({ createServer })
> function to initialize socket.io. You
> can import same init function in both places.
`ts
// vite.config.ts
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')
})
})
},
}),
// ...
],
})