chore: small fixes

- fixed nodemon restart on .env - fixed basename
denchiklut · Oct 13, 2024 · 6f4d6b1 · 6f4d6b1
1 parent 52ccd16
commit 6f4d6b1
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 56 deletions.
diff --git a/@types/env/index.d.ts b/@types/env/index.d.ts
@@ -1,24 +1,18 @@
 import type { Env } from "src/common"
 
 declare global {
-	declare const IS_DEV: boolean
-	declare const IS_PROD: boolean
-	declare const IS_SERVER: boolean
-	declare const IS_SPA: boolean
-	declare const clientPrefix: string
+	declare var IS_DEV: boolean
+	declare var IS_PROD: boolean
+	declare var IS_SERVER: boolean
+	declare var IS_SPA: boolean
+	declare var clientPrefix: string
 
 	namespace NodeJS {
 		interface ProcessEnv extends Partial<Collection<keyof Env, string>> {}
 	}
 
 	interface Window {
-		IS_SPA: boolean
-		IS_SERVER: boolean
-		IS_DEV: boolean
-		IS_PROD: boolean
-
-		env_vars: Partial<Collection<keyof Env, string>>
-		clientPrefix: string
 		nonce: string
+		env_vars: Partial<Collection<keyof Env, string>>
 	}
 }
diff --git a/config/spec/setup.ts b/config/spec/setup.ts
@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom'
 
