Skip to content

Statista Remix Stack v1.0.0

This release documents a lot of changes to move the older releases to a stable remix version which builds with vite as well as is optimized for production usage and ease of maintenance.

Highlights

  • Use the dev-server provided by remix-tools
  • Build the application using vite and the remix-vite plugin
  • Allow to deploy to AWS Lambda or AWS ECS by just a few lines of code
  • Optimized for minimal production builds

Migration Path

Update the dev-server

  1. Remove the server.cts file from your project
  2. Replace the start command in your package.json with remix-tools dev-server
  3. Remove the server.cts entry from the wireit configuration in your package.json
  4. Remove hono, @hono/node-server, chokidar, globby and @pit-shared/lambda-server from your dependencies

Use the vite build system

[!IMPORTANT]
This assumes the update to the remix-tools dev-server was done before

  1. In the app/root.tsx update the css import to import stylesheet from "./tailwind.css?url";
  2. In the app/root.tsx remove the <LiveReload /> component and import
  3. In the package.json update the dev script to cross-env APP_API_ENDPOINT='' pnpm run dev:internal --watch
  4. In the package.json remove the dev:mocks script
  5. In the package.json update the start script to remix-tools dev-server
  6. Run pnpm add -D vite autoprefixer in your terminal
  7. In the package.json update the build command of wireit to remix vite:build
  8. In the package.json update the dev:internal command of wireit to pnpm remix-tools dev-server
  9. In the package.json update the dev:internal files of wireit to include vite.config.ts
  10. In the playwright.config.ts update the webServer command to pnpm run build && pnpm start

  11. Add the file postcss.config.js to the root of the repo and paste the following content into it:

    export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

  12. In the remix.env.d.ts file change @remix-run/dev to vite/client

  13. In the remix.env.d.ts add this code to the file:

    declare module "*?url" {
  const content: string;
  export default content;
}

  14. In tests/e2e/smoke.test.ts add [debug] [vite] connecting... and [debug] [vite] connected. to the allowedMessages

  15. Add the file vite.config.ts to the root of the repo and paste the following content into it:

    import { vitePlugin as remix } from "@remix-run/dev";
import { flatRoutes } from "remix-flat-routes";
import { defineConfig } from "vite";

import { basePath } from "./remix.config.mjs";

export default defineConfig({
  base: `${basePath}/`,
  plugins: [
    remix({
      ignoredRouteFiles: ["**/*"],
      routes: async (defineRoutes) => {
        return flatRoutes("routes", defineRoutes, {
          basePath,
          ignoredRouteFiles: [".*", "**/*.test.{ts,tsx}", "**/__*.*"],
        });
      },
      serverModuleFormat: "esm",
    }),
  ],
});

[!NOTE]
If your project uses a specific typescript paths setup, you have to add the respective vite plugin: vite-tsconfig-paths

Last updated: March 24, 2026 at 16:43
By: Maikel Lammers