@modern-js/doc-tools-doc/docs/en/guide/start/getting-started.mdx

Website for @modern-js/doc-tools

# Quick Start

## 1. Initialize the project

### Method 1: Create via CLI

You can create a Modern.js Doc project using the Modern.js scaffold command:

```bash
# `modern-doc-app` is the project name
npx @modern-js/create@latest modern-doc-app
```

Select `Doc Site` type and then select the package manager to complete the project creation.

### Method 2: Manual Creation

First, you can create a new directory with the following command:

```bash
mkdir modern-doc-app && cd modern-doc-app
```

Execute `npm init -y` to initialize a project. You can install Modern.js Doc using npm, yarn or pnpm:

import { Tabs, Tab } from '@theme';

<Tabs values={[{ label: 'npm' }, { label: 'yarn' }, { label: 'pnpm' }]}>
  <Tab>

```sh
npm install @modern-js/doc-tools typescript -D
```

  </Tab>

<Tab>

```sh
yarn add @modern-js/doc-tools typescript -D
```

</Tab>

<Tab>

```sh
pnpm install @modern-js/doc-tools typescript -D
```

</Tab>

</Tabs>

Then create the file with the following command

```bash
mkdir docs && echo '# Hello World' > docs/index.md
```

Add the following script to `package.json`:

```json
{
  "scripts": {
    "dev": "modern dev",
    "build": "modern build",
    "preview": "modern preview"
  }
}
```

Then initialize a configuration file `modern.config.ts`:

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';
import path from 'path';

export default defineConfig({
  doc: {
    root: path.join(__dirname, 'docs'),
  },
  plugins: [docTools()],
});
```

And then create `tsconfig.json`, add the following config:

```ts
{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react-jsx"
  }
}
```

## 2. Start Dev Server

Start the local development service with the following command:

```bash
npm run dev
```

## 3. Build in Production

Build the production bundle with the following command
:

```bash
npm run build
```

By default, Modern.js Doc will set `doc_build` as the output directory.

## 4. Preview in local environment

Start the local preview service with the following command:

```bash
npm run preview
```