Merge pull request #1179 from guardian/rm/use-vite

Use Vite
guardian · Jan 2, 2025 · 26f7290 · 26f7290
2 parents acfdb2d + c139322
commit 26f7290
Show file tree

Hide file tree

Showing 94 changed files with 549 additions and 3,392 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,5 +17,10 @@ module.exports = {
     'prefer-const': 'error',
     semi: ['warn', 'always'],
     'comma-dangle': ['error', 'never']
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
   }
 };
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,5 @@ metals.sbt
 .bloop
 .bsp/
 .java-version
+**/manifest.json
+.vite
diff --git a/app/controllers/VideoUIApp.scala b/app/controllers/VideoUIApp.scala
@@ -25,20 +25,15 @@ class VideoUIApp(val authActions: HMACAuthActions, conf: Configuration, awsConfi
   def index(id: String = ""): Action[AnyContent] = AuthAction { implicit req =>
     val isTrainingMode = isInTrainingMode(req)
 
-    val jsFileName = "video-ui/build/main.js"
+    val jsFileName = "video-ui/build/app.js"
 
-    val jsAssetHost = sys.env.get("JS_ASSET_HOST")
-
-    val isHotReloading = jsAssetHost match {
-      case Some(_) if awsConfig.isDev => true
+    val isHotReloading = sys.env.get("RELOADING") match {
+      case Some("HOT") if awsConfig.isDev => true
       case _ => false
     }
 
-    val jsLocation = if (isHotReloading) {
-      jsAssetHost.get + jsFileName
-    } else {
-      routes.Assets.versioned(jsFileName).toString
-    }
+    val jsLocation = routes.Assets.versioned(jsFileName).toString
+
 
     val composerUrl = awsConfig.composerUrl
 

diff --git a/app/views/VideoUIApp/app.scala.html b/app/views/VideoUIApp/app.scala.html
@@ -5,7 +5,7 @@
   pinboardJsLocation: Option[String],
   clientConfigJson: String,
   isHotReloading: Boolean,
-  csrf: String
+  csrf: String,
 )
 
 @layout(title, isHotReloading, csrf) {
@@ -20,8 +20,26 @@ <h1>Loading...</h1>
     @presenceJsLocation.map { presenceJs =>
       <script src="@presenceJs"></script>
     }
+    <script type="module">window.global = window</script>
 
-    <script src="@jsFileLocation"></script>
+    @if(isHotReloading) {
+        <!-- Connect directly to Vite dev server in development -->
+        <!-- See https://vitejs.dev/guide/backend-integration.html -->
+      <script type="module">
+        import RefreshRuntime from 'http://localhost:5173/@@react-refresh'
+
+        RefreshRuntime.injectIntoGlobalHook(window)
+        window.$RefreshReg$ = () => {
+        }
+        window.$RefreshSig$ = () => (type) => type
+        window.__vite_plugin_react_preamble_installed__ = true
+      </script>
+      <script type="module" src="http://localhost:5173/@@vite/client"></script>
+      <script type="module" src="http://localhost:5173/public/video-ui/src/app.jsx"></script>
+    } else {
+      <link rel="stylesheet" type="text/css" href="/build/app.css">
+      <script type="module" src="@jsFileLocation"></script>
+    }
 
     @pinboardJsLocation.map { pinboardJs =>
       <script async src="@pinboardJs" ></script>

diff --git a/app/views/VideoUIApp/layout.scala.html b/app/views/VideoUIApp/layout.scala.html
@@ -14,7 +14,7 @@
     <link rel="icon" type="image/png" href="@routes.Assets.versioned("video-ui/images/favicon.png")">
 
     @if(!isHotReloading) {
-      <link rel="stylesheet" type="text/css" href="@routes.Assets.versioned("video-ui/build/main.css")"/>
+      <link rel="stylesheet" type="text/css" href="@routes.Assets.versioned("video-ui/build/app.css")"/>
     }
 
     <script type="text/javascript">

diff --git a/build_config/webpack.dev.conf.js b/build_config/webpack.dev.conf.js
diff --git a/build_config/webpack.devserver.conf.js b/build_config/webpack.devserver.conf.js
diff --git a/build_config/webpack.prod.conf.js b/build_config/webpack.prod.conf.js
diff --git a/conf/application.conf b/conf/application.conf
@@ -4,5 +4,6 @@ name = "gu-media-atom-maker"
 
 play.application.loader = "MediaAtomMakerLoader"
 play.http.errorHandler = "util.RequestLogging"
-play.filters.headers.contentSecurityPolicy = "default-src 'self' 'unsafe-eval' 'unsafe-inline' data: https: wss:"
+# 'http://localhost:5173' and 'ws://localhost:5173' are used in local development by Vite
+play.filters.headers.contentSecurityPolicy = "default-src 'self' 'unsafe-eval' 'unsafe-inline' data: https: wss: http://localhost:5173 ws://localhost:5173"
 play.filters.headers.frameOptions = null
diff --git a/docs/01-dev-setup.md b/docs/01-dev-setup.md
@@ -3,9 +3,9 @@
 ## Requirements
 Ensure you have the following installed:
 - awscli
-- Java 8
+- Java (version specified in .tool-versions)
 - nginx
-- node v14.18.1
+- node (version specified in .nvmrc)
 - npm
 - yarn
 - nvm

diff --git a/nginx/nginx-mappings.yml b/nginx/nginx-mappings.yml
@@ -2,6 +2,3 @@ name: video
 mappings:
   - prefix: video
     port: 9001
-  - prefix: video-assets
-    port: 9002
-    websocket: /sockjs-node
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,3 +15,5 @@ metals.sbt @@
     .bloop
     .bsp/
     .java-version
+    **/manifest.json
+    .vite