|
2 | 2 | title: Quick start |
3 | 3 | --- |
4 | 4 |
|
5 | | -## Solid playgrounds |
| 5 | +## Try Solid online |
6 | 6 |
|
7 | | -Experience Solid in your browser by visiting our [interactive playground](https://playground.solidjs.com/). |
| 7 | +To experiment with Solid directly in your browser, head over to our [interactive playground](https://playground.solidjs.com/). |
| 8 | +Prefer a full development setup? You can set up a complete environment using StackBlitz. |
| 9 | +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. |
8 | 10 |
|
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 |
| 11 | +## Create a Solid project |
12 | 12 |
|
13 | 13 | :::info[Prerequisites] |
14 | 14 |
|
15 | | - - Familiarity with the command line |
16 | | - - Install [Node.js](https://nodejs.org/en) or [Deno](https://deno.com) |
| 15 | +- Familiarity with the command line. |
| 16 | +- A recent version of [Node.js](https://nodejs.org/en), [Bun](https://bun.sh/), or [Deno](https://deno.com/). |
| 17 | + The latest LTS version is recommended. |
17 | 18 |
|
18 | 19 | ::: |
19 | 20 |
|
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: |
| 21 | +To create a new Solid application, navigate to the directory where you want to create your project and run the following command: |
26 | 22 |
|
27 | | -```package-exec |
28 | | -degit solidjs/templates/js my-app |
| 23 | +```package-create |
| 24 | +solid |
29 | 25 | ``` |
30 | 26 |
|
31 | | -2. Navigate to your application's directory: |
| 27 | +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. |
| 28 | +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): |
32 | 29 |
|
33 | | -```bash frame="none" |
34 | | -cd my-app |
35 | | -``` |
| 30 | +```shell |
| 31 | +◆ Project Name |
| 32 | +| <solid-project> |
36 | 33 |
|
37 | | -3. Install the necessary dependencies: |
| 34 | +◆ Is this a SolidStart project? |
| 35 | +| ● Yes / ○ No |
38 | 36 |
|
39 | | -```package-install-local |
40 | | -``` |
41 | | -4. Run the application: |
| 37 | +◆ Which template would you like to use? |
| 38 | +│ ● ts |
| 39 | +│ ○ ts-vitest |
| 40 | +│ ○ ts-uvu |
| 41 | +│ ○ ts-unocss |
| 42 | +│ ○ ts-tailwindcss |
42 | 43 |
|
43 | | -```package-run |
44 | | -dev |
| 44 | +◆ Use TypeScript? |
| 45 | +│ ● Yes / ○ No |
45 | 46 | ``` |
46 | 47 |
|
47 | | -This will start the development server. |
48 | | -Now, you can open your browser and navigate to `localhost:3000` to see your application running. |
49 | | - |
50 | | -### For TypeScript projects |
| 48 | +Once the project is created, follow the instructions to install the dependencies and start the development server: |
51 | 49 |
|
52 | | -1. To use a TypeScript template, run the following command in your terminal: |
53 | | - |
54 | | -```package-exec |
55 | | -degit solidjs/templates/ts my-app |
| 50 | +```sh title="npm" tab="package-manager" |
| 51 | +│ cd solid-project |
| 52 | +│ npm install |
| 53 | +│ npm run dev |
56 | 54 | ``` |
57 | 55 |
|
58 | | -2. Navigate to your application's directory: |
59 | | - |
60 | | -```bash frame="none" |
61 | | -cd my-app |
| 56 | +```sh title="pnpm" tab="package-manager" |
| 57 | +│ cd solid-project |
| 58 | +│ pnpm install |
| 59 | +│ pnpm dev |
62 | 60 | ``` |
63 | 61 |
|
64 | | -3. Install the necessary dependencies: |
65 | | - |
66 | | -```package-install-local |
| 62 | +```sh title="yarn" tab="package-manager" |
| 63 | +│ cd solid-project |
| 64 | +│ yarn install |
| 65 | +│ yarn dev |
67 | 66 | ``` |
68 | 67 |
|
69 | | -4. Run the application: |
70 | | - |
71 | | -```package-run |
72 | | -dev |
| 68 | +```sh title="bun" tab="package-manager" |
| 69 | +│ cd solid-project |
| 70 | +│ bun install |
| 71 | +│ bun run dev |
73 | 72 | ``` |
74 | 73 |
|
75 | | -This will start the development server. |
76 | | -Now, you can open your browser and navigate to `localhost:3000` to see your application running. |
77 | | - |
78 | | -### Explore more templates |
| 74 | +```sh title="deno" tab="package-manager" |
| 75 | +│ cd solid-project |
| 76 | +│ deno install |
| 77 | +│ deno run dev |
| 78 | +``` |
79 | 79 |
|
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). |
| 80 | +You should now have your Solid project running! |
0 commit comments