npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

remix-express-vite-plugin

v0.1.1

Published

This package includes a Vite plugin to use in your Remix app. It configures an Express server for both development and production using TypeScript.

Downloads

7

Readme

remix-express-vite-plugin

This package includes a Vite plugin to use in your Remix app. It configures an Express server for both development and production.

Installation

Install the following npm package

npm install -D remix-express-vite-plugin

Configuration

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(),
  ],
})

Options

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 = []
}

Package.json

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"
  }
}

Express

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.

Options

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.

Example

// 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() })
}