Feat/upgrade

.github/actions/setup-node/action.yml

@@ -2,12 +2,12 @@ name: Setup Node.js
 description: Setup Node.js
 
 runs:
-  using: "composite"
-  steps:
-    - uses: actions/setup-node@v4
-      name: Setup Node.js
-      with:
-        node-version-file: .nvmrc
-    - name: Install dependencies
-      run: npm i
-      shell: bash
+    using: "composite"
+    steps:
+        - uses: actions/setup-node@v4
+          name: Setup Node.js
+          with:
+              node-version-file: .nvmrc
+        - name: Install dependencies
+          run: npm i
+          shell: bash

.github/workflows/publish.yml

@@ -0,0 +1,63 @@
+name: Publish
+
+on:
+    push:
+        branches: [main]
+        tags: [v*]
+    pull_request:
+
+env:
+    REGISTRY: ghcr.io
+    IMAGE_NAME: ${{ github.repository }}
+    DOCKER_USER: ${{ github.actor }}
+    DOCKER_PASSWORD: ${{ secrets.GITHUB_TOKEN }}
+
+jobs:
+    publish:
+        name: Publish
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: write
+            attestations: write
+            id-token: write
+        steps:
+            - name: Install Cosign
+              uses: sigstore/[email protected]
+            - name: Checkout
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+            - name: Login to Container Registry
+              uses: docker/login-action@v3
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ env.DOCKER_USER }}
+                  password: ${{ env.DOCKER_PASSWORD }}
+            - name: Get metadata
+              uses: docker/metadata-action@v4
+              id: meta
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+                  tags: |
+                      type=ref,event=branch
+                      type=ref,event=pr
+                      type=semver,pattern={{version}}
+                      type=semver,pattern={{major}}.{{minor}}
+                      type=sha
+            - name: Build and push
+              uses: docker/build-push-action@v4
+              id: build-and-push
+              with:
+                  context: .
+                  push: ${{ github.event_name != 'pull_request' }}
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
+                  cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+                  cache-to: type=inline
+            - name: Sign the published Docker image
+              if: ${{ github.event_name != 'pull_request' }}
+              env:
+                  TAGS: ${{ steps.meta.outputs.tags }}
+                  DIGEST: ${{ steps.build-and-push.outputs.digest }}
+              run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

CHANGELOG.md

@@ -2,15 +2,13 @@
 
 ## [1.1.0](https://github.com/thangved/react-boilerplate/compare/v1.0.7...v1.1.0) (2024-12-17)
 
-
 ### Features
 
