Start off by using the yarn create command:
yarn create vite my-project --template preact-ts
cd my-project
Switch off telemetry (optional)
yarn config set enableTelemetry 0
Add .gitignore entries as suggested by yarn:
vite.config.ts.timestamp-*.mjs
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
Use latest yarn, with PnP enabled
yarn set version berry
Install dependencies
yarn install
Install missing/peer dependencies. These dependencies are missing from the preact-ts template. Other templates (e.g. react-ts) may be more thorough and not need this step.
yarn add --dev @babel/core @babel/plugin-transform-react-jsx-development babel-plugin-transform-hook-names
Run the project. Use --host if running yarn in a container (e.g. https://github.com/jamesrr39/yarn-contained )
yarn dev --host
Open http://localhost:5173/ and see your project running
The above steps give us a project, but many editors are looking for a node_modules folder for dependencies & type definitions, which doesn't exist in Yarn PnP. You can install an SDK to fix the intellisense in vscode so it goes looking in the right place. Other editors are also supported.
yarn dlx @yarnpkg/sdks vscode
If you get an error with Your application tried to access color-convert, you can should install color-convert: yarn add -D color-convert, and then re-run yarn dlx @yarnpkg/sdks vscode.
Now open the settings menu:
(Ctrl + Shift + P) -> Preferences: Open Settings (UI)
Search for typescript.tsdk. It should be set to .yarn/sdks/typescript/lib - if it is not, set it to this. Note: if the package.json file is not in the root of the open project, add the path to the package.json folder (e.g. web-client/.yarn/sdks/typescript/lib)
SyntaxError: Unexpected token '??='- check your node.js version - at least v15 is required- Trouble opened zipped dependency source code in VSCode? Try installing this extension: https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs