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