-* add i18next ([05f925b](https://github.com/thangved/react-boilerplate/commit/05f925be508b94f7f1ab300b09c690c70d1dea7d))
-
+- add i18next ([05f925b](https://github.com/thangved/react-boilerplate/commit/05f925be508b94f7f1ab300b09c690c70d1dea7d))
 
 ### Bug Fixes
 
-* **deps:** update react monorepo to v19 ([95fe746](https://github.com/thangved/react-boilerplate/commit/95fe7469d5116af762419e35fd97cce8e08b7d5d))
+- **deps:** update react monorepo to v19 ([95fe746](https://github.com/thangved/react-boilerplate/commit/95fe7469d5116af762419e35fd97cce8e08b7d5d))
 
 ## [1.0.7](https://github.com/thangved/react-boilerplate/compare/v1.0.6...v1.0.7) (2024-12-06)
 

Dockerfile

@@ -0,0 +1,29 @@
+FROM node:22 AS base
+
+FROM base AS builder
+
+WORKDIR /app
+
+ADD ./package.json ./
+
+RUN npm i --ignore-scripts
+
+ADD ./locales ./locales
+ADD ./public ./public
+ADD ./src ./src
+ADD ./index.html\
+    ./tsconfig.json\
+    ./tsconfig.node.json\
+    ./vite.config.ts\
+    ./
+
+RUN npm run build
+
+FROM nginx:alpine AS runner
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+ADD ./nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

compose.yml

@@ -0,0 +1,10 @@
+services:
+    web:
+        build:
+            context: .
+            dockerfile: Dockerfile
+        image: ghrc.io/thangved/react-boilerplate
+        ports:
+            - 8888:80
+    api:
+        image: ghrc.io/thangved/express0

eslint.config.mjs

@@ -1,42 +1,47 @@
 import { fixupConfigRules } from "@eslint/compat";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
 import reactRefresh from "eslint-plugin-react-refresh";
 import globals from "globals";
-import tsParser from "@typescript-eslint/parser";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
+	baseDirectory: __dirname,
+	recommendedConfig: js.configs.recommended,
+	allConfig: js.configs.all,
 });
 
-export default [{
-    ignores: ["**/dist", "**/.eslintrc.cjs"],
-}, ...fixupConfigRules(compat.extends(
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-)), {
-    plugins: {
-        "react-refresh": reactRefresh,
-    },
+export default [
+	{
+		ignores: ["**/dist", "**/.eslintrc.cjs"],
+	},
+	...fixupConfigRules(
+		compat.extends("eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"),
+	),
+	{
+		plugins: {
+			"react-refresh": reactRefresh,
+		},
 
-    languageOptions: {
-        globals: {
-            ...globals.browser,
-        },
+		languageOptions: {
+			globals: {
+				...globals.browser,
+			},
 
-        parser: tsParser,
-    },
+			parser: tsParser,
+		},
 
-    rules: {
-        "react-refresh/only-export-components": ["warn", {
-            allowConstantExport: true,
-        }],
-    },
-}];
+		rules: {
+			"react-refresh/only-export-components": [
+				"warn",
+				{
+					allowConstantExport: true,
+				},
+			],
+		},
+	},
+];

index.html

@@ -59,7 +59,7 @@
 				.app-logo {
 					width: 150px;
 					height: 150px;
-					background: url(@/assets/logo.svg) no-repeat center center / contain;
+					background: url(/logo.svg) no-repeat center center / contain;
 					animation: blingbling 0.5s infinite;
 					position: relative;
 					z-index: 10;

nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 80;
+
+    location /api {
+        proxy_pass http://api:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+}

package.json

@@ -2,6 +2,7 @@
 	"name": "react-boilerplate",
 	"version": "1.1.0",
 	"private": true,
+	"license": "MIT",
 	"type": "module",
 	"scripts": {
 		"build": "tsc && vite build",
@@ -22,19 +23,14 @@
 		"clsx": "^2.1.1",
 		"i18next": "^24.1.1",
 		"i18next-browser-languagedetector": "^8.0.2",
-		"i18next-chained-backend": "^4.6.2",
-		"i18next-http-backend": "^3.0.1",
 		"i18next-localstorage-backend": "^4.2.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"react-i18next": "^15.2.0",
 		"react-redux": "^9.2.0",
 		"react-router-dom": "^7.0.2",
 		"sharp": "^0.33.5",
-		"svgo": "^3.3.2",
-		"translation-check": "^1.1.0",
-		"vite-plugin-bundle-prefetch": "^0.0.4",
-		"vite-plugin-image-optimizer": "^1.1.8"
+		"svgo": "^3.3.2"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^19.6.1",

src/components/AppLogo/AppLogo.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+	width: 150px;
+	height: 150px;
+	background: url(/logo.svg) no-repeat center center / contain;
+}

src/components/AppLogo/AppLogo.tsx

@@ -0,0 +1,9 @@
+import clsx from "clsx";
+import React from "react";
+import styles from "./AppLogo.module.scss";
+
+export type AppLogoProps = React.HTMLAttributes<HTMLDivElement>;
+
+export default function AppLogo({ className, ...props }: AppLogoProps) {
+	return <div className={clsx(styles.wrapper, className)} {...props} />;
+}

src/components/AppLogo/index.ts

@@ -0,0 +1 @@
+export { default } from "./AppLogo";

src/components/FirstLoader/FirstLoader.tsx

@@ -0,0 +1,10 @@
+import AppLogo from "../AppLogo";
+import styles from "./FirstLoader.module.scss";
+
+export default function FirstLoader() {
+	return (
+		<div className={styles.wrapper}>
+			<AppLogo className={styles.logo} />
+		</div>
+	);
+}

src/components/FirstLoader/index.ts

@@ -0,0 +1 @@
+export { default } from "./FirstLoader";

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useAppDispatch";
+export * from "./useAppSelector";

src/hooks/useAppDispatch.ts

@@ -2,5 +2,4 @@ import store from "@/store";
 import { useDispatch } from "react-redux";
 
 export type AppDispatch = typeof store.dispatch;
-const useAppDispatch = useDispatch.withTypes<AppDispatch>();
-export default useAppDispatch;
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();

src/hooks/useAppSelector.ts

@@ -2,5 +2,4 @@ import store from "@/store";
 import { useSelector } from "react-redux";
 
 export type RootState = ReturnType<typeof store.getState>;
-const useAppSelector = useSelector.withTypes<RootState>();
-export default useAppSelector;
+export const useAppSelector = useSelector.withTypes<RootState>();

src/layouts/admin/index.tsx

@@ -1,4 +1,4 @@
-import FirstLoader from "@/components/first-loader";
+import FirstLoader from "@/components/FirstLoader";
 import { Suspense } from "react";
 import { Outlet } from "react-router-dom";