feature: Vite dev server integration (part 2) (#5342)

edisile · web-flow · commit fedf8ec40875 · 2025-09-04T16:53:52.000+02:00
* feature: Vite automatic entry point detection

* feature: use Vite's actual dev server

* feature: enable automatic Vite entry point detection

* fix: add templates to build-js step in Dockerfile

* fix: run cypress on dotrun in production mode

* fix: add all aliases for localhost to Vite CORS origin

* fix: Vite dev server listen on all hosts

* fix: update docs to mention dotrun port issue on macOS and Windows
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -65,7 +65,7 @@ jobs:
 
       - name: Run dotrun
         run: |
-          dotrun &
+          dotrun --env ENVIRONMENT="prod" serve &
           curl --head --fail --retry-delay 3 --retry 30 --retry-connrefused http://localhost:8004
       # END copy of the run-dotrun job
 
diff --git a/Dockerfile b/Dockerfile
@@ -29,9 +29,9 @@ RUN yarn run build-css
 FROM yarn-dependencies AS build-js
 ADD static/js static/js
 ADD vite.config.js .
-ADD vite.config.entry.js .
 ADD tsconfig.json .
 ADD babel.config.json .
+ADD templates .
 RUN yarn install
 RUN yarn run build-js
 
diff --git a/README.md b/README.md
@@ -34,6 +34,11 @@ dotrun
 
 Once the server has started, you can visit `http://127.0.0.1:8004` in your browser. You stop the server using `<ctrl>+c`.
 
+> If you're running dotrun on macOS or Windows, you will have to use a different command to launch dotrun with an additional argument in order to get JavaScript code working:
+```bash
+dotrun -p 5004:5004
+```
+
 For more detailed local development instructions, see [HACKING.md](HACKING.md).
 
 ## Brand stores
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "start": "yarn run build && concurrently --raw 'yarn run watch-scss' 'yarn run watch-js' 'yarn run serve'",
     "watch": "watch -p 'static/sass/**/*.scss' -p 'static/js/**/*.js' -c 'yarn run build'",
     "watch-scss": "watch -p 'static/sass/**/*.scss' -c 'yarn run build-css'",
-    "watch-js": "vite build --watch",
+    "watch-js": "vite",
     "clean": "rm -rf node_modules yarn-error.log css static/js/modules static/css *.log *.sqlite _site/ build/ .jekyll-metadata .bundle cache.tmp",
     "percy": "node_modules/.bin/percy snapshot snapshots.yml"
   },
diff --git a/templates/_base-layout.html b/templates/_base-layout.html
@@ -23,6 +23,10 @@
 
     <link rel="stylesheet" href="{{ static_url('css/styles.css') }}" />
 
+    {% if IS_DEVELOPMENT %}
+      {{ vite_dev_tools() }}
+    {% endif %}
+
     {% block scripts_modules %}{% endblock %}
     <script src="{{ static_url('js/modules/raven.min.js') }}" defer></script>
     <script>
@@ -37,7 +41,7 @@
       });
     </script>
 
-    <script type="module" src="{{ static_url('js/dist/vite/base.js') }}" defer></script>
+    {{ vite_import('static/js/base/base.ts') }}
     {% block scripts_includes %}{% endblock %}
     <script src="https://assets.ubuntu.com/v1/703e23c9-lazysizes+noscript+native-loading.5.1.2.min.js" defer></script>
 
@@ -79,11 +83,11 @@
 
     {% block header %}
     <!-- JS that is needed right away -->
-    <script type="module" src="{{ static_url('js/dist/vite/cookie-policy.js') }}"></script>
+    {{ vite_import('static/js/base/cookie-policy.ts') }}
 
     {% from "_header_macros.html" import header %}
       {% if show_header != False %}
-        <script type="module" src="{{ static_url('js/dist/vite/global-nav.js') }}"></script>
+        {{ vite_import('static/js/base/global-nav.ts') }}
         {% from "_header_macros.html" import header %}
         {{ header() }}
       {% endif %}
diff --git a/templates/about/listing.html b/templates/about/listing.html
@@ -185,5 +185,5 @@ <h3 class="p-heading--2">Get featured</h3>
   </div>
 </section>
 
