jamesrr39 · March 21, 2025 21:46 · Mar 21, 2025 · Mar 9, 2025 · Nov 16, 2024 · Oct 3, 2023
diff --git a/vite-preact-ts.md b/vite-preact-ts.md
@@ -2,7 +2,7 @@
 
 Start off by using the `yarn create` command:
 ```
-yarn create vite@latest my-project --template preact-ts
+yarn create vite my-project --template preact-ts
 cd my-project
 ```
 Switch off telemetry (optional)

diff --git a/vite-preact-ts.md b/vite-preact-ts.md
@@ -2,7 +2,7 @@
 
 Start off by using the `yarn create` command:
 ```
-yarn create vite my-project --template preact-ts
+yarn create vite@latest my-project --template preact-ts
 cd my-project
 ```
 Switch off telemetry (optional)

diff --git a/vite-preact-ts.md b/vite-preact-ts.md
@@ -39,9 +39,16 @@ 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 )
+If you are using [yarn-contained](https://github.com/jamesrr39/yarn-contained), add this in `.env` in the project root.
+
+```
+YARN_CONTAINED_PORT_FORWARD=5173
+YARN_CONTAINED_EXTRA_CONTAINER_ARGS=--network host
+```
+
+Now run the project:
 ```
-yarn dev --host
+yarn dev
 ```
 
 Open http://localhost:5173/ and see your project running

diff --git a/vite-preact-ts.md b/vite-preact-ts.md
@@ -62,4 +62,5 @@ Now open the settings menu:
 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`)
 
 ## Notes
-- `SyntaxError: Unexpected token '??='` - check your node.js version - at least [v15 is required](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment)
+- `SyntaxError: Unexpected token '??='` - check your node.js version - at least [v15 is required](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment)
+- Trouble opened zipped dependency source code in VSCode? Try installing this extension: https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs
diff --git a/vite-preact-ts.md b/vite-preact-ts.md
@@ -59,8 +59,7 @@ 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.
-
+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`)
 
 ## Notes
 - `SyntaxError: Unexpected token '??='` - check your node.js version - at least [v15 is required](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment)
diff --git a/vite-preact-ts.md b/vite-preact-ts.md
@@ -10,7 +10,7 @@ Switch off telemetry (optional)
 yarn config set enableTelemetry 0
 ```
 
-Add .gitignore entries:
+Add .gitignore entries [as suggested by yarn](https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored):
 ```
 vite.config.ts.timestamp-*.mjs
 
@@ -48,12 +48,12 @@ Open http://localhost:5173/ and see your project running
 
 ## VSCode
 
-You can also install an SDK to fix the intellisense in vscode. [Other editors are also supported](https://yarnpkg.com/getting-started/editor-sdks).
+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](https://yarnpkg.com/getting-started/editor-sdks).
 
 ```
 yarn dlx @yarnpkg/sdks vscode
 ```
-If you get an error with `Your application tried to access color-convert`, you can should add it: `yarn add -D color-convert`, and then re-run the 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:
 

diff --git a/vite-preact-ts.md b/vite-preact-ts.md
@@ -0,0 +1,66 @@
+# Create and run project
+
+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:
+```
+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
+
+## VSCode
+
+You can also install an SDK to fix the intellisense in vscode. [Other editors are also supported](https://yarnpkg.com/getting-started/editor-sdks).
+
+```
+yarn dlx @yarnpkg/sdks vscode
+```
+If you get an error with `Your application tried to access color-convert`, you can should add it: `yarn add -D color-convert`, and then re-run the 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.
+
+
+## Notes
+- `SyntaxError: Unexpected token '??='` - check your node.js version - at least [v15 is required](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment)