Skip to content

Commit e1998f2

Browse files
chenjiahanchenjiahan
authored
docs: document create-rstack in quick start (#300)
1 parent 1f15c86 commit e1998f2

2 files changed

Lines changed: 182 additions & 4 deletions

File tree

‎website/docs/en/guide/quick-start.mdx‎

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
description: 'Install Rstack CLI, add project scripts, and configure the Rstack JavaScript toolchain.'
2+
description: 'Create a Rstack project or add Rstack CLI to an existing project and configure the Rstack JavaScript toolchain.'
33
---
44

55
# Quick start
66

77
import { PackageManagerTabs } from '@rspress/core/theme';
88

9-
Rstack CLI brings the Rstack toolchain together with one CLI and one configuration file. This guide adds Rstack to an existing project and introduces the available workflows.
9+
Rstack CLI brings the Rstack toolchain together with one CLI and one configuration file. This guide shows how to create a new Rstack project or add Rstack to an existing project, and introduces the available workflows.
1010

1111
## Environment preparation
1212

@@ -24,6 +24,95 @@ Rstack requires Node.js 22.12.0 or higher when using Node.js as the runtime.
2424

2525
:::
2626

27+
## Create a Rstack project
28+
29+
[create-rstack](https://www.npmjs.com/package/create-rstack) lets you quickly create an application, library, or documentation site with Rstack configured. We recommend using [pnpm](https://pnpm.io/) as your package manager.
30+
31+
<PackageManagerTabs
32+
command={{
33+
pnpm: 'pnpm create rstack@latest',
34+
npm: 'npm create rstack@latest',
35+
yarn: 'yarn create rstack',
36+
bun: 'bun create rstack@latest',
37+
deno: 'deno init --npm rstack@latest',
38+
}}
39+
/>
40+
41+
Follow the prompts to complete the setup.
42+
43+
After creating the project, do the following:
44+
45+
- Run `pnpm install` (or your package manager's install command) to install dependencies.
46+
- Run `pnpm run dev` to start the development server or watch mode.
47+
48+
### Templates
49+
50+
When creating a project, choose from the following templates provided by `create-rstack`:
51+
52+
| Project type | Templates |
53+
| ------------------ | ---------------------------------------------------------- |
54+
| Web application | Vanilla JavaScript, React, Preact, Vue, Lit, Svelte, Solid |
55+
| Library | Node.js, React, Vue, Svelte, Solid |
56+
| Documentation site | Single language, multilingual |
57+
58+
All application and library templates are available in both JavaScript and TypeScript.
59+
60+
### Current directory
61+
62+
To create a project in the current directory, set the project name or path to `.`:
63+
64+
```
65+
◆ Create Rstack Project
66+
│
67+
◇ Project name or path
68+
│ .
69+
│
70+
◇ "." is not empty, please choose:
71+
│ Continue and override files
72+
```
73+
74+
### Non-interactive mode
75+
76+
[create-rstack](https://www.npmjs.com/package/create-rstack) supports a non-interactive mode via command-line options. This mode skips prompts and creates the project directly, which is useful for scripts, CI, and automation.
77+
78+
For example, the following command creates a TypeScript React application in the `my-project` directory:
79+
80+
```bash
81+
npx -y create-rstack@latest my-project --template app-react-ts
82+
83+
# Using abbreviations
84+
npx -y create-rstack@latest my-project -t app-react-ts
85+
86+
# Skip Git repository initialization
87+
npx -y create-rstack@latest my-project -t app-react-ts --no-git
88+
```
89+
90+
All CLI flags supported by `create-rstack`:
91+
92+
```
93+
Usage: create-rstack [dir] [options]
94+
95+
Options:
96+
97+
-h, --help display help for command
98+
-d, --dir <dir> create project in specified directory
99+
-t, --template <tpl> specify the template to use
100+
--no-git skip Git repository initialization
101+
--override override files in target directory
102+
--packageName <name> specify the package name
103+
--template-version <ver> specify the npm template version
104+
105+
Available templates:
106+
107+
app-vanilla-js, app-vanilla-ts, app-react-js, app-react-ts,
108+
app-preact-js, app-preact-ts, app-vue-js, app-vue-ts,
109+
app-lit-js, app-lit-ts, app-svelte-js, app-svelte-ts,
110+
app-solid-js, app-solid-ts, lib-node-js, lib-node-ts,
111+
lib-react-js, lib-react-ts, lib-vue-js, lib-vue-ts,
112+
lib-svelte-js, lib-svelte-ts, lib-solid-js, lib-solid-ts,
113+
doc-basic, doc-i18n
114+
```
115+
27116
## Install Rstack
28117

29118
Install [`rstack`](https://www.npmjs.com/package/rstack) as a development dependency in a project that has a `package.json`:

‎website/docs/zh/guide/quick-start.mdx‎

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
description: '安装 Rstack CLI、添加项目脚本，并配置 Rstack JavaScript 工具链。'
2+
description: '创建 Rstack 项目，或在现有项目中安装 Rstack CLI 并配置 Rstack JavaScript 工具链。'
33
---
44

55
# 快速上手 \{#quick-start}
66

77
import { PackageManagerTabs } from '@rspress/core/theme';
88

9-
Rstack CLI 通过统一的命令行和配置文件整合 Rstack 工具链。本指南将介绍如何在现有项目中添加 Rstack，以及可以使用的工作流。
9+
Rstack CLI 通过统一的命令行和配置文件整合 Rstack 工具链。本指南将介绍如何创建新的 Rstack 项目或在现有项目中添加 Rstack，以及可以使用的工作流。
1010

1111
## 环境准备 \{#environment-preparation}
1212

@@ -24,6 +24,95 @@ Rstack 支持使用 [Node.js](https://nodejs.org/)、[Deno](https://deno.com/)
2424

2525
:::
2626

27+
## 创建 Rstack 项目 \{#create-a-rstack-project}
28+
29+
使用 [create-rstack](https://www.npmjs.com/package/create-rstack) 可以快速创建已配置好 Rstack 的应用、库或文档站点。推荐使用 [pnpm](https://pnpm.io/) 作为包管理器。
30+
31+
<PackageManagerTabs
32+
command={{
33+
pnpm: 'pnpm create rstack@latest',
34+
npm: 'npm create rstack@latest',
35+
yarn: 'yarn create rstack',
36+
bun: 'bun create rstack@latest',
37+
deno: 'deno init --npm rstack@latest',
38+
}}
39+
/>
40+
41+
按照提示操作即可完成创建。
42+
43+
项目创建完成后，执行以下步骤：
44+
45+
- 执行 `pnpm install`（或其他包管理器的 install 命令）安装依赖。
46+
- 执行 `pnpm run dev` 启动开发服务器或监听模式。
47+
48+
### 模板 \{#templates}
49+
50+
创建项目时，可选择 `create-rstack` 提供的下列模板：
51+
52+
| 项目类型 | 模板 |
53+
| -------- | ------------------------------------------------------- |
54+
| Web 应用 | 原生 JavaScript、React、Preact、Vue、Lit、Svelte、Solid |
55+
| 库 | Node.js、React、Vue、Svelte、Solid |
56+
| 文档站点 | 单语言、多语言 |
57+
58+
所有应用和库模板均提供 JavaScript 和 TypeScript 版本。
59+
60+
### 当前目录 \{#current-directory}
61+
62+
如需在当前目录中创建项目，将项目名称或路径设置为 `.`：
63+
64+
```
65+
◆ Create Rstack Project
66+
│
67+
◇ Project name or path
68+
│ .
69+
│
70+
◇ "." is not empty, please choose:
71+
│ Continue and override files
72+
```
73+
74+
### 非交互模式 \{#non-interactive-mode}
75+
76+
[create-rstack](https://www.npmjs.com/package/create-rstack) 支持通过命令行选项进入非交互模式。该模式会跳过提示并直接创建项目，适合脚本、CI 和自动化场景。
77+
78+
例如，以下命令将在 `my-project` 目录中创建一个 TypeScript React 应用：
79+
80+
```bash
81+
npx -y create-rstack@latest my-project --template app-react-ts
82+
83+
# 使用缩写
84+
npx -y create-rstack@latest my-project -t app-react-ts
85+
86+
# 跳过 Git 仓库初始化
87+
npx -y create-rstack@latest my-project -t app-react-ts --no-git
88+
```
89+
90+
`create-rstack` 支持的全部 CLI 选项如下：
91+
92+
```
93+
Usage: create-rstack [dir] [options]
94+
95+
Options:
96+
97+
-h, --help display help for command
98+
-d, --dir <dir> create project in specified directory
99+
-t, --template <tpl> specify the template to use
100+
--no-git skip Git repository initialization
101+
--override override files in target directory
102+
--packageName <name> specify the package name
103+
--template-version <ver> specify the npm template version
104+
105+
Available templates:
106+
107+
app-vanilla-js, app-vanilla-ts, app-react-js, app-react-ts,
108+
app-preact-js, app-preact-ts, app-vue-js, app-vue-ts,
109+
app-lit-js, app-lit-ts, app-svelte-js, app-svelte-ts,
110+
app-solid-js, app-solid-ts, lib-node-js, lib-node-ts,
111+
lib-react-js, lib-react-ts, lib-vue-js, lib-vue-ts,
112+
lib-svelte-js, lib-svelte-ts, lib-solid-js, lib-solid-ts,
113+
doc-basic, doc-i18n
114+
```
115+
27116
## 安装 Rstack \{#install-rstack}
28117

29118
在已有 `package.json` 的项目中，将 [`rstack`](https://www.npmjs.com/package/rstack) 安装为开发依赖：

0 commit comments

Comments
 (0)