Project setup

To create your first SolidStart application, create a directory, change into that directory, and initialize solid.

bash
# npm
npm init solid@latest
# pnpm
pnpm create solid
# bun
bun create solid
bash
# npm
npm init solid@latest
# pnpm
pnpm create solid
# bun
bun create solid

You will get a list of templates from which to choose. You can view the code for each of these options in the SolidStart repository.

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

Next, you'll be asked whether to use Server Side Rendering and TypeScript. Choose your desired options to continue.

Now that the appropriate template has downloaded, you can install dependencies:

bash
# npm
npm install
# pnpm
pnpm install
bash
# npm
npm install
# pnpm
pnpm install

Your app is now set up!

Project files

When you look inside your new application directory, you should see a file structure similar to this:

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

Note: Your file extensions may vary slightly if you chose different configuration options in the previous step.

To get our bearings, let's quickly review what each directory and file does in this structure:

  • node_modules/ - the node_modules directory contains any third-party dependencies added to your project.
  • public/ - the public directory contains publicly-available assets (images, styles, fonts, etc.) for your application. You can read more about using static assets.
  • src/ - the src directory is where most of your SolidStart application code will live. It's aliased to ~/ for importing in your code.
  • src/routes/ - this is where your file routes/pages will be located. You should read more about routing.
  • src/entry-client.tsx - the entry-client.tsx file is what loads and hydrates the JavaScript for our application on the client side (in browser). In many cases, you won't need to modify this file.
  • src/entry-server.tsx - the entry-server.tsx handles requests on the server. In many cases, you won't 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.