# Getting Started

There's also a video version of this.

# Environmental preparation

First you should have node, and make sure it's version 8.10 or above.

$ 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.

$ yarn global add umi
$ umi -v
2.0.0

# Boilerplate

First create an empty directory.

$ mkdir myapp && cd myapp

Then create some pages with umi g,

$ 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)

$ 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 or nuxt The experience of .js.

Then start the local dev server,

$ umi dev

# 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,

+ 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,

+ 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，

$ 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)

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

# Local Verification

Local verification can be done via serve before publishing.

$ 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.

$ 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

$ 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

$ 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

← Introduction Create a Project With create-umi →