Maintenance: Relocate vite build files and fonts.css for better caching from reverse proxy.

mgruner · mgruner · commit 0003d3c66d4d · 2023-05-25T08:36:19.000+02:00
diff --git a/.cypress/support/component-index.html b/.cypress/support/component-index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="stylesheet" href="/fonts.css">
+    <link rel="stylesheet" href="/assets/mobile/fonts.css">
     <title>Zammad</title>
   </head>
   <body class="bg-black font-sans text-sm text-white antialiased">
diff --git a/.eslintignore b/.eslintignore
@@ -8,5 +8,5 @@ app/frontend/shared/graphql/types.ts
 public/assets/tests/**/*.js
 public/assets/form/**/*.js
 
-public/vite/**/*.js
-public/vite-dev/**/*.js
+public/assets/mobile/vite/**/*.js
+public/assets/mobile/vite-dev/**/*.js
diff --git a/.gitignore b/.gitignore
@@ -47,6 +47,8 @@
 # logfiles and tempfiles
 /log
 /public/assets/*.*
+/public/assets/mobile/vite
+/public/assets/mobile/vite-dev
 /public/assets/addons
 /public/assets/app
 /public/assets/custom
@@ -91,10 +93,6 @@
 # Backup files
 *~
 
-# Vite Ruby
-/public/vite
-/public/vite-dev
-
 # Vite PWA
 /app/frontend/dev-dist
 
diff --git a/.gitlab/ci/review-app.yml b/.gitlab/ci/review-app.yml
@@ -115,6 +115,10 @@
             "name": "product_name",
             "value": "Zammad Review App ${APP_NAME}"
           },
+          {
+            "name": "http_type",
+            "value": "http"
+          },
           {
             "name": "fqdn",
             "value": "${APP_FQDN}"
diff --git a/.gitlab/ci/test/browser_build.yml b/.gitlab/ci/test/browser_build.yml
@@ -9,7 +9,7 @@ browser:build:
       - public/assets/application-*
       - public/assets/knowledge_base*
       - public/assets/print-*
-      - public/vite
+      - public/assets/mobile/vite
   cache: !reference [.cache, read_only_full]
   variables:
     RAILS_ENV: 'production'
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -44,8 +44,8 @@
     "public/assets/*.css",
     "public/assets/chat/chat.css",
     "public/assets/doorkeeper/**",
-    "public/vite-dev/**",
-    "public/vite/**",
+    "public/assets/mobile/vite-dev/**",
+    "public/assets/mobile/vite/**",
     "**/reset*.css",
     "**/bootstrap*.css",
     "**/codemirror.css",
diff --git a/app/controllers/mobile_controller.rb b/app/controllers/mobile_controller.rb
@@ -27,9 +27,9 @@ def manifest
         display:          'standalone',
         start_url:        '/mobile/',
         icons:            [
-          # files a relative to manifest.webmanifest and are stored in public/
-          { src: '../app-icon-512.png', sizes: '512x512', type: 'image/png' },
-          { src: '../app-icon-192.png', sizes: '192x192', type: 'image/png' },
+          # files are relative to manifest.webmanifest and are stored in public/assets/mobile
+          { src: '../assets/mobile/app-icon-512.png', sizes: '512x512', type: 'image/png' },
+          { src: '../assets/mobile/app-icon-192.png', sizes: '192x192', type: 'image/png' },
         ]
       },
       content_type: 'application/manifest+json'
diff --git a/app/frontend/shared/sw/register.ts b/app/frontend/shared/sw/register.ts
@@ -29,7 +29,7 @@ export const registerSW = (options: RegisterSWOptions) => {
       onNeedRefresh?.()
     }
     // you can disable service worker in development mode by running in console: pwa.enable()
