How to develop locally?

[epogrebnyak]

Thanks for bringing Pyodide into vitepress! I trying replicate your repo by doing the following:

git clone https://github.com/zqianem/vitepress-python-editor.git vite-editor
cd vite-editor
npm install
npx vitepress dev docs

not sucessful though - the fenced code blocks are static. Could this be headers issue or something else?
Will be indebted to your advice.

[epogrebnyak]

I also tried npm run build & npm run preview and noticed the first snippet on a page is not editable (no reset code link), and the second is not runnable (no run icon). Maybe pyodide takes too long to load and hangs for some reason, but on https://vitepress-python-editor.netlify.app/ there is no delay at all.

[zqianem]

Try the following, using pnpm:

git clone https://github.com/zqianem/vitepress-python-editor.git
cd vitepress-python-editor
pnpm i
pnpm dev

This is similar to doing npm i && npx vitepress dev. Running npx vitepress dev docs as in the first comment doesn't work because vitepress needs to run with the config at .vitepress/config.ts, which isn't under ./docs but the repo root.

Running the preview requires patches to applied to vitepress using pnpm, which is why it didn't work with npm:

pnpm build
pnpm preview

Note that running the development setup is not necessary to use the editor in your own docs; follow this guide instead.