upgrade

mrothauer · Jul 27, 2020 · 86cc742 · 86cc742
1 parent 38b6207
commit 86cc742
Show file tree

Hide file tree

Showing 11 changed files with 216 additions and 406 deletions.
diff --git a/README.md b/README.md
@@ -3,5 +3,8 @@ Trying to run Vite on traditional PHP sites.
 STATUS:
 Works on dev server, but still have to handle production build and assets path.
 
-Note:
-The first level's "public" folder is the server public root. Vite is outside of public root intentionaly, where it would be within a PHP app.
+KNOWN ISSUE:
+An important limitation is the Vite's port, it must match the one that was created during "npm run dev", default 3000
+
+NOTE:
+The first level "public" folder is the server's public root. Vite is outside of public root intentionaly, where it would be within a PHP app.
diff --git a/public/dist/_assets/index.8efe0fae.js b/public/dist/_assets/index.8efe0fae.js
diff --git a/public/dist/_assets/index.b2348123.js b/public/dist/_assets/index.b2348123.js
diff --git a/public/dist/_assets/logo.30e544f3.png b/public/dist/_assets/logo.30e544f3.png
diff --git a/public/index.php b/public/index.php
@@ -1,3 +1,55 @@
+<?php
+
+// This would be your framework default bootstrap file
+
+// During dev, this file would be hit when accessing your local host, like:
+// http://vite-php-setup.test
+
+
+
+// Some dev/prod mechanism would exist
+define('IS_DEVELOPMENT', true);
+define('IS_PRODUCTION', !IS_DEVELOPMENT);
+
+
+// Vite Client that must be loaded during development
+function viteClient()
+{
+    if (IS_DEVELOPMENT) {
+        $host = "http://{$_SERVER['SERVER_NAME']}:3000";
+
+        return <<<HTML
+        <script type="module">
+            import "{$host}/vite/client"
+            window.process = { env: { NODE_ENV: "development" }}
+            </script>
+
+        HTML;
+    }
+}
+
+
+// The script file
+function viteScript($name)
+{
+    if (IS_DEVELOPMENT) {
+        $host = "http://{$_SERVER['SERVER_NAME']}:3000";
+    } else {
+        $host = '';
+        $prefix = '/dist/_assets';
+        // TODO must read the hashed files
+        // but how?
+        // rollup should export a JSON file to track them?
+    }
+
+    return <<<HTML
+    <script type="module" src="{$host}/{$name}"></script>
+
+    HTML;
+}
+
+
+?>
 <!DOCTYPE html>
 <html lang="en">
 
@@ -7,17 +59,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
 
-    <script type="module">
-        import "http://localhost:3000/vite/hmr"
-        window.process = { env: { NODE_ENV: "development" }}
-    </script>
+    <?= viteClient() ?>
+    <?= viteScript('src/main.js') ?>
 </head>
 
 <body>
-    <?= 'PHP output' ?>
+    <?= '<p>PHP output here, potentially large HTML parts</p>' ?>
+    <hr>
+
+    <div class="vue-app">
+        <hello-world msg="header"></hello-world>
+    </div>
+
+    <hr>
+    <?= '<p>PHP output here, potentially large HTML parts</p>' ?>
+    <hr>
+
+    <div class="vue-app">
+        <hello-world msg="footer"></hello-world>
+    </div>
 
-    <div id="app"></div>
-    <script type="module" src="http://localhost:3000/src/main.js"></script>
+    <hr>
+    <?= '<p>PHP output here, potentially large HTML parts</p>' ?>
 </body>
 
 </html>
diff --git a/vite/index.html b/vite/index.html
@@ -9,7 +9,8 @@
 </head>
 
 <body>
-  <div id="app"></div>
+  <p>This file is required so Vite finds all the scripts it must compile.</p>
+
   <script type="module" src="/src/main.js"></script>
 </body>