Adds Vite to the Indie Stack

.eslintrc.js → .eslintrc.cjs

@@ -127,7 +127,7 @@ module.exports = {
 
     // Node
     {
-      files: [".eslintrc.js", "mocks/**/*.js"],
+      files: [".eslintrc.cjs", "mocks/**/*.js"],
       env: {
         node: true,
       },

Dockerfile

@@ -52,8 +52,8 @@ WORKDIR /myapp
 COPY --from=production-deps /myapp/node_modules /myapp/node_modules
 COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma
 
-COPY --from=build /myapp/build /myapp/build
-COPY --from=build /myapp/public /myapp/public
+COPY --from=build /myapp/build/server /myapp/build/server
+COPY --from=build /myapp/build/client /myapp/build/client
 COPY --from=build /myapp/package.json /myapp/package.json
 COPY --from=build /myapp/start.sh /myapp/start.sh
 COPY --from=build /myapp/prisma /myapp/prisma

README.md

@@ -176,7 +176,7 @@ This project uses TypeScript. It's recommended to get TypeScript set up for your
 
 ### Linting
 
-This project uses ESLint for linting. That is configured in `.eslintrc.js`.
+This project uses ESLint for linting. That is configured in `.eslintrc.cjs`.
 
 ### Formatting
 

app/root.tsx

@@ -1,22 +1,15 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
 
 import { getUser } from "~/session.server";
-import stylesheet from "~/tailwind.css";
-
-export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: stylesheet },
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-];
+import "~/tailwind.css";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   return json({ user: await getUser(request) });
@@ -35,7 +28,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

cypress/support/commands.ts

@@ -50,7 +50,7 @@ function login({
 } = {}) {
   cy.then(() => ({ email })).as("user");
   cy.exec(
-    `npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts "${email}"`,
+    `npx vite-node ./cypress/support/create-user.ts "${email}"`,
   ).then(({ stdout }) => {
     const cookieValue = stdout
       .replace(/.*<cookie>(?<cookieValue>.*)<\/cookie>.*/s, "$<cookieValue>")
@@ -76,7 +76,7 @@ function cleanupUser({ email }: { email?: string } = {}) {
 
 function deleteUserByEmail(email: string) {
   cy.exec(
-    `npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts "${email}"`,
+    `npx vite-node ./cypress/support/delete-user.ts "${email}"`,
   );
   cy.clearCookie("__session");
 }

cypress/support/create-user.ts

@@ -1,6 +1,6 @@
 // Use this to create a new user and login with that user
 // Simply call this with:
-// npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts [email protected],
+// npx vite-node ./cypress/support/create-user.ts [email protected],
 // and it will log out the cookie value you can use to interact with the server
 // as that new user.
 

cypress/support/delete-user.ts

@@ -1,6 +1,6 @@
 // Use this to delete a user by their email
 // Simply call this with:
-// npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts [email protected],
+// npx vite-node ./cypress/support/delete-user.ts [email protected],
 // and that user will get deleted
 
 import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";

remix.env.d.ts → env.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@remix-run/node" />

mocks/index.js

@@ -1,5 +1,5 @@
-const { http, passthrough } = require("msw");
-const { setupServer } = require("msw/node");
+import { http, passthrough } from "msw";
+import { setupServer } from "msw/node";
 
 // put one-off handlers that don't really need an entire file to themselves here
 const miscHandlers = [

package.json

@@ -2,16 +2,16 @@
   "name": "indie-stack-template",
   "private": true,
   "sideEffects": false,
+  "type": "module",
   "scripts": {
-    "build": "remix build",
-    "dev": "remix dev -c \"npm run dev:serve\"",
-    "dev:serve": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js",
+    "build": "remix vite:build",
+    "dev": "binode --import ./mocks/index.js -- vite:vite dev",
     "format": "prettier --write .",
     "format:repo": "npm run format && npm run lint -- --fix",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "setup": "prisma generate && prisma migrate deploy && prisma db seed",
-    "start": "remix-serve ./build/index.js",
-    "start:mocks": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js",
+    "start": "dotenv -e .env remix-serve ./build/server/index.js",
+    "start:mocks": "binode --import ./mocks/index.js -- @remix-run/serve:remix-serve ./build/server/index.js",
     "test": "vitest",
     "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"",
     "pretest:e2e:run": "npm run build",
@@ -32,6 +32,7 @@
     "@remix-run/react": "*",
     "@remix-run/serve": "*",
     "bcryptjs": "^2.4.3",
+    "dotenv-cli": "^7.3.0",
     "isbot": "^4.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -79,17 +80,17 @@
     "prisma": "^5.14.0",
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.4.3",
-    "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.12",
+    "vite-node": "^1.6.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "prisma": {
-    "seed": "ts-node -r tsconfig-paths/register prisma/seed.ts"
+    "seed": "vite-node prisma/seed.ts"
   }
 }

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

remix.init/index.js

@@ -10,8 +10,8 @@ const semver = require("semver");
 const cleanupCypressFiles = ({ fileEntries, packageManager }) =>
   fileEntries.flatMap(([filePath, content]) => {
     const newContent = content.replace(
-      new RegExp("npx ts-node", "g"),
-      packageManager.name === "bun" ? "bun" : `${packageManager.exec} ts-node`,
+      new RegExp("npx vite-node", "g"),
+      packageManager.name === "bun" ? "bun" : `${packageManager.exec} vite-node`,
     );
 
     return [fs.writeFile(filePath, newContent)];
@@ -87,13 +87,13 @@ const updatePackageJson = ({ APP_NAME, packageJson, packageManager }) => {
     name: APP_NAME,
     devDependencies:
       packageManager.name === "bun"
-        ? removeUnusedDependencies(devDependencies, ["ts-node"])
+        ? removeUnusedDependencies(devDependencies, ["vite-node"])
         : devDependencies,
     prisma: {
       ...prisma,
       seed:
         packageManager.name === "bun"
-          ? prismaSeed.replace("ts-node", "bun")
+          ? prismaSeed.replace("vite-node", "bun")
           : prismaSeed,
     },
     scripts,

tsconfig.json

@@ -1,16 +1,16 @@
 {
-  "exclude": ["./cypress", "./cypress.config.ts"],
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["./cypress", "cypress.config.ts"],
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx", "cypress.config.ts", "cypress/support/e2e.ts"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["vitest/globals"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "module": "CommonJS",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
-    "target": "ES2020",
+    "target": "ES2022",
     "strict": true,
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,

vite.config.ts

@@ -0,0 +1,20 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+import { vitePlugin as remix } from "@remix-run/dev";
+import { installGlobals } from "@remix-run/node";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+installGlobals();
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    remix({
+      ignoredRouteFiles: ["**/.*", "**/*.test.{ts,tsx}"],
+    }),
+    tsconfigPaths(),
+  ],
+});