React
Mount, install, and preview a React project powered by Vite.
Complete the quickstart setup, then mount a React project:
await startpod.mount({
"package.json": {
file: {
contents: JSON.stringify({
type: "module",
scripts: { dev: "vite" },
dependencies: {
"@vitejs/plugin-react": "^4.3.0",
vite: "^5.4.0",
react: "^18.3.0",
"react-dom": "^18.3.0",
},
devDependencies: {},
}),
},
},
"index.html": {
file: {
contents:
'<div id="root"></div><script type="module" src="/src/main.jsx"></script>',
},
},
src: {
directory: {
"main.jsx": {
file: {
contents: `
import React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
function App() {
return <h1>Hello from Startpod</h1>;
}
createRoot(document.getElementById('root')).render(<App />);
`,
},
},
"styles.css": {
file: { contents: "body { font-family: system-ui; padding: 2rem; }" },
},
},
},
})Install and start the project:
const install = await startpod.spawn("npm", ["install"])
if ((await install.exit) !== 0) throw new Error("Install failed")
await startpod.spawn("npm", ["run", "dev"])Writes to src/main.jsx or src/styles.css flow through Vite's normal update path.
Try a live preview
The example starts automatically. Edit App.jsx or style.css and watch the preview update. The terminal shows Vite's output.
Loading editor…