Setting Up a Solid Project

The fastest way to start a Solid project is Vite's official Solid template, run through the create script that Solid's team maintains:

npm create vite@latest my-solid-app -- --template solid-ts
cd my-solid-app
npm install
npm run dev

Drop the -ts suffix (solid) if you'd rather write plain JavaScript. Either way, Vite gives you instant dev-server startup and hot module reloading, which matters more for Solid than you might expect — because components only run once, a naive HMR setup could easily leave stale reactive graphs around. The Solid Vite plugin handles this correctly out of the box.

What's in the generated project

The two files worth understanding immediately are the entry point and the root component:

// index.jsx
import { render } from "solid-js/web";
import App from "./App";

render(() => <App />, document.getElementById("root"));

render is Solid's equivalent of React's createRoot(...).render(...). Notice it takes a function that returns JSX, not JSX directly — () => <App />, not <App />. That's not a stylistic choice; Solid needs a function it can call inside a reactive context so that everything <App /> reads gets tracked from the very top of the tree. Passing JSX directly (without the wrapping function) is a mistake you'll see flagged constantly once you know to look for it.

// App.jsx
import { createSignal } from "solid-js";

function App() {
  const [name] = createSignal("Solid");
  return <h1>Hello, {name()}!</h1>;
}

export default App;

Nothing here should look unfamiliar syntactically if you know JSX — a function that returns markup, imported and rendered elsewhere. The behavior underneath is what's new, and you'll dig into that starting with the next lesson.

The compiler is doing real work

One detail worth knowing early: Solid ships a Babel/Vite plugin (babel-preset-solid, wired up automatically by the Vite template) that transforms your JSX at build time into direct DOM-manipulation code — not React.createElement calls, but actual document.createElement/appendChild instructions plus small reactive bindings for the dynamic parts. This is why Solid components can only be used within a Solid-aware build pipeline — you can't drop Solid JSX into a plain Babel/React setup and expect it to work, because the compilation target is different from the start.

Verifying it's running

Once npm run dev is up, open the printed local URL. You should see "Hello, Solid!" rendered. Try editing the string inside createSignal("Solid") and saving — Vite's HMR should update the page without a full reload. From here, every lesson in this course assumes this project shape: an index.jsx entry point calling render, and component files that export a function returning JSX.