fix: serve public folder

denchiklut · Oct 13, 2024 · ff5bee3 · ff5bee3
1 parent 92d2d03
commit ff5bee3
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 17 deletions.
diff --git 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
@@ -14,7 +14,6 @@ export default {
 		'^@shared/(.*)': '<rootDir>/src/client/components/@shared/$1',
 		'^pages/(.*)$': '<rootDir>/src/client/pages/$1',
 		'^utils/(.*)$': '<rootDir>/src/client/utils/$1',
-		'^assets/(.*)$': '<rootDir>/src/client/assets/$1',
 		'/config/react-forget$': '<rootDir>/config/react-forget',
 		'\\.(icon|image).(svg)$': '<rootDir>/config/spec/svgr.ts',
 		'\\.(css|scss)$': 'identity-obj-proxy'

diff --git a/assets/icons/192.png → public/icons/192.png b/assets/icons/192.png → public/icons/192.png
diff --git a/assets/icons/512.png → public/icons/512.png b/assets/icons/512.png → public/icons/512.png
diff --git a/assets/icons/favicon.ico → public/icons/favicon.ico b/assets/icons/favicon.ico → public/icons/favicon.ico
diff --git a/assets/icons/maskable.png → public/icons/maskable.png b/assets/icons/maskable.png → public/icons/maskable.png
diff --git a/assets/offline/index.html → public/offline/index.html b/assets/offline/index.html → public/offline/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<link href="../icons/favicon.ico" rel="icon" />
@@ -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 → public/spa/index.html b/assets/spa/index.html → public/spa/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<title>SSR App</title>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -25,5 +25,5 @@ export const devServerConfig = {
 	port,
 	host: hostname,
 	historyApiFallback: true,
-	static: { directory: join(ROOT_DIR, 'assets') }
+	static: { directory: join(ROOT_DIR, 'public') }
 }