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 './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</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.

Last Updated: 10/27/2018, 7:59:16 PM