Vite workshop

TODO: Describe what this is, why it exists and how it should be used.

0 - NPM package

• Initialize the package

npm init -y

• Open package.json

• Remove every property except name, version, scripts

• Add these properties after the version property

"type": "module",
"private": true,

• Remove all scripts from the scripts property

1 - Vite

• Install the packages

npm i -D vite

• Install a package that you want to use in your project

npm i date-fns

• Reorder the properties in package.json in order to put dependencies above devDependencies

• Copy the contents of the extra/01-vite directory to the root directory of this workshop

• Add the start, build and preview npm scripts to package.json

"start": "vite",
"build": "vite build",
"preview": "vite preview",

• Run the build npm script and examine the output in the dist directory

npm run build

• Run the preview npm script to serve the production build in your local environment

npm run preview

• Don't forget to stop the npm script before you proceed with the workshop

• Run the start npm script to start the application in development mode

npm run start

• Don't forget to stop the npm script before you proceed with the workshop

2 - TypeScript

• Install the packages

npm i -D typescript@~5.6
npm i -D @total-typescript/ts-reset

• Copy the contents of the extra/02-typescript directory to the root directory of this workshop

• Rename src/main.js to src/main.ts

• Rename src/helpers.js to src/helpers.ts

• In src/helpers.ts, add a type to the first parameter of the formatDate function

• Rename vite.config.js to vite.config.ts

• In index.html change the value of the src attribute of the script tag to /src/main.ts.

• Add the typecheck npm script to package.json

"typecheck": "tsc",

• Run the typecheck npm script

npm run typecheck

• Run the build npm script and examine the output in the dist directory

npm run build

3 - Transforming Imports

• Install the package

npm i -D vite-tsconfig-paths

• Change tsconfig.json to define the import transforms

"baseUrl": "./",
"paths": {
  "~*": ["src/*"],
  "src/*": ["src/*"]
}

• Add the vite-tsconfig-paths plugin in vite.config.ts

import tsconfigPaths from 'vite-tsconfig-paths';

tsconfigPaths()

• Change the imports in src/main.ts

import logoUrl from 'src/logo.png';
import { formatDate } from '~helpers';

• Run the build npm script and examine the output in the dist directory

npm run build

4 - Bundle Analyzer

• Install the package

npm i -D source-map-explorer

• Add the profile npm script to package.json

"profile": "npm run build && source-map-explorer dist/**/*.js"

• Run the profile npm script and examine the visualization.

npm run profile

• Don't forget to stop the npm script before you proceed with the workshop.

5 - React

• Install the packages

npm i react
npm i react-dom

npm i -D @types/react
npm i -D @types/react-dom
npm i -D @vitejs/plugin-react

• Add the jsx typescript setting in tsconfig.json

"jsx": "react-jsx",

• Delete src/main.ts

• Copy the contents of the extra/05-react directory to the root directory of this workshop

• In index.html add the #root div element to the body tag

<div id="root"></div>

• In index.html change the value of the src attribute of the script tag to /src/main.tsx

• Add the @vitejs/plugin-react plugin in vite.config.ts

import react from '@vitejs/plugin-react';

react()

• Run the build npm script and examine the output in the dist directory.

npm run build

• Run the profile npm script and examine the visualization.

npm run profile

• Don't forget to stop the npm script before you proceed with the workshop.

6 - Vitest

• Install the packages

npm i -D vitest
npm i -D @vitest/coverage-v8
npm i -D @testing-library/dom
npm i -D @testing-library/react
npm i -D @testing-library/user-event
npm i -D @testing-library/jest-dom
npm i -D jsdom
npm i -D msw

• Copy the contents of the extra/06-vitest directory to the root directory of this workshop

• Add the testing configuration to vite.config.ts

import { configDefaults } from 'vitest/config';

test: {
  environment: 'jsdom',
  setupFiles: ['./setupTests.ts'],
  exclude: [...configDefaults.exclude, 'extra'],
  coverage: {
    enabled: true,
    provider: 'v8',
    all: true,
    include: ['**/src/**'],
    exclude: [
      ...(configDefaults.coverage.exclude || []),
      'extra',
      'src/main.tsx',
    ],
    thresholds: {
      lines: 90,
      statements: 90,
      functions: 90,
      branches: 90,
    },
  },
},

• Change tsconfig.json to include setupTests.ts

"include": ["src", "vite.config.ts", "setupTests.ts"],

• Add the test and test:watch npm scripts to package.json

 "test": "vitest run",
 "test:watch": "vitest watch",

• Add the code coverage output directory to .gitignore

coverage/

• Run the test npm script to verify that the tests pass.

npm run test

7 - Prettier

• Install the package

npm i -D prettier

• Copy the contents of the extra/07-prettier directory to the root directory of this workshop.

• Add the format and format-check npm scripts to package.json

"format": "prettier --cache --write .",
"format-check": "prettier --cache --check .",

• Run the format npm script

npm run format

• Demonstrate WebStorm config
• Demonstrate VSCode config
  • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.useEditorConfig": true,
"prettier.configPath": ".prettierrc"

8 - ESLint

• Install the packages

npm i -D eslint@8
npm i -D @arabasta/eslint-config
npm i -D typescript-eslint

• Copy the contents of the extra/08-eslint directory to the root directory of this workshop.

• Add the npm scripts to package.json

"lint": "eslint ./ --max-warnings 0",
"lint:fix": "npm run lint -- --fix"

• Run the lint:fix npm script

npm run lint:fix

• Doesn't work for test files. Why?

• Demonstrate WebStorm config

• Demonstrate VSCode config

  • https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": ["typescript", "typescriptreact"]

09 - SCSS (OPTIONAL)

• Install the packages

npm i -D sass

• Copy the contents of the extra/10-tailwind directory to the root directory of this workshop.

• Import the src\styles.scss file in src/main.tsx.

import './styles.scss';

• Run the build npm script to verify that everything works.

npm run build

10 - Tailwind (OPTIONAL)

• Install the packages

npm i -D tailwindcss

• Copy the contents of the extra/10-tailwind directory to the root directory of this workshop.

• Add the tailwind directives at the start of main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• Use some tailwind utility in your source file. Example: text-center.

• Run the build npm script to verify that everything works.

npm run build