Installing Solid

You can work with Solid using a browser-based editor, or install it locally on your computer.

In the browser

The easiest way to get started with Solid is to choose a browser-based option.

  • StackBlitz Starters: Stackblitz is a web-based development environment. You can choose from either the JavaScript starter or the TypeScript starter. These links will set up a full project environment for you, and everything will run directly in your browser.

In your local environment

To run Solid on your own computer, make sure you have Node.js installed. Then, run one of these commands, which pull from our Vite templates.

JavaScript template

bash
npx degit solidjs/templates/js my-app
cd my-app
npm install # or yarn or pnpm
npm run dev # or yarn or pnpm
bash
npx degit solidjs/templates/js my-app
cd my-app
npm install # or yarn or pnpm
npm run dev # or yarn or pnpm

TypeScript template

bash
npx degit solidjs/templates/ts my-app
cd my-app
npm install # or yarn or pnpm
npm run dev # or yarn or pnpm
bash
npx degit solidjs/templates/ts my-app
cd my-app
npm install # or yarn or pnpm
npm run dev # or yarn or pnpm

If everything has been installed correctly, the final command should start the demo application on port 3000. Navigate to https://localhost:3000 and you should see the following demo app:

Screenshot of the Solid template running in a browser. There's a Solid logo rotating.

JavaScript vs TypeScript

For this tutorial, it isn't important whether you choose the JavaScript or the TypeScript template. If you know TypeScript, feel free to choose that one. In the TypeScript template, code files will end in .ts and .tsx instead of .js and .jsx.

Understanding the Project Structure

These templates set up a project with many files, but it isn't important to understand them all now. We'll guide you through files as you need them. For now, here are the basics:

  • We're using Vite to run our code. Vite is a tool that allows us to import one file from another and use plugins to improve the development experience. When we're ready to deploy our app, Vite bundles our code. The vite.config.js file configures the Vite project.
  • Everything we'll be doing in this tutorial takes place in the src folder.
  • The starting point for our site is index.html. This provides a basic HTML skeleton, and links to src/index.jsx.
  • src/index.jsx is the starting point for our Solid app. This in turn imports src/App.jsx, which is our first component. We'll discuss components next!
A screenshot of the file browser in Stackblitz, displaying all of the files in the template