z-base-components

Table of contents

Project Structure

.
├── assets
│   ├── fonts               # Font icons
│   ├── icons               # Favicon files
│   ├── data                # Data sources
│   ├── images              # Image files ( SVG, PNG, JPG )
├── i18n                    # Translate languages
│   ├── en.json
│   ├── vi.json
├── dist                    # Build folder for dev-server watch source code
├── public                  # Build folder for deploy production
├── environments            # Deploy environments
├── src
│   ├── api                 # API Request
│   ├── components          # React Components
│   ├── modals              # Modal view
│   ├── config              # Config router, constant
│   ├── containers          # Container subview for page ( include by component view, modal view, etc... )
│   ├── pages               # Page view for each routes
│   ├── store               # Root store for app
│   ├── styles              # Define styles with scss files
│   ├── types               # Define types for each module
│   ├── utils               # Define helper functions
│   ├── main.ts
├── .env                    # ENV config for webpack builder ( API, APP_URL, NODE_ENV, PORT, etc... )
├── .env.development        # ENV config info ( helpful clone to .env file )
├── .eslintignore           # Ignore validate EsLint some files
├── .eslintrc               # EsLint config
├── .nvmrc                  # Project nodejs version
├── .prettierignore         # Ignore validate Prettier some files
├── .prettierrc             # Prettier config
├── .stylelintrc            # Stylelint config
├── index.html
├── package.json
├── tsconfig.json           # Typescript config
├── vite.config.ts          # Vite config
├── yarn.lock
└── ...

Install project dependencies

• Install Yarn latest version
• Install Nodejs 10 ( Should be use NVM for install NodeJS )

Install package dependencies for Editor tool

• Eslint
• CSSlint
• Typescript
• Linter
• Linter EsLint
• Prettier

Builder Info

• React
• Vite
• Typescript
• ESLint / TSLint / Stylint

Run project

• Use nodejs version 10
• Clone .env.development to .env file

APP_URL=
API_URL=
NODE_ENV=development
PORT=3000
DEBUG=false
SSR=false
SSR_PORT=5000

• Install node_modules yarn install
• Run server-dev local yarn dev
  • NODE_ENV=development
• Build production yarn build
  • NODE_ENV=production

Before do task

• Please create new brand with your issue.
• Please pull new code from develop brand before checkout your brand
• Branch naming
  • feat/TM-xxx
  • fix/TM-xxx
  • refactor/TM-xxx
  • docs/TM-xxx
  • style/TM-xxx
  • perf/TM-xxx
  • vendor/TM-xxx
  • chore/TM-xxx

Before commit

• Please don't include anything that not been developed by you.
• Please don't commit anything that can be regenerated from other things that were committed such as node_modules.
• Your code, you must be cleanup and please check format code before commit ( tabs, spaces, blank )
• In your message commit, please reference your issue for review task. Ex: git commit -m"[feat][TM-1] Message
• Commit message MUST clean ( commit code detail, message fix bug, etc... ) How to write good message
• Please using develop brand for development and don't use master brand.

Optional commit

• Merge code from develop brand and if conflict please fix conflict.

Before push

• Make sure eslint / tslint has verified ( please don't use git commit option --no-verify )
• Don't use git rebase git reset git force

Gitlab target

• Create new pull request with your brand and merge to develop brand.
• Add reviewers for review your pull request.
• When you create new pull request if you see conflict, please decline pull request and fix.