Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
remix-express-vite-plugin
Advanced tools
This package includes a Vite plugin to use in your Remix app. It configures an Express server for both development and production using TypeScript.
This package includes a Vite plugin to use in your Remix app. It configures an Express server for both development and production.
Install the following npm package
npm install -D remix-express-vite-plugin
Add the Vite plugin and preset to your vite.config.ts file
import { expressDevServer, expressPreset } from 'remix-express-vite-plugin/vite'
import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
server: {
port: 3000, // define dev server port here to override default port 5173
},
plugins: [
expressDevServer(), // add expressDevServer plugin
remix({
presets: [expressPreset()], // add expressPreset for server build support
}),
tsconfigPaths(),
],
})
The expressDevServer
plugin also accepts options:
export type DevServerOptions = {
entry?: string // Express app entry: default = './server/index.ts'
ignoreWatching?: (string | RegExp)[] // List of paths to ignore for change:
// default = []
}
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 expressPreset
will build your express server file into ./build/server/index.js
To run your production build, call node ./build/server/index.js
{
"scripts": {
"dev": "vite",
"build": "remix vite:build",
"start": "node ./build/server/index.js"
}
}
You can now use a TypeScript file for your Express server. The default entry is server/index.ts
Export the created Express app as the default
export. A helper function named
createExpressApp
will automatically set up the Remix request handler.
export type CreateExpressAppArgs = {
configure?: (app: Application) => void // add additional middleware to app
getLoadContext?: GetLoadContextFunction // setup remix context
}
You can add additional Express middleware with the configure
function.
If you want to set up the Remix AppLoadContext
, pass in a function to getLoadContext
.
Modify the AppLoadContext
interface used in your app.
// server/index.ts
import { createExpressApp } from 'remix-express-vite-plugin/express'
import compression from 'compression'
import morgan from 'morgan'
// update the AppLoadContext interface used in your app
declare module '@remix-run/node' {
interface AppLoadContext {
hello: () => string
}
}
export default createExpressApp({
configure: app => {
// setup additional express middleware here
app.use(compression())
app.disable('x-powered-by')
app.use(morgan('tiny'))
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
getLoadContext: async (req, res) => {
// custom load context should match the AppLoadContext interface defined above
return { hello: () => 'Hello, World!' }
},
})
// routes/test.tsx
export async function loader({ context }: LoaderFunctionArgs) {
// get the context provided from `getLoadContext`
return json({ message: context.hello() })
}
FAQs
This package includes a Vite plugin to use in your Remix app. It configures an Express server for both development and production using TypeScript.
We found that remix-express-vite-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.