Initial commit

.editorconfig

@@ -0,0 +1,5 @@
+root = true
+
+[*.{js,ts}]
+indent_style = space
+indent_size = 2

.env.sample

@@ -0,0 +1,6 @@
+CLIENT_PORT=3000
+SERVER_PORT=3001
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=postgres
+POSTGRES_DB=postgres
+POSTGRES_PORT=5432

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 11,
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 1,
+  },
+}

.github/pull_request_template.md

@@ -0,0 +1,6 @@
+### Какую задачу решаем
+
+
+### Скриншоты/видяшка (если есть)
+
+### TBD (если есть)

.github/workflows/checks.yml

@@ -0,0 +1,25 @@
+name: Lint
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - dev
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install main deps
+        run: yarn
+      - name: Initialize
+        run: yarn lerna bootstrap
+      - name: Lint
+        run: yarn lint
+      - name: Test
+        run: yarn test

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+.env
+.idea
+.vscode
+dist
+tmp

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "arrowParens": "avoid",
+  "bracketSameLine": true,
+  "width": 50
+}

Dockerfile.client

@@ -0,0 +1,26 @@
+ARG NODE_VERSION=16
+ARG CLIENT_PORT=3001
+
+FROM node:$NODE_VERSION-buster as base
+
+WORKDIR /app
+
+FROM base as builder
+
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+COPY . .
+
+RUN yarn lerna bootstrap
+RUN rm -rf /app/packages/client/dist/ && yarn build --scope=client
+
+
+FROM nginx:latest as production
+WORKDIR /app
+
+COPY --from=builder /app/packages/client/dist/ /app/
+COPY --from=builder /app/packages/client/nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE $CLIENT_PORT
+CMD [ "nginx", "-g", "daemon off;" ]

Dockerfile.server

@@ -0,0 +1,27 @@
+ARG NODE_VERSION=16
+ARG SERVER_PORT=3001
+
+FROM node:$NODE_VERSION-buster as base
+
+WORKDIR /app
+
+FROM base as builder
+
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+COPY . .
+
+RUN yarn lerna bootstrap
+RUN rm -rf /app/packages/server/dist/ && yarn build --scope=server
+
+
+FROM node:$NODE_VERSION-buster-slim as production
+WORKDIR /app
+
+COPY --from=builder /app/packages/server/dist/ /app/
+COPY --from=builder /app/packages/server/package.json /app/package.json
+RUN yarn install --production=true
+
+EXPOSE $SERVER_PORT
+CMD [ "node", "/app/index.js" ]

README.md

