# Getting Started

> There's also a [video version](https://www.youtube.com/watch?v=vkAUGUlYm24&list=PLzu0PBqV2jld2q5gCADxX17NE3gF3FvYq) of this.

## Environmental preparation

First you should have [node](https://nodejs.org/en/), and make sure it's version 8.10 or above.

```bash
$ node -v
8.1x
```

Recommended to use `yarn` to management npm dependency.

Then install `umi` globally, and make sure it's 2.0.0 or above.

```bash
$ yarn global add umi
$ umi -v
2.0.0
```

## Boilerplate

First create an empty directory.

```bash
$ mkdir myapp && cd myapp
```

Then create some pages with `umi g`,

```bash
$ umi g page index
$ umi g page users
```

> `umi g` is the alias of `umi generate`, used for generate `component`, `page`, `layout` quickly. And it can be extended in plugins, such as umi-plugin-dva extended `dva:model`, then you can generate dva's model via `umi g dva:model foo`.

Then view the directory with `tree`, (windows users can skip this step)

```bash
$ tree
.
└── pages
    ├── index.css
    ├── index.js
    ├── users.css
    └── users.js
```

The pages directory here is the directory where the page is located. In umi, all the js files under the pages are routes. It's like [next.js](https://github.com/zeit/next.js) or [nuxt The experience of .js](https://nuxtjs.org/).

Then start the local dev server,

```bash
$ umi dev
```

<img src="https://gw.alipayobjects.com/zos/rmsportal/SGkKMTPMJWFnYMbyznFW.png" width="616" />

## Convensional Routing

After starting `umi dev`, you will find a directory of `.umi` under pages. What is this? This is the temporary directory of umi, you can do some verification here, but please do not modify the code directly here, umi restart or file modification under pages will regenerate the files in this folder.

Then we add some route jump code to `index.js` and `users.js`.

First modify `pages/index.js`,

```diff
+ import Link from 'umi/link';
import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</h1>
+     <Link to="/users">go to /users</Link>
    </div>
  );
}
```

Then modify `pages/users.js`,

```diff
+ import router from 'umi/router';
import styles from './users.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page users</h1>
+     <button onClick={() => { router.goBack(); }}>go back</button>
    </div>
  );
}
```

Then verify in the browser, and it should already be able to jump between the index page and the users pages.

## Build and Deploy

### Build

Run `umi build`，

```bash
$ umi build

DONE  Compiled successfully in 1729ms

File sizes after gzip:

  68.04 KB  dist/umi.js
  83 B      dist/umi.css
```

The files is generated to `./dist` by default. You could view the files by the `tree` command (Windows users can skip this step)

```bash
$ tree ./dist
./dist
├── index.html
├── umi.css
└── umi.js
```

### Local Verification

Local verification can be done via `serve` before publishing.

```bash
$ yarn global add serve
$ serve ./dist

Serving!

- Local:            http://localhost:5000
- On Your Network:  http://{Your IP}:5000

Copied local address to clipboard!
```

Visit http://localhost:5000, which should be same as `umi dev`.

### Deploy

Once verified, you can deploy it. Here is a demonstration with [now](http://now.sh/).

```bash
$ yarn global add now
$ now ./dist

> Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng
> Synced 3 files (301.93KB) [2s]
> https://dist-jtckzjjatx.now.sh [in clipboard] [1s]
> Deployment complete!
```

Then open the url to view it online.

## Test and Inspect

### Test

umi-test based on `jest`

```bash
$ umi test

Options:

    --coverage                    indicates that test coverage information should be collected and reported in the output
    --collectCoverageFrom=<glob>  a glob pattern relative to matching the files that coverage info needs to be collected from, e.g, --collectCoverageFrom=src/**/*.js
    --detectLeaks                 debug memory leaks
```

### Inspect

```bash
$ umi inspect

Options:

    --mode                specify env mode (development or production, default is development)
    --rule <ruleName>     inspect a specific module rule
    --plugin <pluginName> inspect a specific plugin
    --rules               list all module rule names
    --plugins             list all plugin names
    --verbose             show full function definitions in output
```