upd deps, migrate to new eslint + stylelint + checker, fix checker fo…

…r vite config, build config, envs, clear app config, ...etc

.env-development

@@ -0,0 +1,2 @@
+VITE_APP_NAME='React Vite Template | Development'
+VITE_BUILD_VERSION='0.1.0'

.env-production

@@ -0,0 +1,2 @@
+VITE_APP_NAME='Vue Vite Template | Production'
+VITE_BUILD_VERSION='0.1.0'

.env.example

@@ -0,0 +1,4 @@
+# if you want to specify custom dev port
+# VITE_DEV_PORT=8095
+VITE_APP_NAME='Vue Vite Template'
+VITE_BUILD_VERSION='0.1.0'

Dockerfile

@@ -1,20 +1,16 @@
 FROM node:18-alpine as builder
 RUN apk --no-cache --update --virtual build-dependencies add \
-    python \
+    python3 \
     make \
     g++
 
 ARG BUILD_VERSION
 WORKDIR /build
 COPY package*.json ./
 COPY yarn*.lock ./
-RUN true \
- && yarn autoclean --init \
- && yarn autoclean --force \
- && yarn install \
- && true
 COPY . .
-RUN yarn lint | tee 1.log | sed -e 's/^/[yarn lint] /' & yarn test | tee 2.log | sed -e 's/^/[yarn test] /' & VITE_APP_BUILD_VERSION="$BUILD_VERSION" yarn build | tee 3.log | sed -e 's/^/[yarn build] /'
+RUN yarn install
+RUN VITE_APP_BUILD_VERSION="$BUILD_VERSION" yarn build
 
 FROM nginx:1.20.2-alpine
 COPY nginx.conf /etc/nginx/nginx.conf

README.md

@@ -1,40 +1,51 @@
 # Distributed Lab react started template
 
-## Project setup
-```
-yarn | yarn install
-```
 
-### Compiles and hot-reloads for development
-```
-yarn start
-```
+| command                      | description                             |
+|------------------------------|-----------------------------------------|
+| `yarn install` / `yarn`      | install dependencies                    |
+| `yarn start`                 | start dev server                        |
+| `yarn build`                 | build project                           |
+| `yarn lint`                  | lint files (eslint + stylelint)         |
+| `yarn rsc [release-version]` | Lints release/release candidate version |
+|                              |                                         |
 
-### Compiles and minifies for production
-```
-yarn build
-```
+### important:
+`.env-development` and `.env-production` is the custom solution for CI, which is used to build the app for different environments e.g. staging and production in github workflow files.
 
-### Lints and fixes files
-```
-yarn lint
-```
+Before start development or manual deploy app with `dist` dir - make sure you have copied `.env-[environment]` file in to `.env.[environment]` file, where `[environment]` is the name of the environment, e.g. `.env-production` or `.env-staging` and fulfill it with your own values.
 
-### Run unit tests
-```
-yarn test
+```bash
+cp .env-development .env.development
+# or
+cp .env-production .env.production
 ```
 
-### Lints release/release candidate version
-```
-yarn rsc %release-version%
+### Build docker image with version
+```dockerfile
+ docker build --no-cache --progress=plain --build-arg BUILD_VERSION=1.0.0-rc.0 -t react-template .
 ```
 
-### Build docker image with version
+#### important
+docker-compose config works with `.env` file only, so make sure you have it
+
+### Run container
 ```
- docker build --no-cache --progress=plain --build-arg BUILD_VERSION=1.0.0-rc.0 -t react-template .
+docker run -d -p 80:80 --name [container-name] [image-name]
 ```
 
+## Prepare for deployment
+`.env-development` and `.end-production` is a files, which are used to run build in github workflow files, e.g. [here](.github/workflows/main.yml) at line 32
+
+It sets the environment variables for the `vitejs` build, which are called in werf.yaml file `yarn start` command.
+
+After that, docker image could be used to deploy the app
+
+If you want to build app locally, you can copy `.env-production` files and fulfill it with your own values, then run command `yarn build` or `.env-development` for `yarn start` command
+
+### Dealing with env variables
+Env variables can be rewritten by [env.is] (./static/env.js) file in runtime. To do so, we need to provide same [env variables](.env.example) there in json format
+
 ## Some additional features
 
 ### JsonApi lib

eslint.config.cjs

@@ -0,0 +1,147 @@
+const {fixupConfigRules} = require("@eslint/compat");
+
+const simpleImportSort = require("eslint-plugin-simple-import-sort");
+const prettier = require("eslint-plugin-prettier");
+const typescriptEslint = require("@typescript-eslint/eslint-plugin");
+const globals = require("globals");
+const tsParser = require("@typescript-eslint/parser");
+const js = require("@eslint/js");
+
+const {
+  FlatCompat,
+} = require("@eslint/eslintrc");
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
+});
+
+module.exports = [
+  {
+    ignores: [
+      "build/*.js",
+      "dist/*.js",
+      "config/*.js",
+      "**/playground",
+      "**/*.schema.js",
+      "**/index.html",
+      "**/*.md",
+      "static/env.js",
+    ],
+  },
+
+  ...fixupConfigRules(compat.extends(
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "plugin:i18next/recommended",
+    "prettier",
+  )),
+
+  {
+    plugins: {
+      "simple-import-sort": simpleImportSort,
+      prettier,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        defineProps: "readonly",
+        defineEmits: "readonly",
+        defineExpose: "readonly",
+        withDefaults: "readonly",
+      },
+
+      parser: tsParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+
+      parserOptions: {
+        tsconfigRootDir: ".",
+
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    settings: {
+      "import/parsers": {
+        "@typescript-eslint/parser": [".ts", ".tsx"],
+      },
+
+      "import/resolver": {
+        typescript: {},
+
+        node: {
+          paths: ["src"],
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+        },
+      },
+
+      react: {
+        version: "detect",
+      },
+    },
+
+    rules: {
+      "prettier/prettier": ["error", {}, {
+        usePrettierrc: true,
+      }],
+
+      "arrow-parens": 0,
+      "no-debugger": 1,
+
+      "no-warning-comments": [1, {
+        terms: ["hardcoded"],
+        location: "anywhere",
+      }],
+
+      "no-return-await": 0,
+      "object-curly-spacing": ["error", "always"],
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+      "no-var": "error",
+      "comma-dangle": [1, "always-multiline"],
+      "linebreak-style": ["error", "unix"],
+      "@typescript-eslint/no-non-null-assertion": "off",
+
+      'react/jsx-curly-brace-presence': ['warn', 'never'],
+
+      "max-len": [1, {
+        code: 80,
+        comments: 80,
+        ignoreUrls: true,
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+        ignoreRegExpLiterals: true,
+      }],
+
+      "no-console": [1, {
+        allow: ["warn", "error"],
+      }],
+
+      "react/display-name": "off",
+    },
+  },
+
+  ...fixupConfigRules(
+    compat.extends("plugin:@typescript-eslint/recommended", "plugin:import/typescript"),
+  ).map(config => ({
+    ...config,
+    files: ["**/*.ts?(x)"],
+  })),
+
+  {
+    files: ["**/*.ts?(x)"],
+
+    languageOptions: {
+      parser: tsParser,
+    },
+  }
+];