Skip to content

Latest commit

 

History

History
419 lines (289 loc) · 7.48 KB

README.md

File metadata and controls

419 lines (289 loc) · 7.48 KB
Raw

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
"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
"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