remix-vite

remix-vite helps you serve Remix apps locally using Vite.

Usage

The quickest way to get started is to just run npx remix-vite in your project's directory.

If you prefer, you can also install the package globally (you'll need at least Node LTS):

> npm install --global remix-vite

Once that's done, you can run this command inside your project's directory...

> remix-vite

Now you understand how the package works! 🎉

Custom Remix Server

If you want to use remix-vite with a custom remix server, you can do so by integrating your server with vite dev server.

Let's say you have a custom Express server and you want to use it with remix-vite. Here is how you can do it:

const express = require('express');
const { createRequestHandler } = require('@remix-run/express');
const { createRemixViteDevServer, getRemixViteBuild } = require('remix-vite');

const app = express();

// Create a remix-vite dev server.
createRemixViteDevServer().then((remixViteDevServer) => {
  // Use remix-vite dev server as middleware.
  app.use(remixViteDevServer.middlewares);

  app.all('*', async (req, res, next) => {
    purgeRequireCache();

    // Get the remix build generated by remix-vite.
    const remixBuild = await getRemixViteBuild(remixViteDevServer);

    // Create a remix express request handler.
    const requestHandler = createRequestHandler({ build: remixBuild });

    await requestHandler(req, res, next);
  });

  // Start the server.
  app.listen(3000, () => {
    console.log('Listening at http://localhost:3000');
  });
});

function purgeRequireCache() {
  // purge require cache on requests for "server side HMR" this won't let
  // you have in-memory objects between requests in development.
  for (const key in require.cache) {
    delete require.cache[key];
  }
}

Change default host and port

If you want to change the host and port just pass --host and --port flag to remix-vite. Default host is localhost and port is 3000

> remix-vite --port=4000

Issues

If you want a feature to be added, or wish to report a bug, please open an issue here.

Author

Mayke Freitas (@sudomf)