From ff5bee30dcbb5b8859234de2b28c03a9de193604 Mon Sep 17 00:00:00 2001 From: denchiklut Date: Sun, 13 Oct 2024 13:24:05 -0700 Subject: [PATCH] fix: serve public folder --- README.md | 1 + jest.config.ts | 1 - {assets => public}/icons/192.png | Bin {assets => public}/icons/512.png | Bin {assets => public}/icons/favicon.ico | Bin {assets => public}/icons/maskable.png | Bin {assets => public}/offline/index.html | 12 +++++++++--- {assets => public}/spa/index.html | 2 +- src/server/middleware/favicon/index.ts | 2 +- src/server/router/static.ts | 2 +- tsconfig.json | 1 - webpack/plugins/copy.plugin.ts | 21 ++++++++++++++++----- webpack/plugins/html.plugin.ts | 8 +++++--- webpack/utils/dev-server/index.ts | 2 +- 14 files changed, 35 insertions(+), 17 deletions(-) rename {assets => public}/icons/192.png (100%) rename {assets => public}/icons/512.png (100%) rename {assets => public}/icons/favicon.ico (100%) rename {assets => public}/icons/maskable.png (100%) rename {assets => public}/offline/index.html (97%) rename {assets => public}/spa/index.html (95%) diff --git a/README.md b/README.md index 673d5f4..b821c59 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ You can use .env file to specify environment variables. This file is ignored by 3. If this variable needs to be accessible from both `client` & `server` make sure it's name starts with prefix `CLIENT_` 4. You can access environment variable via `getENV` function. This function will return a proper value based on environment (client/server) and cast it to a proper type based on `envSchema` from `step 2` (string/number/boolean) +5. Important note! Unlike with Next.js apps, environment variables in this setup are `not baked` into the `bundle` at build time. This allows you to `build` the app `once` (e.g., for staging) and `reuse` the same build in other environments, such as production, without needing to rebuild for each environment. #### Global variables diff --git a/jest.config.ts b/jest.config.ts index 1815bd8..a864e21 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -14,7 +14,6 @@ export default { '^@shared/(.*)': '/src/client/components/@shared/$1', '^pages/(.*)$': '/src/client/pages/$1', '^utils/(.*)$': '/src/client/utils/$1', - '^assets/(.*)$': '/src/client/assets/$1', '/config/react-forget$': '/config/react-forget', '\\.(icon|image).(svg)$': '/config/spec/svgr.ts', '\\.(css|scss)$': 'identity-obj-proxy' diff --git a/assets/icons/192.png b/public/icons/192.png similarity index 100% rename from assets/icons/192.png rename to public/icons/192.png diff --git a/assets/icons/512.png b/public/icons/512.png similarity index 100% rename from assets/icons/512.png rename to public/icons/512.png diff --git a/assets/icons/favicon.ico b/public/icons/favicon.ico similarity index 100% rename from assets/icons/favicon.ico rename to public/icons/favicon.ico diff --git a/assets/icons/maskable.png b/public/icons/maskable.png similarity index 100% rename from assets/icons/maskable.png rename to public/icons/maskable.png diff --git a/assets/offline/index.html b/public/offline/index.html similarity index 97% rename from assets/offline/index.html rename to public/offline/index.html index c346527..8c4933b 100644 --- a/assets/offline/index.html +++ b/public/offline/index.html @@ -1,4 +1,4 @@ - + @@ -70,11 +70,17 @@ transition: 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; color: white; background-color: black; - box-shadow: #00000033 0 3px 1px -2px, #00000024 0 2px 2px 0, #0000001f 0 1px 5px 0; + box-shadow: + #00000033 0 3px 1px -2px, + #00000024 0 2px 2px 0, + #0000001f 0 1px 5px 0; } .button:hover { - box-shadow: #00000033 0 2px 4px -1px, #00000024 0 4px 5px 0, #0000001f 0 1px 10px 0; + box-shadow: + #00000033 0 2px 4px -1px, + #00000024 0 4px 5px 0, + #0000001f 0 1px 10px 0; } @media only screen and (max-width: 480px) { diff --git a/assets/spa/index.html b/public/spa/index.html similarity index 95% rename from assets/spa/index.html rename to public/spa/index.html index 07d53f2..f3a72e9 100644 --- a/assets/spa/index.html +++ b/public/spa/index.html @@ -1,4 +1,4 @@ - + SSR App diff --git a/src/server/middleware/favicon/index.ts b/src/server/middleware/favicon/index.ts index 786a9e4..e6db3e4 100644 --- a/src/server/middleware/favicon/index.ts +++ b/src/server/middleware/favicon/index.ts @@ -2,6 +2,6 @@ import { resolve } from 'path' import serveFavicon from 'serve-favicon' export const favicon = () => { - const favPath = IS_DEV ? resolve('assets/icons') : resolve(__dirname, '../client/icons') + const favPath = IS_DEV ? resolve('public/icons') : resolve(__dirname, '../client/icons') return serveFavicon(resolve(favPath, 'favicon.ico')) } diff --git a/src/server/router/static.ts b/src/server/router/static.ts index b551155..791f57d 100644 --- a/src/server/router/static.ts +++ b/src/server/router/static.ts @@ -2,5 +2,5 @@ import { resolve } from 'path' import { Router, static as staticRoute } from 'express' export function staticRoutes(router: Router) { - router.use(staticRoute(IS_DEV ? 'assets' : resolve(__dirname, '../client'))) + router.use(staticRoute(IS_DEV ? 'public' : resolve(__dirname, '../client'))) } diff --git a/tsconfig.json b/tsconfig.json index 229999a..512bfc1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,7 +29,6 @@ "@shared/*": ["src/client/components/@shared/*"], "pages/*": ["src/client/pages/*"], "utils/*": ["src/client/utils/*"], - "assets/*": ["src/client/assets/*"], "config/*": ["config/*"] }, "typeRoots": ["@types", "node_modules/@types"] diff --git a/webpack/plugins/copy.plugin.ts b/webpack/plugins/copy.plugin.ts index c96a49e..bed1ed8 100644 --- a/webpack/plugins/copy.plugin.ts +++ b/webpack/plugins/copy.plugin.ts @@ -2,8 +2,19 @@ import { join } from 'path' import CopyPlugin from 'copy-webpack-plugin' import { IS_PROD, ROOT_DIR } from '../utils' -const config = { - patterns: [{ from: join(ROOT_DIR, 'assets/icons'), to: 'icons' }] -} - -export const copyPlugin = IS_PROD && new CopyPlugin(config) +export const copyPlugin = + IS_PROD && + new CopyPlugin({ + patterns: [ + { + from: join(ROOT_DIR, 'public'), + filter(path) { + const ignore = [ + join(ROOT_DIR, 'public/offline/index.html'), + join(ROOT_DIR, 'public/spa/index.html') + ] + return !ignore.some(v => path.startsWith(v)) + } + } + ] + }) diff --git a/webpack/plugins/html.plugin.ts b/webpack/plugins/html.plugin.ts index 982d242..3ac378d 100644 --- a/webpack/plugins/html.plugin.ts +++ b/webpack/plugins/html.plugin.ts @@ -1,17 +1,19 @@ import { join } from 'path' import HtmlWebpackPlugin from 'html-webpack-plugin' -import { ROOT_DIR, IS_PROD } from '../utils' +import { ROOT_DIR, IS_PROD, PUBLIC_PATH } from '../utils' const offlineConfig = { filename: 'pwa/offline.html', inject: true, - template: join(ROOT_DIR, 'assets/offline/index.html') + template: join(ROOT_DIR, 'public/offline/index.html'), + publicPath: PUBLIC_PATH } const spaConfig = { filename: 'index.html', inject: true, - template: join(ROOT_DIR, 'assets/spa/index.html') + template: join(ROOT_DIR, 'public/spa/index.html'), + publicPath: PUBLIC_PATH } interface Props { diff --git a/webpack/utils/dev-server/index.ts b/webpack/utils/dev-server/index.ts index eff7f33..ab4a536 100644 --- a/webpack/utils/dev-server/index.ts +++ b/webpack/utils/dev-server/index.ts @@ -25,5 +25,5 @@ export const devServerConfig = { port, host: hostname, historyApiFallback: true, - static: { directory: join(ROOT_DIR, 'assets') } + static: { directory: join(ROOT_DIR, 'public') } }