-<script type="module" src="{{ static_url('js/dist/vite/about-listing.js') }}" defer></script>
+{{ vite_import('static/js/public/about/listing.ts') }}
 {% endblock %}
diff --git a/templates/about/publish.html b/templates/about/publish.html
@@ -192,7 +192,7 @@ <h3 class="p-heading--5">Trave CI, Circle CI and GitHub Actions are all supporte
 {% endblock %}
 
 {% block scripts_includes %}
-<script type="module" src="{{ static_url('js/dist/vite/about.js') }}" defer></script>
+{{ vite_import('static/js/public/about/index.ts') }}
 {% endblock %}
 
 {% block scripts %}
diff --git a/templates/admin/admin.html b/templates/admin/admin.html
@@ -10,5 +10,5 @@
   window.SENTRY_DSN = "{{ SENTRY_DSN }}";
   window.API_URL = "{{ api_url }}";
 </script>
-<script type="module" src="{{ static_url('js/dist/vite/brand-store.js') }}"></script>
+{{ vite_import('static/js/publisher/brand-store.tsx') }}
 {% endblock %}
diff --git a/templates/blog/article.html b/templates/blog/article.html
@@ -110,7 +110,7 @@ <h5>
 {% endblock %}
 
 {% block scripts_includes %}
-  <script type="module" src="{{ static_url('js/dist/vite/blog.js') }}" defer></script>
+  {{ vite_import('static/js/public/blog.ts') }}
 {% endblock %}
 
 {% block scripts %}
diff --git a/templates/blog/index.html b/templates/blog/index.html
@@ -144,7 +144,7 @@ <h5 class="p-notification__title">Success</h5>
 {% endblock %}
 
 {% block scripts_includes %}
-  <script type="module" src="{{ static_url('js/dist/vite/blog.js') }}" defer></script>
+  {{ vite_import('static/js/public/blog.ts') }}
 {% endblock %}
 
 {% block scripts %}
diff --git a/templates/first-snap/_layout_fsf.html b/templates/first-snap/_layout_fsf.html
@@ -17,5 +17,5 @@
 {% endblock %}
 
 {% block scripts_includes %}
-  <script type="module" src="{{ static_url('js/dist/vite/fsf.js') }}" defer></script>
+  {{ vite_import('static/js/public/fsf.ts') }}
 {% endblock %}
diff --git a/templates/index.html b/templates/index.html
@@ -161,8 +161,8 @@ <h2>Measure user growth</h2>
 {% endblock %}
 
 {% block scripts_includes %}
-<script type="module" src="{{ static_url('js/dist/vite/homepage.js') }}" defer></script>
-<script type="module" src="{{ static_url('js/dist/vite/featured-snaps.js') }}" defer></script>
+{{ vite_import('static/js/public/homepage.ts') }}
+{{ vite_import('static/js/public/featured-snaps.ts') }}
 {% if nps %}
 <script src="//app-sjg.marketo.com/js/forms2/js/forms2.min.js" defer></script>
 {% endif %}
diff --git a/templates/store/publisher-details.html b/templates/store/publisher-details.html
@@ -179,7 +179,7 @@ <h5 class="p-notification__title">Error</h5>
 
 {% block scripts_includes %}
   {% if blog_slug %}
-    <script type="module" src="{{ static_url('js/dist/vite/publisher-details.js') }}"></script>
+    {{ vite_import('static/js/public/publisher-details.ts') }}
   {% endif %}
 {% endblock %}
 
diff --git a/templates/store/publisher.html b/templates/store/publisher.html
@@ -6,5 +6,5 @@
 <script>
   window.CSRF_TOKEN = "{{ csrf_token() }}";
 </script>
-<script type="module" src="{{ static_url('js/dist/vite/publisher.js') }}"></script>
+{{ vite_import('static/js/publisher/publisher.tsx') }}
 {% endblock %}
diff --git a/templates/store/snap-details.html b/templates/store/snap-details.html
@@ -306,7 +306,7 @@ <h5 class="p-notification__title">Error</h5>
 {% endblock %}
 
 {% block scripts_includes %}
