How to set up a Front-End project with Vite, React, and TypeScript

01-initial-setup.sh

npm init vite@latest demo-project -- --template react-ts

02-initial-setup-scaffold.txt

.
├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

03-development-server.sh

npm run dev

04-engines-configuration.json5

{
  "name": "demo-project",
  "version": "0.0.0",
  "engines":{
    "node": ">=16.13.0",
    "npm": ">=8.1.0"
  },
  // ...
}

05-npmrc-file-content.txt

16.13

06-install-eslint.sh

npm install eslint --save-dev

07-eslint-init.text

npx eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · Yes
Installing eslint-plugin-react@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest
Successfully created .eslintrc.json file

08-install-react-hooks-plugin.sh

npm install eslint-plugin-react-hooks --save-dev

09-eslint-configuration.json5

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended", // This line was added
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {},
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

10-eslintignore.txt

node_modules
dist

11-eslint-configuration-with-typescript.json5

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking" // This line was added
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2021,
    "sourceType": "module",
    "project": "./tsconfig.json" // This line was added
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {},
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

12-eslint-npm-script.json5

{
  "name": "demo-project",
  "version": "0.0.0",
  // ...
  "scripts":{
    // ...
    "lint:scripts": "eslint --ext .ts,.tsx src"
  },
  // ...
}

13-install-stylelint.sh

npm install stylelint stylelint-config-standard stylelint-config-recess-order --save-dev

14-stylelint-config.json

{
  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"]
}

14-stylelintignore.txt

node_modules
dist

15-stylelintignore.txt

node_modules
dist

16-stylelint-npm-script.json5

{
  "name": "demo-project",
  "version": "0.0.0",
  // ...
  "scripts":{
    // ...
    "lint:styles": "stylelint \"src/**/*.css\""
  },
  // ...
}

17-vscode-config.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

18-install-prettier.sh

npm install prettier eslint-config-prettier eslint-plugin-prettier stylelint-config-prettier --save-dev

19-prettier-config.json

{
  "semi": false,
  "singleQuote": true
}

20-stylelint-with-prettier.json5

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order",
    "stylelint-config-prettier" // this config was added
  ]
}

21-install-storybook.sh

npx sb init --builder storybook-builder-vite

22-App.stories.tsx

import { ComponentStory, ComponentMeta } from '@storybook/react'

import App from './App'

export default {
  title: 'Components/App',
  component: App,
} as ComponentMeta<typeof App>

const Template: ComponentStory<typeof App> = (args) => <App {...args} />

export const Default = Template.bind({})

23-storybook-development-server.sh

npm run storybook

24-storybook-preview.js

import '../src/index.css' // this line was added

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

25-install-jest.sh

npm install jest --save-dev

26-jest-npm-script.json5

{
  "name": "demo-project",
  "version": "0.0.0",
  // ...
  "scripts":{
    // ...
    "test": "jest"
  },
  // ...
}

27-run-jest.txt

npm test

> demo-project@0.0.0 test
> jest

No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /Users/username/code/demo-project
  16 files checked.
  testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 0 matches
  testPathIgnorePatterns: /node_modules/ - 16 matches
  testRegex:  - 0 matches
Pattern:  - 0 matches

28-demo.test.js

test('demo', () => {
  expect(true).toBe(true)
})

29-demo-test-output.txt

npm test

> demo-project@0.0.0 test
> jest

 PASS  src/demo.test.js
  ✓ demo (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.581 s, estimated 1 s
Ran all test suites.

30-install-eslint-jest-plugin.sh

npm install eslint-plugin-jest --save-dev

31-eslint-config-with-jest.json5

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true // This line was added
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:react/jsx-runtime",
    "plugin:prettier/recommended",
    "plugin:jest/recommended", // This line was added
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2021,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "@typescript-eslint", "jest"], // This line was updated with "jest"
  "rules": {
    "prettier/prettier": "error"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

32-install-ts-jest.sh

npm install ts-jest @types/jest --save-dev

33-jest.config.js

module.exports = {
  preset: 'ts-jest',
}

34-run-jest-with-typescript.txt

npm test

> demo-project@0.0.0 test
> jest

 PASS  src/demo.test.ts
  ✓ demo (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.477 s, estimated 1 s
Ran all test suites.

35-install-testing-library.sh

npm install @testing-library/react @testing-library/jest-dom --save-dev

36-jest-config-environment.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom', // this line was added
}

37-App.test.tsx

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import { App } from './App'

it('renders hello message', () => {
  render(<App />)
  expect(screen.getByText('Hello Vite + React!')).toBeInTheDocument()
})

38-run-jest-with-testing-library.txt

npm test

> demo-project@0.0.0 test
> jest 
 
 PASS  src/demo.test.ts
 FAIL  src/App.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    SyntaxError: Unexpected token '<'

      1 | import { useState } from 'react'
    > 2 | import logo from './logo.svg'
        | ^
      3 | import './App.css'
      4 |
      5 | export const App: React.FC = () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/App.tsx:2:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.411 s
Ran all test suites.

39-jest-config-static-files.js

module.exports = {
  preset: 'ts-jest',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  testEnvironment: 'jest-environment-jsdom',
}

40-install-identity-obj-proxy.sh

npm install identity-obj-proxy --save-dev

41-fileMock.js

module.exports = 'test-file-stub'

42-run-jest-with-mocks.txt

npm test

> demo-project@0.0.0 test
> jest

 PASS  src/demo.test.ts
 PASS  src/App.test.tsx

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        5.124 s, estimated 7 s
Ran all test suites.

43-install-cypress.sh

npm install cypress --save-dev

44-cypress-npm-script.json5

{
  "name": "demo-project",
  "version": "0.0.0",
  // ...
  "scripts":{
    // ...
    "cypress:open": "cypress open"
  },
  // ...
}

45-install-cypress-eslint-plugin.sh

npm install eslint-plugin-cypress @testing-library/cypress --save-dev

46-cypress-eslint-config.json

{
  "extends": ["plugin:cypress/recommended"]
}

47-cypress-tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["**/*.ts"]
}

