Lesson 02: Project Setup - strvcom/frontend-academy-2022 GitHub Wiki

Speaker: Lucas Constantino

Resources

Pull Request
Recording (Gdrive; Was recorded separately, not during the live lesson.)
Slides (Google Slides)
Slides (PDF)

Other resources

SSR vs SSG in Next.js – a practical overview for CTOs and devs

Coding Steps

1. Create Next App

npx create-next-app@latest --ts .
git add .
git commit -m 'chore: create-next-app'

2. ESLint

yarn add --dev @strv/eslint-config-react @strv/eslint-config-typescript

Update .eslintconfig:

{
  "extends": [
    "next/core-web-vitals",
    "@strv/react",
    "@strv/typescript",
    "@strv/typescript/react"
  ],

  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

yarn lint -> fails
yarn lint --fix -> works
git commit -m 'chore: configured eslint'

3. Prettier

yarn add --dev prettier @strv/prettier-config
Add .prettierrc: "@strv/prettier-config"

Add .prettierignore:

# 3rd Party Code
node_modules

# Generated
.next
.vercel

# Misc
.idea

Update package.json:

{
  "scripts": {
    "format": "prettier --check ."
  }
}

git commit -m 'chore: configured prettier'

4. lint-staged

yarn add --dev lint-staged

Add .lintstagedrc:

{
  "*.{js,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

git commit -m 'chore: configured lint-staged'

5. Husky

yarn add --dev husky
yarn husky install
yarn husky add .husky/pre-commit "yarn lint-staged"

Update package.json:

{
  "scripts": {
    "prepare": "husky install"
  }
}

git commit -m 'chore: configured husky'

6. Commit Linting

yarn add --dev @commitlint/cli @strv/commitlint-config
yarn husky add .husky/commit-msg "yarn commitlint --edit $1"

Add file .commitlintrc:

{
  "extends": ["@strv/commitlint-config"]
}

git commit -m 'chore: configured commitlint'

8. Readme

Create the contents of README.

9. Deployment

Setup Vercel deployment.
npx vercel <- will guide through whole deployment process