umi-app-template
Blank template to create React applications with UmiJs with minimal effort.
Why UmiJS
UmiJs is pluggable enterprise-level react application framework.
The entire lifecycle of umi is composed of plugins. Features such as pwa, on-demand loading, one-click switching preact, one-button compatibility ie9, etc., are all implemented by plugins.
You only need an umi dependency to start development without having to install react, preact, webpack, react-router, babel, jest, and more.
Next.js like and full featured routing conventions, support permissions, dynamic routing, nested routing, and more.
Umi is the basic front-end framework of Ant Financial, and has served 600+ applications directly or indirectly, including Java, node, mobile apps, Hybrid apps, pure front-end assets apps, CMS apps, and more. umi has served our internal users very well and we hope that it can also serve external users well.
Why not next.js?
The routing of next.js is relatively simple. For example, its routing configuration does not support some advanced usages such as layout, nested routing, permission routing, etc., which are common in enterprise applications. Compared to next.js, umi is more like nuxt.js at the functional level of contracted routing.
Installing
Make sure, first, that you have Node.js installed
$node --version
v13.7.0
Then install umi globally. We recommend to use yarn
to manage npm dependencies.
$yarn global add umi
Now, you can clone umi-app-template code base:
$git clone https://github.com/skitsanos/umi-app-template.git
Get inside into downloaded folder
$cd /umi-app-template
Inside you will have the following folder structure
/mock
/src
.env
.eslintrc
.umirc.js
package.json
README.md
webpack.config.js
And, then
$yarn
Once all dependencies are installed, you can test your installation by launching your app:
$umi dev
This command will build your react application and make it available to be accessible from the web browser. It will let you know how to access it:
App running at:
- Local: http://localhost:8000/ (copied to clipboard)
- Network: http://192.168.100.2:8000/
Creating the new page
There are two ways of creating a page, or by adding new javascript file into /pages folder directly, let's say about.js:
export default () => <div>content of the page</div>;
Once you saved it, you can type in your browser
Another method would be by typing
$umi g page about
Result would be the same. In both cases you would have a page created and already visible to Umi.
http://localhost:8000/about
and you will see you content of your page.