Skip to content

Latest commit

 

History

History
103 lines (72 loc) · 3.32 KB

README.md

File metadata and controls

103 lines (72 loc) · 3.32 KB
Raw

matters-web

Deployment Status Build Status Test Status Commitizen friendly

Getting Started

Start local dev

  • Install commitizen globally: npm install commitizen -g
  • Install dependencies: npm i
  • Environment variables: cp .env.local.example .env.local
  • Run npm run gen:type
  • Run npm run i18n
  • Run npm run dev, then go to http://localhost:3000/

Build and run production server

npm run build && npm run start

Start local dev with Docker

  • Environment variables: cp .env.local.example .env
  • Set command alias: source bin/dc-alias
  • Build docker image: dc build
  • Run:
    • dc up or dc run --service-ports web npm run dev
    • then go to http://localhost:3000/

NOTE: If new packages are added to package.json, dc up will use npm i to install those packages. But if you are using dc run --service-ports web npm run dev, you need to run dc run web npm i manually to make sure that new packages are installed.

Build with docker

  • Set command alias: source bin/dc-alias
  • dc run web npm run build

Push and pull docker image

  • Set command alias: source bin/dc-alias
  • Build docker image: dc build
  • aws configure, then input your access key and secret
  • Login AWS ECR with $(aws ecr get-login --no-include-email --region ap-southeast-1)
  • Push:
    • docker push 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
    • docker tag matters-web:latest 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
  • Pull:
    • docker pull 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
    • docker tag 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest matters-web:latest

Testing

See Playwright Testing Guide.

Conventions

See Conventions.

Static Files

./public/static/
├── apple-touch-icon.png # favicons
├── favicon-16x16.png
├── icon-96x96.png
├── icons # icons in different sizes
│   ├── 12px
│   │   ├── ...
│   │   └── draft-edit.svg
│   ├── 72px
│   │   ├── ...
│   │   └── empty-warning.svg
│   └── stripe.svg
├── images # illustrations
│   ├── ...
│   └── publish-4.svg
├── manifest.json # configurations
└── opensearch.xml

Icon

We use SVGR to transform SVGs into React components. For reusability and bundle optimization:

  • If the icon color isn't static:
    • Replace the values of fill and stroke attributes with currentColor, and
    • Add fill="none" to <svg>.

Tools

VS Code

Settings

See .vscode/settings.json

Extensions

See .vscode/extensions.json

Vim

Settings

For vim users, you might want to see .vim/.vimrc (using vim-plug).