-window.IS_SERVER = false
-window.IS_DEV = false
-window.IS_SPA = true
-window.clientPrefix = 'PUBLIC_'
+globalThis.IS_SERVER = false
+globalThis.IS_DEV = false
+globalThis.IS_SPA = true
+globalThis.clientPrefix = 'CLIENT_'
 
 jest.mock('src/common/env/env.util', () => ({
 	...jest.requireActual('src/common/env/env.util'),

diff --git a/nodemon.json b/nodemon.json
@@ -0,0 +1,3 @@
+{
+	"watch": ["dist/server", ".env"]
+}
diff --git a/src/client/components/@shared/app/index.tsx b/src/client/components/@shared/app/index.tsx
@@ -1,4 +1,4 @@
-import { type FC, lazy } from 'react'
+import { type FC, lazy, StrictMode } from 'react'
 import { Route, Routes } from 'react-router-dom'
 import { type AppProps, getENV } from 'src/common'
 import { Layout } from '@shared/layout'
@@ -13,14 +13,16 @@ export const App: FC<AppProps> = ({ nonce }) => {
 	__webpack_public_path__ = getENV('CLIENT_PUBLIC_PATH')
 
 	return (
-		<Html nonce={nonce}>
-			<Routes>
-				<Route path='/' element={<Layout />}>
-					<Route index element={<Home />} />
-					<Route path='about' element={<About />} />
-					<Route path='*' element={<NotFound />} />
-				</Route>
-			</Routes>
-		</Html>
+		<StrictMode>
+			<Html nonce={nonce}>
+				<Routes>
+					<Route path='/' element={<Layout />}>
+						<Route index element={<Home />} />
+						<Route path='about' element={<About />} />
+						<Route path='*' element={<NotFound />} />
+					</Route>
+				</Routes>
+			</Html>
+		</StrictMode>
 	)
 }
diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -1,9 +1,10 @@
 import { BrowserRouter } from 'react-router-dom'
 import { bootstrap } from 'client/utils'
+import { basename } from 'src/common'
 import { App } from '@shared/app'
 
 const AppContainer = () => (
-	<BrowserRouter>
+	<BrowserRouter basename={basename}>
 		<App nonce={window.nonce} />
 	</BrowserRouter>
 )

diff --git a/src/common/env/env.util.ts b/src/common/env/env.util.ts
@@ -16,7 +16,7 @@ export function createEnv<S extends AnyObject>({
 	const { data, error } = parse((IS_SERVER ? schema : client) as ObjectSchema<S>, envs)
 
 	if (error) {
-		logger.error('❌ Invalid environment variables:', error.errors)
+		logger.error('❌ Invalid environment variables: %o', error.errors)
 		throw new Error('Invalid environment variables')
 	}
 

diff --git a/src/server/middleware/render/index.tsx b/src/server/middleware/render/index.tsx
@@ -1,7 +1,7 @@
 import { renderToPipeableStream } from 'react-dom/server'
 import type { NextFunction, Request, Response } from 'express'
 import { StaticRouter } from 'react-router-dom/server'
-import { logger, setEnvVars } from 'src/common'
+import { logger, setEnvVars, basename } from 'src/common'
 import { ChunkExtractor } from 'server/utils'
 import { getApp, getStats } from './render.util'
 
@@ -14,7 +14,7 @@ export const render = (req: Request, res: Response, next: NextFunction) => {
 		const { url, nonce } = req
 
 		const { pipe } = renderToPipeableStream(
-			<StaticRouter location={url}>
+			<StaticRouter location={url} basename={basename}>
 				<App nonce={nonce} />
 			</StaticRouter>,
 			{

diff --git a/webpack/configs/client.config.ts b/webpack/configs/client.config.ts
@@ -45,5 +45,5 @@ export default {
 		plugins.definePlugin(),
 		...plugins.htmlWebpackPlugin()
 	].filter(Boolean),
-	optimization: optimization
+	optimization
 } satisfies Configuration
diff --git a/webpack/plugins/define.plugin.ts b/webpack/plugins/define.plugin.ts
@@ -6,24 +6,21 @@ interface Props {
 	server?: boolean
 	spa?: boolean
 }
-
-const config = (IS_SERVER: boolean, IS_SPA: boolean) => ({
-	IS_SERVER,
-	IS_DEV,
-	IS_PROD,
-	IS_SPA,
-	clientPrefix: JSON.stringify('CLIENT_'),
-	...(!IS_SERVER && {
-		'process.env': JSON.stringify(
-			Object.entries(process.env)
-				.filter(([k]) => k.startsWith('CLIENT_'))
-				.reduce<Collection<string, unknown>>((res, [k, v]) => {
-					res[k] = v
-					return res
-				}, {})
-		)
-	})
-})
-
 export const definePlugin = ({ server = false, spa = false }: Props = {}) =>
-	new DefinePlugin(config(server, spa))
+	new DefinePlugin({
+		IS_PROD,
+		IS_DEV,
+		IS_SPA: spa,
+		IS_SERVER: server,
+		clientPrefix: JSON.stringify('CLIENT_'),
+		...(spa && {
+			'process.env': JSON.stringify(
+				Object.entries(process.env)
+					.filter(([k]) => k.startsWith('CLIENT_'))
+					.reduce<Collection<string, unknown>>((res, [k, v]) => {
+						res[k] = v
+						return res
+					}, {})
+			)
+		})
+	})
diff --git a/webpack/utils/devServer.ts → webpack/utils/dev-server/index.ts b/webpack/utils/devServer.ts → webpack/utils/dev-server/index.ts
@@ -1,11 +1,14 @@
 import { join } from 'path'
-import { ROOT_DIR } from './env'
 import { existsSync, readFileSync } from 'fs'
+import { ROOT_DIR } from '../env'
+import { safeUrl } from './url'
 
 const sslKeyPath = join(ROOT_DIR, 'certs/key.pem')
 const sslCertPath = join(ROOT_DIR, 'certs/cert.pem')
 const sslIsExist = existsSync(sslKeyPath) && existsSync(sslCertPath)
 
+const { port, hostname } = safeUrl()
+
 /**
  * @see https://webpack.js.org/configuration/dev-server/
  */
@@ -19,8 +22,8 @@ export const devServerConfig = {
 			})
 		}
 	},
-	port: 3000,
-	host: 'localhost',
+	port,
+	host: hostname,
 	historyApiFallback: true,
 	static: { directory: join(ROOT_DIR, 'assets') }
 }
diff --git a/webpack/utils/dev-server/url.ts b/webpack/utils/dev-server/url.ts
@@ -0,0 +1,9 @@
+import 'dotenv/config'
+
+export function safeUrl() {
+	try {
+		return new URL(process.env.CLIENT_HOST ?? 'http://localhost:3000')
+	} catch (err) {
+		return new URL('http://localhost:3000')
+	}
+}
diff --git a/webpack/utils/index.ts b/webpack/utils/index.ts
@@ -1,3 +1,3 @@
 export * from './env'
-export * from './devServer'
+export * from './dev-server'
 export * from './optimization'
diff --git a/webpack/utils/optimization.ts → webpack/utils/optimization/index.ts b/webpack/utils/optimization.ts → webpack/utils/optimization/index.ts
@@ -1,5 +1,5 @@
 import type { Configuration } from 'webpack'
-import { IS_PROD } from './env'
+import { IS_PROD } from '../env'
 
 export const optimization: Configuration['optimization'] = IS_PROD
 	? { splitChunks: { chunks: 'all' } }