Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 49 additions & 50 deletions src/routes/quick-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,80 +2,79 @@
title: Quick start
---

## Solid playgrounds
## Try Solid online

Experience Solid in your browser by visiting our [interactive playground](https://playground.solidjs.com/).
To experiment with Solid directly in your browser, head over to our [interactive playground](https://playground.solidjs.com/).
Prefer a full development setup? You can set up a complete environment using StackBlitz.
Start with the [TypeScript](https://stackblitz.com/github/solidjs/templates/tree/master/ts) or [JavaScript](https://stackblitz.com/github/solidjs/templates/tree/master/js) templates.

Additionally, we offer a [JavaScript](https://stackblitz.com/github/solidjs/templates/tree/master/js) and [Typescript](https://stackblitz.com/github/solidjs/templates/tree/master/ts) Stackblitz starters, which provide a web-based development environment to get you started.

## Creating a Solid application
## Create a Solid project

:::info[Prerequisites]

- Familiarity with the command line
- Install [Node.js](https://nodejs.org/en) or [Deno](https://deno.com)
- Familiarity with the command line.
- A recent version of [Node.js](https://nodejs.org/en), [Bun](https://bun.sh/), or [Deno](https://deno.com/).
The latest LTS version is recommended.

:::

Solid offers convenient project templates that can help kickstart your development.
To get an application running, follow the steps below based on the language you prefer to use.

### For JavaScript projects

1. Run the following command in your terminal to get the JavaScript starter template:
To create a new Solid application, navigate to the directory where you want to create your project and run the following command:

```package-exec
degit solidjs/templates/js my-app
```package-create
solid
```

2. Navigate to your application's directory:
This command installs and runs [create-solid](https://github.com/solidjs-community/solid-cli/tree/main/packages/create-solid), the official project scaffolding tool for Solid.
The CLI will guide you through a series of prompts, allowing you to choose options such as [starter templates](https://github.com/solidjs/templates), TypeScript support, and whether to include [Solid's full-stack framework, SolidStart](/solid-start):

```bash frame="none"
cd my-app
```
```shell
◆ Project Name
| <solid-project>

3. Install the necessary dependencies:
◆ Is this a SolidStart project?
| ● Yes / ○ No

```package-install-local
```
4. Run the application:
◆ Which template would you like to use?
│ ● ts
│ ○ ts-vitest
│ ○ ts-uvu
│ ○ ts-unocss
│ ○ ts-tailwindcss

```package-run
dev
◆ Use TypeScript?
│ ● Yes / ○ No
```

This will start the development server.
Now, you can open your browser and navigate to `localhost:3000` to see your application running.

### For TypeScript projects
Once the project is created, follow the instructions to install the dependencies and start the development server:

1. To use a TypeScript template, run the following command in your terminal:

```package-exec
degit solidjs/templates/ts my-app
```sh title="npm" tab="package-manager"
│ cd solid-project
│ npm install
│ npm run dev
```
Comment thread
LadyBluenotes marked this conversation as resolved.

2. Navigate to your application's directory:

```bash frame="none"
cd my-app
```sh title="pnpm" tab="package-manager"
│ cd solid-project
│ pnpm install
│ pnpm dev
```

3. Install the necessary dependencies:

```package-install-local
```sh title="yarn" tab="package-manager"
│ cd solid-project
│ yarn install
│ yarn dev
```

4. Run the application:

```package-run
dev
```sh title="bun" tab="package-manager"
│ cd solid-project
│ bun install
│ bun run dev
```

This will start the development server.
Now, you can open your browser and navigate to `localhost:3000` to see your application running.

### Explore more templates
```sh title="deno" tab="package-manager"
│ cd solid-project
│ deno install
│ deno run dev
```

Solid offers a variety of Vite templates to streamline your development process.
These resources are available on [GitHub](https://github.com/solidjs/templates).
You should now have your Solid project running!