---
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 for creating new projects. You can use `npx` to run it.

You can create the project in an existing empty directory:

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

You can also directly create the project as a new folder:

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

## Initialize

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

<InitApp />

## Development

Execute `pnpm run dev` in the project to start the project:

```bash
$ pnpm run dev

> modern dev

info    Starting dev server...
info    App running at:

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

 Client ✔ done in 76.10ms
```

Open `http://localhost:8000/` in your browser and you will see the following:

![dev](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/dev.png)

## Configuration

The `modern.config.ts` files exist in Modern.js projects created by the generator.

Features can be enabled through the configuration file, or the default behavior of the coverage Modern.js. For example, add the following configuration to enable SSR:

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

export default defineConfig({
  runtime: {
    router: true,
    state: true,
  },
  server: {
    ssr: true,
  },
});
```

Re-execute `pnpm run dev`, in the browser Network menu, you can find that the project has completed page rendering at the server level.

## Build

Execute `pnpm run build` in the project to build the project production environment product:

```bash
$ pnpm run build

> modern build

info    Create a production build...

info    File sizes after production build:

  File                                      Size         Gzipped
  dist/static/js/lib-corejs.ffeb7fb8.js     214.96 kB    67.23 kB
  dist/static/js/lib-react.09721b5c.js      152.61 kB    49.02 kB
  dist/static/js/218.102e2f39.js            85.45 kB     28.5 kB
  dist/static/js/lib-babel.a7bba875.js      11.93 kB     3.95 kB
  dist/html/main/index.html                 5.84 kB      2.57 kB
  dist/static/js/main.3568a38e.js           3.57 kB      1.44 kB
  dist/static/css/async/304.c3c481a5.css    2.62 kB      874 B
  dist/asset-manifest.json                  1.48 kB      349 B
  dist/static/js/async/304.c45706bc.js      1.4 kB       575 B
  dist/static/js/async/509.fcb06e14.js      283 B        230 B

 Client ✔ done in 3.57s
```

The bundle is generated to `dist/` by default, and the directory structure is as follows:

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

> If you want to customize the output directory, please refer to [Output Files](https://modernjs.dev/builder/en/guide/basic/output-files.html).

## Verify

Execute `pnpm run serve` in the project to verify locally that the bundle is running correctly:

```bash
$ pnpm run serve

> modern serve

Starting the modern server...
info    App running at:

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

Open http://localhost:8000/ in the browser and the content should be the same as when `pnpm run dev`.

## Deploy

Once the local verification is complete, the outputs under `dist` folder can be organized into the structure required by the server for deployment.
