Creating a project

A Solid project is built with Vite — a development server and bundler that understands JSX and refreshes the page instantly when you save a file. The starting project is copied from the official templates repository.

What you need

Node.js 20 or newer and npm, which comes with it:

node -v
npm -v

Creating the project

npx degit solidjs/templates/js todo-app
cd todo-app
npm install
npm run dev

degit copies the js template from the solidjs/templates repository into the todo-app folder. After npm run dev the terminal shows the development server address, in this template http://localhost:3000. Open it and you will see the start page with the Solid logo.

There is also an interactive wizard, npm create solid@latest: it asks questions and can create SolidStart projects as well. Either way works for the course, as long as you end up with a Solid project on Vite without SolidStart.

Project structure

todo-app/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── index.jsx
    ├── index.css
    ├── App.jsx
    ├── App.module.css
    └── logo.svg

File	What it contains
`index.html`	The page with an empty `div` with the id `root`
`src/index.jsx`	The entry point: mounts `App` on the page
`src/App.jsx`	The main component, where you start
`vite.config.js`	Vite settings and the Solid plugin
`package.json`	Dependencies and the `dev`, `build`, `serve` commands

The entry point

// src/index.jsx
/* @refresh reload */
import { render } from 'solid-js/web';
import './index.css';
import App from './App';
 
const root = document.getElementById('root');
 
render(() => <App />, root);

The render function from the solid-js/web package mounts a component into the root element. Its first argument is a function that returns JSX, not the JSX itself.

Vite settings

// vite.config.js
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
 
export default defineConfig({
  plugins: [solidPlugin()],
  server: { port: 3000 },
});

The vite-plugin-solid plugin turns JSX into Solid code. The server line sets the development server port.

First change

Replace the contents of src/App.jsx:

// src/App.jsx
export default function App() {
  return <h1>My tasks</h1>;
}

Save the file — the page in the browser refreshes by itself and shows the heading "My tasks".

Common mistake

Writing render(<App />, root) in src/index.jsx, as in old React. Solid expects a function: render(() => <App />, root). Without the arrow the page stays empty and the browser console shows an error.

Thanks for reading!