Skip to content

Commit 5a89388

Browse files
committed
Improve Solid quick start
1 parent 29603cb commit 5a89388

File tree

1 file changed

+24
-64
lines changed

1 file changed

+24
-64
lines changed

src/routes/quick-start.mdx

Lines changed: 24 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,40 @@
22
title: Quick start
33
---
44

5-
## Solid playgrounds
5+
You can create a new Solid application using the Solid CLI:
66

7-
Experience Solid in your browser by visiting our [interactive playground](https://playground.solidjs.com/).
8-
9-
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.
10-
11-
## Creating a Solid application
12-
13-
:::info[Prerequisites]
14-
15-
- Familiarity with the command line
16-
- Install [Node.js](https://nodejs.org/en) or [Deno](https://deno.com)
17-
18-
:::
19-
20-
Solid offers convenient project templates that can help kickstart your development.
21-
To get an application running, follow the steps below based on the language you prefer to use.
22-
23-
### For JavaScript projects
24-
25-
1. Run the following command in your terminal to get the JavaScript starter template:
26-
27-
```package-exec
28-
degit solidjs/templates/js my-app
7+
```package-create
8+
solid
299
```
3010

31-
2. Navigate to your application's directory:
11+
The CLI will prompt you for a few details about your project:
3212

33-
```bash frame="none"
34-
cd my-app
35-
```
13+
- The name of your project.
14+
- Whether you want to use [SolidStart](/solid-start).
15+
For full-stack projects, we recommend using SolidStart.
16+
SolidStart is a meta-framework for Solid that provides features such as file-based routing, nested routing, and multiple rendering modes.
17+
- The starter template you wish to use.
18+
- Whether you want to use TypeScript.
3619

37-
3. Install the necessary dependencies:
20+
Then, follow the on-screen instructions to install dependencies and run the development server.
3821

39-
```package-install-local
40-
```
41-
4. Run the application:
22+
## Starter templates
4223

43-
```package-run
44-
dev
45-
```
24+
Solid offers a variety of starter templates for popular frameworks and libraries.
25+
You can kickstart your project with one of our templates using the Solid CLI.
26+
Alternatively, you can clone them directly from our [templates repository](https://github.com/solidjs/templates).
4627

47-
This will start the development server.
48-
Now, you can open your browser and navigate to `localhost:3000` to see your application running.
28+
:::tip[StackBlitz]
29+
You can try our templates directly in your browser using [StackBlitz](https://stackblitz.com/).
30+
To do this, replace `<template-name>` in the following URL with the name of the template and open it in your browser:
4931

50-
### For TypeScript projects
32+
`https://stackblitz.com/github/solidjs/templates/tree/master/<template-name>`
5133

52-
1. To use a TypeScript template, run the following command in your terminal:
34+
For example, the link below opens a fully-featured development environment in your browser for our TypeScript template:
5335

54-
```package-exec
55-
degit solidjs/templates/ts my-app
56-
```
57-
58-
2. Navigate to your application's directory:
59-
60-
```bash frame="none"
61-
cd my-app
62-
```
63-
64-
3. Install the necessary dependencies:
65-
66-
```package-install-local
67-
```
68-
69-
4. Run the application:
70-
71-
```package-run
72-
dev
73-
```
74-
75-
This will start the development server.
76-
Now, you can open your browser and navigate to `localhost:3000` to see your application running.
36+
[https://stackblitz.com/github/solidjs/templates/tree/master/ts](https://stackblitz.com/github/solidjs/templates/tree/master/ts)
37+
:::
7738

78-
### Explore more templates
39+
## Solid playground
7940

80-
Solid offers a variety of Vite templates to streamline your development process.
81-
These resources are available on [GitHub](https://github.com/solidjs/templates).
41+
If you want to try Solid in your browser, visit our [interactive playground](https://playground.solidjs.com/).

0 commit comments

Comments
 (0)