|
2 | 2 | title: Quick start
|
3 | 3 | ---
|
4 | 4 |
|
5 |
| -## Solid playgrounds |
| 5 | +You can create a new Solid application using the Solid CLI: |
6 | 6 |
|
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 |
29 | 9 | ```
|
30 | 10 |
|
31 |
| -2. Navigate to your application's directory: |
| 11 | +The CLI will prompt you for a few details about your project: |
32 | 12 |
|
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. |
36 | 19 |
|
37 |
| -3. Install the necessary dependencies: |
| 20 | +Then, follow the on-screen instructions to install dependencies and run the development server. |
38 | 21 |
|
39 |
| -```package-install-local |
40 |
| -``` |
41 |
| -4. Run the application: |
| 22 | +## Starter templates |
42 | 23 |
|
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). |
46 | 27 |
|
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: |
49 | 31 |
|
50 |
| -### For TypeScript projects |
| 32 | +`https://stackblitz.com/github/solidjs/templates/tree/master/<template-name>` |
51 | 33 |
|
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: |
53 | 35 |
|
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 | +::: |
77 | 38 |
|
78 |
| -### Explore more templates |
| 39 | +## Solid playground |
79 | 40 |
|
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