Getting Started

The easiest way to get started with Solid is to use the SolidStart starter. SolidStart is a collection of templates that can be used to quickly bootstrap a new Solid application.

1. Install SolidStart

Once you have created a directory for your new application, you can initialize SolidStart with the following command:

2. Choose a template

When you run the command above, SolidStart will prompt you to choose a template for your new application. You can see a list of these options in the SolidStart repository.

? Which template do you want to use? › - Use arrow-keys. Return to submit.
❯   bare
    hackernews
    with-auth
    with-mdx
    with-tailwindcss
    with-vitest

Following the prompts, you will be asked whether you want to use Server Side Rendering and TypeScript. Choose your desired options to continue.

3. Install dependencies

Once you have chosen your template and configuration options, you can navigate to the directory you created and run the following command to install dependencies:

After this command has finished, your new SolidStart application is ready to go!

4. Run your application

To run your application locally, you can use the following command:

Your application should now be running locally on port 3000. You can view it by navigating to http://localhost:3000.

Project files

SolidStart will create a new directory for your project, and populate it with the necessary files and directories to get you started. These files and directories are the basic structure of a SolidStart application, and you can modify them to suit your needs. The default structure of a SolidStart application looks like this:

public/
src/
├── routes/
│   ├── index.tsx
├── entry-client.tsx
├── entry-server.tsx
├── app.tsx

Note: Depending on the configuration options you chose when creating your project, your file structure may look slightly different. For example, if you chose to use JavaScript rather than TypeScript, your file extensions will be .jsx instead of .tsx.

Each directory and file in this structure serves a specific purpose in your SolidStart application:

• public/ - contains the publicly-accessible assets for your application. This is where images, fonts, and other files that you want to be accessible to the public should be placed.
• src/ - where your Start application code will live. It is aliased to ~/ for importing in your code.
• src/routes/ - any files or pages will be located in this directory. You can learn more about the routes folder in the routing section.
• src/entry-client.tsx - this file is what loads and hydrates the JavaScript for our application on the client side (in browser). In most cases, you will not need to modify this file.
• src/entry-server.tsx - this file will handle requests on the server. Like entry-client.tsx, in most cases you will not need to modify this file.
• app.tsx - this is the HTML root of your application both for client and server rendering. You can think of this as the shell inside which your application will be rendered.