48-eslint-config-exclude-folder.json5

{
  // ...
  "plugins": ["react", "@typescript-eslint"],
  "ignorePatterns": ["cypress/**/*"], // this line was added
  "rules": {
    "prettier/prettier": "error"
  },
  // ...
  "overrides": [
    {
      "files": ["src/**/*.test.ts", "src/**/*.test.tsx"], // this line was updated
      "env": {
        "jest": true
      },
      "extends": ["plugin:jest/recommended"],
      "plugins": ["jest"]
    }
  ]
}

49-jest-config-match-src-folder.js

module.exports = {
  preset: 'ts-jest',
  testMatch: ['**/src/**/?(*.)+(spec|test).[jt]s?(x)'], // this line was added
  // ...
}

50-cypress-folder-file-structure.txt

cypress
├── .eslintrc.json
├── fixtures
├── integration
├── plugins
│   └── index.ts
├── support
│   ├── commands.ts
│   └── index.ts
└── tsconfig.json

51-import-cypress-testing-library-commands.js

import '@testing-library/cypress/add-commands'

52-app.spec.ts

describe('App', () => {
  it('increments the counter', () => {
    cy.visit('http://localhost:3000/')
    cy.findByRole('button', { name: /count is:/i }).click()
    cy.findByRole('button', { name: /count is:/i }).should(
      'contain',
      'count is: 1'
    )
  })
})

53-cypress.json5

{
  "baseUrl": "http://localhost:3000" // this line was added
}

54-base-url-app.spec.ts

describe('App', () => {
  it('increments the counter', () => {
    cy.visit('/') // this line was updated
    cy.findByRole('button', { name: /count is:/i }).click()
    cy.findByRole('button', { name: /count is:/i }).should(
      'contain',
      'count is: 1'
    )
  })
})

55-install-chromatic.sh

npm install --save-dev chromatic

56-chromatic-github-action.yml

name: "Chromatic"
on: push
jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Install dependencies
        run: npm install
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

57-pull-request-github-action.yml

name: "Main"
on: pull_request
jobs:
  lint-and-test:
    name: Run linters and then tests
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version-file: ".nvmrc"
          cache: "npm"
      - name: Install dependencies
        run: npm install
      - name: Run ESLint
        run: npm run lint:scripts
      - name: Run Stylelint
        run: npm run lint:styles
      - name: Run Tests
        run: npm test
        env:
          CI: true
      - name: Run Cypress
        uses: cypress-io/github-action@v2
        with:
          build: npm run build
          start: npm run serve -- --port=3000
          wait-on: http://localhost:3000
          browser: chrome
          headless: true

58-github-action-trigger.yml

on: pull_request

59-github-action-checkout.yml

- uses: actions/checkout@v2

60-github-action-setup-node.yml

- name: Setup Node.js
  uses: actions/setup-node@v2
  with:
    node-version-file: ".nvmrc"
    cache: "npm"

61-github-action-install-dependencies.yml

- name: Install dependencies
  run: npm install

62-github-action-run-eslint.yml

- name: Run ESLint
  run: npm run lint:scripts

63-github-action-run-stylelint.yml

- name: Run Stylelint
  run: npm run lint:styles

64-github-action-run-tests.yml

- name: Run Tests
  run: npm test
  env:
    CI: true

65-github-action-run-cypress.yml

- name: Run Cypress
  uses: cypress-io/github-action@v2
  with:
    build: npm run build
    start: npm run serve -- --port=3000
    wait-on: http://localhost:3000
    browser: chrome
    headless: true

66-install-commitlint.sh

npm install --save-dev @commitlint/config-conventional @commitlint/cli

67-commitlint-config.json

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

68-setup-husky.sh

npm install husky --save-dev
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

69-commitlint-bad-message.sh

git add .
git commit -m "bad commit message"
⧗   input: bad commit message
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

70-commitlint-good-message.sh

git commit -m "feat: setup semantic commit messages"
[feat/semantic-releases b9d74c1] feat: setup semantic commit messages
 4 files changed, 1832 insertions(+), 23 deletions(-)
 create mode 100644 .commitlintrc.json
 create mode 100755 .husky/commit-msg

71-install-semantic-release.sh

npm install --save-dev semantic-release

72-semantic-release-config.json

{
  "branches": ["main"],
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/github"
  ]
}

73-semantic-release-github-action.yml

name: "Release"
on:
  push:
    branches:
      - main
jobs:
  semantic-release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version-file: ".nvmrc"
          cache: "npm"
      - name: Install dependencies
        run: npm install
      - name: Release a new version
        run: npx semantic-release
        env:
          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"