Project setup
Using a starter (recommended)
To create your first SolidStart application, create a directory, change into that directory, and initialize solid
.
bash
# npmmkdir my-app && cd my-appnpm init solid@latest# pnpmmkdir my-app && cd my-apppnpm create solid
bash
# npmmkdir my-app && cd my-appnpm init solid@latest# pnpmmkdir my-app && cd my-apppnpm 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.❯ barehackernewswith-authwith-mdxwith-tailwindcsswith-vitest
bash
? Which template do you want to use? › - Use arrow-keys. Return to submit.❯ barehackernewswith-authwith-mdxwith-tailwindcsswith-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
# npmnpm install# pnpmpnpm install
bash
# npmnpm install# pnpmpnpm install
Your app is now set up! You can run it locally by running
bash
# npmnpm run dev# pnpmpnpm dev
bash
# npmnpm run dev# pnpmpnpm dev
Your application should now be running locally on port 3000. You can view it by navigating to http://localhost:3000.
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├── root.tsx
node_modules/public/src/├── routes/│ ├── index.tsx├── entry-client.tsx├── entry-server.tsx├── root.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. - root.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.