Help users that visit the Vite dev server directly

laravel · Jul 3, 2022 · deb9374 · deb9374
1 parent f8aa32b
commit deb9374
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     ],
     "scripts": {
         "build": "npm run build-plugin && npm run build-inertia-helpers",
-        "build-plugin": "rm -rf dist && tsc",
+        "build-plugin": "rm -rf dist && tsc && cp src/dev-server-index.html dist/",
         "build-inertia-helpers": "rm -rf inertia-helpers && tsc --project tsconfig.inertia-helpers.json",
         "lint": "eslint --ext .ts ./src ./tests",
         "ssr:serve": "vite build --ssr && node storage/ssr/ssr.js",

diff --git a/src/dev-server-index.html b/src/dev-server-index.html
@@ -0,0 +1,20 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Laravel Vite</title>
+
+        <!-- Fonts -->
+        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+
+        <style>
+            body {
+                font-family: 'Nunito', sans-serif;
+            }
+        </style>
+    </head>
+    <body class="antialiased">
+        <p>The Vite server should not be accessed directly. Please visit <a href="{{ url }}">{{ url }}</a> instead</p>
+    </body>
+</html>
diff --git a/src/index.ts b/src/index.ts
@@ -164,6 +164,9 @@ function resolveLaravelPlugin(pluginConfig: Required<PluginConfig>): LaravelPlug
         configureServer(server) {
             const hotFile = path.join(pluginConfig.publicDirectory, 'hot')
 
+            const envDir = resolvedConfig.envDir || process.cwd()
+            const appUrl = loadEnv('', envDir, 'APP_URL').APP_URL
+
             server.httpServer?.once('listening', () => {
                 const address = server.httpServer?.address()
 
@@ -177,9 +180,6 @@ function resolveLaravelPlugin(pluginConfig: Required<PluginConfig>): LaravelPlug
                     viteDevServerUrl = `${protocol}://${host}:${address.port}`
                     fs.writeFileSync(hotFile, viteDevServerUrl)
 
-                    const envDir = resolvedConfig.envDir || process.cwd()
-                    const appUrl = loadEnv('', envDir, 'APP_URL').APP_URL
-
                     setTimeout(() => {
                         server.config.logger.info(colors.red(`\n  Laravel ${laravelVersion()} `))
                         server.config.logger.info(`\n  > APP_URL: ` + colors.cyan(appUrl))
@@ -203,6 +203,23 @@ function resolveLaravelPlugin(pluginConfig: Required<PluginConfig>): LaravelPlug
             process.on('SIGHUP', process.exit)
 
             exitHandlersBound = true
+
+            return () => {
+                server.middlewares.use((req, res, next) => {
+                    if (req.url === '/index.html') {
+                        server.config.logger.warn(
+                            "\n" + colors.bgYellow(
+                                colors.black(`The Vite server should not be accessed directly. Please visit ${appUrl} instead.`)
+                            )
+                        )
+                        res.end(
+                            fs.readFileSync(path.join(__dirname, 'dev-server-index.html')).toString().replace(/{{ url }}/g, appUrl)
+                        )
+                    }
+
+                    next()
+                });
+            }
         },
 
         // The following two hooks are a workaround to help solve a "flash of unstyled content" with Blade.