• 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/

npm run build && npm run start

• Environment variables: cp .env.local.example .env.local
• 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.

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

• 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

Matters Design System

Matters 3.0: Design System

foldername: PascalCase

filename: camelCase

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

See .vscode/settings.json

• blanu.vscode-styled-jsx
• attilabuti.vscode-mjml
• esbenp.prettier-vscode
• mikestead.dotenv
• ms-vscode.vscode-typescript-tslint-plugin
• Prisma.vscode-graphql
• stylelint.vscode-stylelint
• ricard.postcss

• EditorConfig.EditorConfig
• wix.vscode-import-cost
• oderwat.indent-rainbow
• CoenraadS.bracket-pair-colorizer
• naumovs.color-highlight

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

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.