@@ -0,0 +1,76 @@
+### Как запускать?
+
+1. Убедитесь что у вас установлен `node` и `docker`
+2. Выполните команду `yarn bootstrap` - это обязательный шаг, без него ничего работать не будет :)
+3. Выполните команду `yarn dev`
+3. Выполните команду `yarn dev --scope=client` чтобы запустить только клиент
+4. Выполните команду `yarn dev --scope=server` чтобы запустить только server
+
+
+### Как добавить зависимости?
+В этом проекте используется `monorepo` на основе [`lerna`](https://github.com/lerna/lerna)
+
+Чтобы добавить зависимость для клиента 
+```yarn lerna add {your_dep} --scope client```
+
+Для сервера
+```yarn lerna add {your_dep} --scope server```
+
+И для клиента и для сервера
+```yarn lerna add {your_dep}```
+
+
+Если вы хотите добавить dev зависимость, проделайте то же самое, но с флагом `dev`
+```yarn lerna add {your_dep} --dev --scope server```
+
+
+### Тесты
+
+Для клиента используется [`react-testing-library`](https://testing-library.com/docs/react-testing-library/intro/)
+
+```yarn test```
+
+### Линтинг
+
+```yarn lint```
+
+### Форматирование prettier
+
+```yarn format```
+
+### Production build
+
+```yarn build```
+
+И чтобы посмотреть что получилось
+
+
+`yarn preview --scope client`
+`yarn preview --scope server`
+
+## Хуки
+В проекте используется [lefthook](https://github.com/evilmartians/lefthook)
+Если очень-очень нужно пропустить проверки, используйте `--no-verify` (но не злоупотребляйте :)
+
+## Ой, ничего не работает :(
+
+Откройте issue, я приду :)
+
+## Автодеплой статики на vercel
+Зарегистрируйте аккаунт на [vercel](https://vercel.com/)
+Следуйте [инструкции](https://vitejs.dev/guide/static-deploy.html#vercel-for-git)
+В качестве `root directory` укажите `packages/client`
+
+Все ваши PR будут автоматически деплоиться на vercel. URL вам предоставит деплоящий бот
+
+## Production окружение в докере
+Перед первым запуском выполните `node init.js`
+
+
+`docker compose up` - запустит три сервиса
+1. nginx, раздающий клиентскую статику (client)
+2. node, ваш сервер (server)
+3. postgres, вашу базу данных (postgres)
+
+Если вам понадобится только один сервис, просто уточните какой в команде
+`docker compose up {sevice_name}`, например `docker compose up server`

docker-compose.yml

@@ -0,0 +1,42 @@
+version: "3.9"
+
+services:
+    client:
+        container_name: prakticum-client
+        image: prakticum-client
+        build:
+            context: .
+            dockerfile: Dockerfile.client
+            args:
+              CLIENT_PORT: ${CLIENT_PORT}
+        restart: always
+        ports:
+            - "${CLIENT_PORT}:80"
+        environment:
+          - CLIENT_PORT=${CLIENT_PORT}
+          - SERVER_PORT=${SERVER_PORT}
+    server:
+        container_name: prakticum-server
+        image: prackicum-server
+        build:
+            context: .
+            dockerfile: Dockerfile.server
+            args:
+              SERVER_PORT: ${SERVER_PORT}
+        restart: always
+        ports:
+            - "${SERVER_PORT}:${SERVER_PORT}"
+        environment:
+          SERVER_PORT: ${SERVER_PORT}
+
+    postgres:
+      image: postgres:14     
+      ports:
+        - "${POSTGRES_PORT}:${POSTGRES_PORT}"
+      environment:
+        POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+        POSTGRES_USER: ${POSTGRES_USER}
+        POSTGRES_DB: ${POSTGRES_DB}
+      volumes:
+        - ./tmp/pgdata:/var/lib/postgresql/data
+

init.js

@@ -0,0 +1,5 @@
+const fs = require('fs')
+
+fs.copyFileSync('.env.sample', '.env')
+
+fs.mkdirSync('tmp/pgdata', { recursive: true })

lefthook.yml

@@ -0,0 +1,10 @@
+pre-commit:
+  parallel: true
+  commands:
+    lint:
+      glob: '*.{ts,tsx}'
+      run: yarn eslint {staged_files}
+    prettier:
+      glob: '*.{ts,tsx,css}'
+      run: yarn prettier -w {staged_files}
+      stage_fixed: true

lerna.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "useNx": true,
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "version": "0.0.0"
+}

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "client-server-template-with-vite",
+  "private": true,
+  "scripts": {
+    "bootstrap": "yarn && node init.js && lerna clean && yarn && lerna bootstrap",
+    "build": "lerna run build",
+    "dev:client": "lerna run dev  --scope=client",
+    "dev:server": "lerna run dev --scope=server",
+    "dev": "lerna run dev",
+    "test": "lerna run test",
+    "lint": "lerna run lint",
+    "format": "lerna run format",
+    "preview": "lerna run preview"
+  },
+  "license": "MIT",
+  "workspaces": [
+    "packages/*"
+  ],
+  "engines": {
+    "node": ">=15"
+  },
+  "devDependencies": {
+    "@evilmartians/lefthook": "^1.3.9",
+    "lerna": "^5.4.3"
+  }
+}

packages/client/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{TODO: Set title :) }</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/client/jest.config.js

@@ -0,0 +1,11 @@
+import dotenv from 'dotenv'
+dotenv.config()
+
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/src/**/*.test.{ts,tsx}'],
+  globals: {
+    __SERVER_PORT__: process.env.SERVER_PORT,
+  },
+}

packages/client/nginx.conf

@@ -0,0 +1,16 @@
+events {
+}
+
+http {
+    include mime.types;
+    server {
+        listen 80;
+        listen [::]:80;
+
+        location / {
+            root /app;
+            try_files $uri /index.html;
+            add_header Access-Control-Allow-Origin *;
+        }
+    }
+}