---
title: Quick Start
sidebar_position: 2
---

# Quick Start

## Environment

import Prerequisites from "@site-docs-en/components/prerequisites"

<Prerequisites />

## Installation

Modern.js provides the `@modern-js/create` tool to create projects. It does not require global installation and can be run on-demand using `npx`.

You can create a project in an existing empty directory:

```bash
mkdir myapp && cd myapp
npx @modern-js/create@latest
```

You can also create a project directly in a new directory:

```bash
npx @modern-js/create@latest myapp
```

## Initialize

import InitApp from "@site-docs-en/components/init-app"

<InitApp />

## Development

import DebugApp from "@site-docs-en/components/debug-app"

<DebugApp />

## Configuration

In a Modern.js project created using `@modern-js/create`, a `modern.config.ts` file is generated by default.

You can modify the configuration through this file to override the default behavior of Modern.js. For example, to enable SSR, add the following configuration:

```ts
import { appTools, defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  runtime: {
    router: true,
  },
  server: {
    ssr: true,
  },
  plugins: [appTools({
      bundler: 'rspack', // Set to 'webpack' to enable webpack
  }),],
});
```

After running `pnpm run dev` again, you can find that the project has completed page rendering on the server in the browser's Network menu.

## Core npm Package

In a newly created project, the `@modern-js/app-tools` npm package is installed by default. It is the core package of the Modern.js framework and provides the following capabilities:

- It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
- It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more.
- It integrates Rsbuild, providing build capabilities.
- It integrates Modern.js Server, providing capabilities for development and production servers.

`@modern-js/app-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `appTools` in the `plugins` field of the configuration file:

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

export default defineConfig({
  plugins: [appTools()],
});
```

## Build the project

To build the production artifacts of the project, run `pnpm run build` in the project:

```bash
$ pnpm run build

> modern build

  Modern.js Framework

info    Starting production build...
info    Type checker is enabled. It may take some time.
ready   Client compiled in 6.19 s
info    Production file sizes:

  File                                       Size        Gzipped
  dist/routes-manifest.json                  0.74 kB     0.28 kB
  dist/static/css/async/page.d7915515.css    1.4 kB      0.69 kB
  dist/static/js/main.5ae469e7.js            3.0 kB      1.3 kB
  dist/html/main/index.html                  6.0 kB      2.6 kB
  dist/static/js/async/page.ddc8a4c1.js      19.2 kB     6.7 kB
  dist/static/js/34.171fffdb.js              21.3 kB     7.1 kB
  dist/static/js/lib-router.8995a55e.js      55.3 kB     18.1 kB
  dist/static/js/lib-lodash.53ec3384.js      71.4 kB     24.8 kB
  dist/static/js/lib-react.b5856db9.js       140.0 kB    45.2 kB
  dist/static/js/lib-polyfill.86c452b3.js    213.3 kB    69.9 kB

  Total size:  531.8 kB
  Gzipped size:  176.7 kB
```

By default, the build artifacts are generated in `dist/`, with the following directory structure:

```
dist
├── html
│   └── main
├── modern.config.json
├── route.json
├── routes-manifest.json
└── static
    ├── css
    └── js
```

> If you need to customize the directory of the build artifacts, please refer to [Output files](/guides/basic-features/output-files).

## Verify

Run `pnpm run serve` in the project to verify whether the build artifacts run normally locally:

```bash
$ pnpm run serve

> modern serve

  Modern.js Framework

info    Starting production server...

  > Local:    http://localhost:8080/
  > Network:  http://192.168.0.1:8080/
```

Open `http://localhost:8000/` in the browser, and the content should be consistent with that of `pnpm run dev`.

## Deployment

import Deploy from "@site-docs-en/components/deploy"

<Deploy />
