Merge pull request #5 from jokester/move-to-vite-build

Move to vite build

.env.production → .env.sample

@@ -1,4 +1,4 @@
 # 这是生产环境的配置文件，如果需要本地测试，请复制此文件重命名为
 # .env.local 或 .env.development.local
 
-REACT_APP_BASE_URL=/api/
+REACT_APP_BASE_URL=/api/

.eslintignore

@@ -0,0 +1 @@
+.gitignore

.eslintrc.base.js

@@ -0,0 +1,62 @@
+const tsRules = {
+  '@typescript-eslint/ban-ts-comment': 1,
+  '@typescript-eslint/camelcase': 0,
+  '@typescript-eslint/explicit-member-accessibility': 0,
+  '@typescript-eslint/no-empty-function': 0,
+  '@typescript-eslint/no-empty-interface': 0,
+  '@typescript-eslint/no-explicit-any': 1,
+  '@typescript-eslint/no-namespace': 0,
+  '@typescript-eslint/no-non-null-assertion': 1,
+  '@typescript-eslint/no-parameter-properties': 0,
+  '@typescript-eslint/no-unused-vars': 1,
+  '@typescript-eslint/no-var-requires': 1,
+};
+
+const nodeRules = {
+  'node/no-extraneous-import': 0,
+  'node/no-extraneous-require': 0,
+  'node/no-unpublished-require': 0,
+};
+
+const jsRules = {
+  'no-constant-condition': 'warn',
+  'no-control-regex': 'warn',
+  'no-empty': 0,
+  'no-inner-declarations': 'warn',
+  'no-irregular-whitespace': 'warn',
+  'no-unused-vars': 0,
+  'no-useless-escape': 'warn',
+};
+
+const mergedRules = {
+  ...jsRules,
+  ...nodeRules,
+  ...tsRules,
+};
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+
+  extends: [],
+  plugins: [],
+  overrides: [
+    {
+      files: ['**/*.spec.ts', '**/*.test.ts', '**/*.spec.tsx', '**/*.test.tsx'],
+      env: {
+        jest: true,
+      },
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: ['plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended'],
+      rules: mergedRules,
+    },
+  ],
+  rules: mergedRules,
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+};

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     browser: true,
     es6: true
   },
-  extends: 'eslint:recommended',
+  extends: './.eslintrc.react',
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly'
@@ -19,6 +19,8 @@ module.exports = {
   plugins: ['react', 'react-hooks'],
   rules: {
     'react-hooks/rules-of-hooks': 'error', // 检查 Hook 的规则
-    'react-hooks/exhaustive-deps': 'warn' // 检查 effect 的依赖
+    'react-hooks/exhaustive-deps': 'warn', // 检查 effect 的依赖
+    'prefer-const': 'warn',
+    '@typescript-eslint/prefer-as-const': 0,
   }
 };

.eslintrc.react.js

@@ -0,0 +1,18 @@
+const base = require('./.eslintrc.base');
+const reactRules = {
+  'react-hooks/exhaustive-deps': 'error',
+  'react-hooks/rules-of-hooks': 'error',
+  'react/button-has-type': 'error',
+  'react/display-name': 0,
+  'react/prop-types': 0,
+  'react/react-in-jsx-scope': 0,
+};
+
+module.exports = {
+  ...base,
+  plugins: [...base.plugins, 'react', 'react-hooks'],
+  rules: {
+    ...base.rules,
+    ...reactRules,
+  },
+};

.github/workflows/deploy-image.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Setup node and deps
         uses: actions/setup-node@v3
         with:
-          node-version: 16
-          cache: yarn
-          cache-dependency-path: 'yarn.lock'
+          node-version: "20"
+
+      - run: npm i
 
       - name: Build app
-        run: yarn && CI=false yarn build
+        run: npm run build
 
       - name: Log in to the Container registry
         uses: docker/[email protected]

.prettierrc

@@ -1,3 +1,4 @@
 {
-    "singleQuote": true
-}
+  "singleQuote": true,
+  "trailingComma": "all"
+}

Dockerfile

@@ -1,6 +1,6 @@
-FROM node:16.17.0 AS builder
+FROM scratch AS builder
 # NOTE Dockerfile只用来打包 (否则给多个arch构建镜像会更慢)
-# `docker build` 前应先执行 `yarn build` .
+# `docker build` 前应先执行 `npm run build` .
 COPY . /app
 
 #######

README.md

@@ -28,20 +28,22 @@
 
 ## 开发步骤
 
-1. 使用 Node.js v16
-2. `yarn install` 安装依赖项
-3. 复制 `.env.production` 改名为 `.env.local` 修改此文件里 `REACT_APP_BASE_URL` 的值为测试后端的地址
-4. `yarn start` 启动调试
-5. `yarn run build` 发布前端代码，**请注意**此时使用的后端地址配置为 `.env.production` 中的配置。
+1. 建议使用 Node.js 近期LTS版本，如v18 v20
+2. `npm install` 安装依赖项
+3. `npm start start` 启动vite 开发服务器
+    - 开发服务器自带API反向代理。默认将 `localhost:5173/api/*` 的请求自动转发到 `localhost:5000` (本地moeflow-backend开发版的商品)
+    - 上述配置可在 `vite.config.ts` 修改。比如不在本地跑moeflow-backend，改用公网的服务器。
+4. `npm build` 发布前端代码，**请注意** 此时使用的后端地址配置为 `.env.local` 中的配置。
+    - 如果没有创建 `.env.local` 则为默认值 `/api`。
 
 如果您要部署到 `Vercel` 之类的网站托管程序上，您可以直接将 `REACT_APP_BASE_URL` 相对应的后端接口地址配置到托管程序的环境变量中。
 
 ## 将前后端项目合并
 
 最新版本的后端已经支持将前端项目编译完合并到后端，仅保留一个端口更好做映射！
 
-1. 复制 `.env.production` 改名为 `.env.local` 修改此文件为 `REACT_APP_BASE_URL=/`
-2. `yarn run build` 发布前端代码，等待编译完成。默认的编译结果目录是 `build`
+1. 复制 `.env.sample` 改名为 `.env.local` 修改此文件为 `REACT_APP_BASE_URL=/`
+2. `npm run build` 编译前端代码。默认的编译结果目录是 `build`
 3. 打开 [萌翻后端项目](https://github.com/kozzzx/moeflow-backend) 找到 `app` 文件夹，将前端 `build/static` 整个文件夹复制到此目录。
 4. 找到后端项目 `app/templates/index.html` 文件，用前端 `build/index.html` 文件替换。
 5. 将后端跑起来，访问首页 `http://127.0.0.1:5001/`（地址以命令行提示为准） 就可以正常访问、登录等操作。
@@ -70,3 +72,14 @@
 3. 调整静态文件生成的目录结构，方便前后端联合部署。
 4. 调整“创建团队”、“创建项目”页面中部分项目提交的内容。**（请配合最新版本的后端，避免出现数据格式问题！）**
 5. 可配置网站标题等位置的内容，请从 `src/locales` 中查找对应词汇进行修改。
+
+### Version 1.0.3
+
+1. 支持设置和显示首页 HTML/CSS
+2. 同时构建linux-amd64和linux-aarch64镜像。此版本起可以部署到ARM机器。
+
+<!--
+### Version 1.0.4
+
+1. 改用vite构建。
+-->

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/static/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no, viewport-fit=cover"/>
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="MoeFlow" />
+    <link rel="apple-touch-icon" href="/static/logo192.png" />
+    <link rel="manifest" href="/static/manifest.json" />
+    <title>MoeFlow</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="./src/index.tsx" ></script>
+  </body>
+</html>