<h2 id="heading-what-is-umijshttpsv3umijsorg">What is <a target="_blank" href="https://v3.umijs.org/">UmiJS</a> 💡</h2>
<ul>
<li>It leverages the idealogy of React, NextJS and TypeScript.</li>
<li>It is a utility framework that can be used to build enterprise-level applications.</li>
<li>Built by Ant Group, the subsidiary of Alibaba.</li>
<li>It has an in-built routing mechanism that supports configuration and conventional routing.</li>
<li>Supports micro-frontend, component packaging, documentation tools, request library, hooks library, data flow etc.</li>
</ul>
<h2 id="heading-setup-the-project">Setup the project</h2>
<h3 id="heading-prerequisites">Prerequisites</h3>
<ul>
<li>node ≥ 10.13.0</li>
<li>yarn package</li>
</ul>
<h3 id="heading-create-an-empty-project">Create an empty project</h3>
<p> <code>$ mkdir myapp &amp;&amp; cd myapp</code></p>
<h3 id="heading-create-a-umi-project">Create a umi project</h3>
<p> <code>$ yarn create @umijs/umi-app</code>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95s45589u0eqausaol5f.png" alt="mkdir" /></p>
<h3 id="heading-install-dependencies">Install dependencies</h3>
<p> <code>$ yarn</code>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4he9f2zrav6zymloolzb.png" alt="dependencyinstall" /></p>
<h3 id="heading-start-the-project">Start the project</h3>
<p> <code>$ yarn start</code>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1tvr0o7v9uc4r3aclqs.png" alt="startapp" /></p>
<h3 id="heading-check-the-application-running">Check the application running</h3>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is6krmu8kpiziheioni0.png" alt="startup" /></p>
<h2 id="heading-folder-structure">Folder structure</h2>
<ul>
<li><code>.umi</code> folder contains the umi plugins that would be used across the development of the application.</li>
<li><code>pages</code> folder contains the files that would be rendered in the UI. The name of the file name is the route name for the file as well.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m14zmn4h71dv57sffm7a.png" alt="folderstructure" /></li>
</ul>
<h2 id="heading-conclusion">Conclusion 📗</h2>
<p>More details are incoming around UmiJS...</p>
<p>Thanks in advance for reading this article...🚀</p>
<p><em>I am more than happy to connect with you on</em></p>
<ul>
<li><a target="_blank" href="https://twitter.com/_nitinreddy3">@twitter</a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/nitinreddy3/">@LinkedIn</a></li>
</ul>
<p><em>You can also find me on</em></p>
<ul>
<li><a target="_blank" href="https://github.com/nitinreddy3">@Github</a></li>
<li><a target="_blank" href="https://dev.to/nitinreddy3">@DEV</a></li>
<li><a target="_blank" href="https://medium.com/@nitinreddy3">@Medium</a></li>
</ul>


## What is [UmiJS](https://v3.umijs.org/) 💡
- It leverages the idealogy of React, NextJS and TypeScript.
- It is a utility framework that can be used to build enterprise-level applications.
- Built by Ant Group, the subsidiary of Alibaba.
- It has an in-built routing mechanism that supports configuration and conventional routing.
- Supports micro-frontend, component packaging, documentation tools, request library, hooks library, data flow etc.

## Setup the project

### Prerequisites
- node ≥ 10.13.0
- yarn package

### Create an empty project
 `$ mkdir myapp && cd myapp`

### Create a umi project
 `$ yarn create @umijs/umi-app`
![mkdir](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95s45589u0eqausaol5f.png)

### Install dependencies
 `$ yarn`
![dependencyinstall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4he9f2zrav6zymloolzb.png)

### Start the project
 `$ yarn start`
![startapp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1tvr0o7v9uc4r3aclqs.png)

### Check the application running
![startup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is6krmu8kpiziheioni0.png)

## Folder structure
- `.umi` folder contains the umi plugins that would be used across the development of the application.
- `pages` folder contains the files that would be rendered in the UI. The name of the file name is the route name for the file as well.
![folderstructure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m14zmn4h71dv57sffm7a.png)

## Conclusion 📗

More details are incoming around UmiJS...


Thanks in advance for reading this article...🚀

*I am more than happy to connect with you on*

- [@twitter](https://twitter.com/_nitinreddy3)
- [@LinkedIn](https://www.linkedin.com/in/nitinreddy3/)

*You can also find me on*

- [@Github](https://github.com/nitinreddy3)
- [@DEV](https://dev.to/nitinreddy3)
- [@Medium](https://medium.com/@nitinreddy3)


Let us learn about UmiJS

Seasoned JavaScript Developer who loves to explore other programming languages like Python. A problem solver, tech lover by heart. Loves reading booking, and cooking. 
🤩🚀🔬


Let us learn about UmiJS

What is UmiJS 💡

Setup the project

Prerequisites

Create an empty project

Create a umi project

Install dependencies

Start the project

Check the application running

Folder structure

Conclusion 📗