-  <script type="module" src="{{ static_url('js/dist/vite/store-details.js') }}" defer></script>
+  {{ vite_import('static/js/public/store-details.ts') }}
 {% endblock %}
 
 {% block scripts %}
diff --git a/templates/store/snap-distro-install.html b/templates/store/snap-distro-install.html
@@ -263,7 +263,7 @@ <h4 class="p-card__title">
 {% endblock %}
 
 {% block scripts_includes %}
-  <script type="module" src="{{ static_url('js/dist/vite/distro-install.js') }}" defer></script>
+  {{ vite_import('static/js/public/distro-install.ts') }}
 {% endblock %}
 
 {% block scripts %}
diff --git a/templates/store/store.html b/templates/store/store.html
@@ -25,5 +25,6 @@
 
 {% block content %}
 <main id="root"></main>
-<script type="module" src="{{ versioned_static('js/dist/vite/store.js') }}" defer></script>
+
+{{ vite_import('static/js/store/index.tsx') }}
 {% endblock %}
diff --git a/vite.config.entry.js b/vite.config.entry.js
diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,56 @@
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig, loadEnv, transformWithEsbuild } from "vite";
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
-import entryPoints from "./vite.config.entry";
+import { execSync } from "node:child_process";
+
+/**
+ * Plugin that automatically detects and injects entry points based on the
+ */
+const flaskViteImportPlugin = () => ({
+  name: "flask-build-input-config",
+  config(config, env) {
+    // In dev mode we don't need to define entry points
+    if (env.mode === "development") return config;
+
+    let input = [];
+
+    try {
+      // In production mode the entry points are the arguments of all the
+      // `vite_import(...)` calls in templates/
+      const viteImports =
+        execSync(
+          // TODO: do it in Node to make it truly portable`
+          `grep -rnoh --include '*.html' -e 'vite_import\\((.*)\\)'`
+        ).toString() || ""; // big multi-line string wit the format
+      // `vite_import(<filename>)`
+
+      // filenames are contained in strings with either " or ' as delimiters
+      const imports = viteImports
+        .replaceAll(`"`, `'`) // replace all " with '
+        .split(`'`) // split on '
+        .filter((_, i) => i % 2 === 1); // the filenames sit at odd indices
+
+      // remove possible duplicate imports, sort just for clarity
+      input = Array.from(new Set(imports)).sort();
+
+      console.info("Building bundles for the following entry points:", input);
+    } catch (e) {
+      throw new Error(
+        "Vite: Couldn't find any entry points for production build\n" +
+          e.toString()
+      );
+    }
+
+    // this will be deep-merged with the current config
+    return defineConfig({
+      build: {
+        rollupOptions: {
+          input,
+        },
+      },
+    });
+  },
+});
 
 /**
  * Vite is opinionated and doesn't support JSX in .js files (and that's cool).
@@ -26,11 +75,21 @@ const jsxInJsPlugin = () => ({
 const env = loadEnv("all", process.cwd());
 
 export default defineConfig({
-  plugins: [react(), cssInjectedByJsPlugin(), jsxInJsPlugin()],
+  plugins: [
+    flaskViteImportPlugin(),
+    react(),
+    cssInjectedByJsPlugin(),
+    jsxInJsPlugin(),
+  ],
   server: {
     port: env?.VITE_PORT || 5173,
+    host: true,
     cors: {
-      origin: "http://localhost:8004", // needed for backend integration with Flask
+      origin: [
+        "http://localhost:8004",
+        "http://127.0.0.1:8004",
+        "http://0.0.0.0:8004",
+      ], // needed for backend integration with Flask
     },
   },
   css: {
@@ -41,14 +100,16 @@ export default defineConfig({
       },
     },
   },
+  define: {
+    global: "globalThis", // in dev mode "randomstring" uses `global` rather than `globalThis`
+  },
   build: {
     manifest: true,
     modulePreload: false,
     emptyOutDir: true,
     sourcemap: "hidden",
     outDir: env?.VITE_OUTPUT_DIR || "static/js/dist/vite",
     rollupOptions: {
-      input: entryPoints,
       output: {
         entryFileNames: `[name].js`,
         chunkFileNames: `chunks/[name].js`,
