[fix] get it working for local system on latest version

Author: dummdidumm

README.md

@@ -8,6 +8,16 @@ This repo uses [pnpm](https://pnpm.io/).
 
 ## Running the app
 
-At the moment, the only way this works is if you clone the repo, add an `.env` file with `VITE_USE_FILESYSTEM=true` in it and run the app locally with `pnpm dev` or `pnpm build && pnpm preview`.
+First, run `node scripts/create-common-bundle`. This packages up everything that's needed to run a SvelteKit app (Vite, Esbuild, SvelteKit, Svelte compiler etc) which can subsequently be unpacked on a server to create and run and instance of a SvelteKit application (which powers the output window of the tutorial).
 
-In future, it will run both locally and on the web (using [WebContainers](https://blog.stackblitz.com/posts/introducing-webcontainers/)).
+The next steps depend on whether you want to run this locally in filesystem mode, or in WebContainer mode. For now, it works with filesystem mode only locally. In future, it will run both locally and on the web (using [WebContainers](https://blog.stackblitz.com/posts/introducing-webcontainers/)).
+
+### Local/filesystem mode
+
+1. add an `.env` file with `VITE_USE_FILESYSTEM=true` in it
+2. Run the app locally with `pnpm dev` or `pnpm build && pnpm preview`.
+
+### WebContainer mode
+
+1. if an `.env` file exists, modify it so there's `VITE_USE_FILESYSTEM=` in it
+2. Run the app locally with `pnpm dev` or `pnpm build && pnpm preview`.

content/tutorial/common/vite.config.js

@@ -2,5 +2,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */
 export default {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server: {
+		fs: {
+			strict: false
+		}
+	}
 };

src/routes/backend/apps.js

@@ -53,10 +53,10 @@ export async function create({ files }) {
 
 	// TODO this enables embedding on cross-origin sites, which is
 	// necessary for the JSNation talk, but will currently break if an app
-	// already has a src/hooks.js file (though it could be worked
+	// already has a src/hooks.server.js file (though it could be worked
 	// around easily enough if necessary)
-	if (!files.find((stub) => stub.name === '/src/hooks.js')) {
-		fs.writeFileSync(`.apps/${id}/src/hooks.js`, hooks_src);
+	if (!files.find((stub) => stub.name === '/src/hooks.server.js')) {
+		fs.writeFileSync(`.apps/${id}/src/hooks.server.js`, hooks_src);
 	}
 
 	const port = await ports.find(3001);