Development Setup

These are the tools I used and the steps I took to create a working environment to build and develop this website. This includes what packages I installed and any special notes for importing and/or setup.

Tools

• JetBrains WebStorm
• Node.js 18
• Vite

Vite Setup

• npm create vite@latest
• Using react-swc-ts template
  • Chose React over other frameworks for compatibility with many popular libraries
  • Chose SWC over Babel for faster compilation
  • Chose TypeScript over JavaScript for type safety
• Installed @vitejs/plugin-legacy to support older browsers
  • npm i -D @vitejs/plugin-legacy
  • npm i -D terser (dependency of @vitejs/plugin-legacy)
  • Added to vite.config.ts:

    plugins: [
      // other plugins
      legacy({
        targets: ['defaults', 'not IE 11']
      })
    ]

• Added base: '/honors-portfolio/ to vite.config.ts to support GitHub Pages

Formatting and Linting tools

I used Prettier and ESLint to format and lint my code. I also used DeepSource for more static analysis.

• npm i -D prettier eslint
• npm i -D eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
  • Extra packages for TypeScript and Prettier support in ESLint
• Make .eslinntrc.cjs file to configure ESLint
• Make .prettierignore file to tell Prettier to ignore the dist/ build output folder and the src/assets/ folder (which has JSON files that are minified)

Libraries: installations, imports, and any special notes

• Sass: npm i -D sass
• Three.js: npm i three
  • npm i -D @types/three (for TypeScript)
  • import * as THREE from 'three';