diff --git a/src/routes/quick-start.mdx b/src/routes/quick-start.mdx index b73b61f12..b0a0d8859 100644 --- a/src/routes/quick-start.mdx +++ b/src/routes/quick-start.mdx @@ -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 +| -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 ``` -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!