Migrate Remix to use Vite

frameworks/remix-run/application/package.json

@@ -4,10 +4,11 @@
     "description": "Crystallize Furniture v2 Remix Boilerplate",
     "license": "MIT",
     "sideEffects": false,
+    "type": "module",
     "scripts": {
         "build": "npm run build:css && remix build",
         "build:css": "tailwindcss -c tailwind.config.js -m -i ./src/styles/index.css -o ./src/styles/tailwind.css",
-        "dev": "remix dev",
+        "dev": "remix vite:dev",
         "dev:css": "tailwindcss -c tailwind.config.js -w -i ./src/styles/index.css -o ./src/styles/tailwind.css",
         "start": "remix-serve ./build/index.js",
         "test": "playwright test",
@@ -62,7 +63,9 @@
         "concurrently": "^7.6",
         "postcss": "^8.4.20",
         "tailwindcss": "^3.4.1",
-        "typescript": "^5.3.3"
+        "typescript": "^5.3.3",
+        "vite": "^5.4.0",
+        "vite-tsconfig-paths": "^5.0.1"
     },
     "overrides": {
         "@react-pdf/renderer": {

frameworks/remix-run/application/postcss.config.js

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

frameworks/remix-run/application/tailwind.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     mode: 'jit',
     content: ['./src/**/*.{ts,tsx,jsx,js}'],
     theme: {

frameworks/remix-run/application/vite.config.ts

@@ -0,0 +1,19 @@
+import {vitePlugin as remix} from "@remix-run/dev";
+import {defineConfig} from "vite";
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+
+export default defineConfig({
+    server: {
+        port: process.env.REMIX_APP_PORT || 3000
+    },
+    resolve: {
+        preserveSymlinks: true
+    },
+    plugins: [remix({
+        appDirectory: "src",
+        serverModuleFormat: "esm"
+    }),
+        tsconfigPaths()
+    ],
+});

shared/application/ui/components/search/search-bar.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import SearchIcon from '~/assets/searchIcon.svg';
-import { DebounceInput } from 'react-debounce-input';
+import pkg from 'react-debounce-input';
+const {DebounceInput} = pkg;
 import Link from '~/bridge/ui/Link';
 import { Image } from '@crystallize/reactjs-components';
 import { useAppContext } from '../../app-context/provider';

shared/application/use-cases/storage.server.ts

@@ -1,13 +1,15 @@
 import * as redis from 'redis';
 import { BackendStorage, StorageOptions } from './contracts/BackendStorage';
+import { config } from 'platformsh-config';
+
 
 function createRedisStorageEngine(dsn: string | undefined, options: StorageOptions = {}): BackendStorage {
     const prefix = options?.prefix ?? '';
     let redisDSN = `${dsn || 'redis://127.0.0.1:6379'}`;
-    const config = require('platformsh-config').config();
-    if (config.isValidPlatform()) {
-        const credentials = config.credentials('redis');
-        redisDSN = `redis://${credentials.host}:${credentials.port}`;
+    const platformConfig = config();
+    if (platformConfig.isValidPlatform()) {
+        const credentials = platformConfig.credentials('redis');
+        const redisDSN = `redis://${credentials.host}:${credentials.port}`;
     }
     const client = redis.createClient({ url: redisDSN });
     client.connect();