StartpodDocs

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…

On this page