-    // you can enable service worker, it will point to /public/vite-dev/sw.js
+    // you can enable service worker, it will point to /public/assets/mobile/vite-dev/sw.js
     // don't forget to unregister service worker, when you are done in console: pwa.disable()
     if (!sw.isEnabled()) {
       return () => {
diff --git a/app/graphql/gql/queries/application_build_checksum.rb b/app/graphql/gql/queries/application_build_checksum.rb
@@ -15,7 +15,7 @@ def resolve(...)
       # Use a stable identifier for the development environment, as we use hot reloading there instead.
       return 'development-auto-build' if Rails.env.development?
 
-      filename = Rails.public_path.join('vite/manifest.json')
+      filename = Rails.public_path.join('assets/mobile/vite/manifest.json')
       Digest::MD5.hexdigest(File.read(filename))
     end
 
diff --git a/app/views/layouts/mobile.html.erb b/app/views/layouts/mobile.html.erb
@@ -8,7 +8,7 @@
     <link rel="manifest" href="/mobile/manifest.webmanifest" />
     <link rel="shortcut icon" href="/favicon.ico">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-    <%= stylesheet_link_tag '/fonts.css', nonce: true %>
+    <%= stylesheet_link_tag '/assets/mobile/fonts.css', nonce: true %>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= action_cable_meta_tag %>
diff --git a/config/vite.json b/config/vite.json
@@ -1,11 +1,12 @@
 {
   "all": {
+    "publicOutputDir": "assets/mobile/vite",
     "sourceCodeDir": "app/frontend",
     "watchAdditionalPaths": []
   },
   "development": {
     "autoBuild": true,
-    "publicOutputDir": "vite-dev",
+    "publicOutputDir": "assets/mobile/vite-dev",
     "port": 3036
   }
 }
diff --git a/histoire.config.ts b/histoire.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
         name: 'inject-fonts',
         transformIndexHtml() {
           return [
-            { tag: 'link', attrs: { rel: 'stylesheet', href: '/fonts.css' } },
+            { tag: 'link', attrs: { rel: 'stylesheet', href: '/assets/mobile/fonts.css' } },
           ]
         },
       },
diff --git a/public/assets/mobile/app-icon-192.png b/public/assets/mobile/app-icon-192.png
diff --git a/public/assets/mobile/app-icon-512.png b/public/assets/mobile/app-icon-512.png
diff --git a/public/assets/mobile/fonts.css b/public/assets/mobile/fonts.css
diff --git a/spec/graphql/gql/queries/application_build_checksum_spec.rb b/spec/graphql/gql/queries/application_build_checksum_spec.rb
@@ -5,7 +5,7 @@
 RSpec.describe Gql::Queries::ApplicationBuildChecksum, authenticated_as: false, type: :graphql do
 
   context 'when checking the application build checksum' do
-    let(:vite_path) { Rails.public_path.join('vite') }
+    let(:vite_path) { Rails.public_path.join('assets/mobile/vite') }
     let(:filename)  { "#{vite_path}/manifest.json" }
     let!(:initial_checksum) do
       # Create some content to the file at the beginning, because normally it not exists for the graphql tests.
diff --git a/spec/system/apps/mobile/app_maintenance_spec.rb b/spec/system/apps/mobile/app_maintenance_spec.rb
@@ -22,7 +22,7 @@
 
     it 'shows app rebuild dialog' do
       # Append a newline to the manifest file to trigger a reload notification.
-      Rails.public_path.join('vite/manifest.json').open('a') do |file|
+      Rails.public_path.join('assets/mobile/vite/manifest.json').open('a') do |file|
         file.write("\n")
       end
 

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export const registerSW = (options: RegisterSWOptions) => {`
`29`	`29`	`onNeedRefresh?.()`
`30`	`30`	`}`
`31`	`31`	`// you can disable service worker in development mode by running in console: pwa.enable()`
`32`		`- // you can enable service worker, it will point to /public/vite-dev/sw.js`
	`32`	`+ // you can enable service worker, it will point to /public/assets/mobile/vite-dev/sw.js`
`33`	`33`	`// don't forget to unregister service worker, when you are done in console: pwa.disable()`
`34`	`34`	`if (!sw.isEnabled()) {`
`35`	`35`	`return () => {`