Skip to content

Latest commit

 

History

History
135 lines (98 loc) · 4.14 KB

README.md

File metadata and controls

135 lines (98 loc) · 4.14 KB
Raw

matters-web

Deployment Status Test Status Commitizen friendly

Getting Started

Start local dev

  • Install dependencies: npm i
  • Environment variables: cp .env.local.example .env.local
  • Run npm run gen:type or npm run gen:watch
  • 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

Static File

./public/static/
├── apple-touch-icon.png # favicons
├── favicon-16x16.png
├── icon-96x96.png
├── icons # icons in different sizes
│   ├── 12px
│   │   ├── ...
│   │   └── draft-edit.svg
│   ├── 16px
│   │   ├── ...
│   │   └── world.svg
│   ├── 24px
│   │   ├── ...
│   │   └── wallet.svg
│   ├── 32px
│   │   ├── ...
│   │   └── warning.svg
│   ├── 40px
│   │   ├── ...
│   │   └── share-whatsapp-circle.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>.
  • If the icon is resuable, create a component file under components/Icon and export it from components/Icon/index.tsx.

Conventions

Matters Design System

Matters 3.0: Design System

Naming

React Component/Page

foldername: PascalCase

filename: camelCase

├── pages
│   └── ArticleDetail
│       ├── styles.css
│       └── index.tsx
└── components
    └── Layout
        ├── styles.css
        └── index.tsx

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).

Troubleshooting

  1. If styled-jsx is installed in both next and our own package.json, the built-in styled-jsx SSR of Next.js will fail. See #533.