Exploring the Umi CLI and adding pages

In this section, we'll explore the Umi CLI for automating tasks and use the generate command to add some pages to your project.

Umi provides a CLI with commands to build, debug, list configurations, and so on. You can use them to automate tasks. Some of these commands are already configured in the umi-app template as scripts in the package.json file: yarn start will execute umi dev, yarn build will execute umi build, and so on.

These are the main commands available:

• umi dev: Compiles the application and starts a development server for debugging.
• umi build: Compiles the application bundle in the dist folder.
• umi webpack: This shows the webpack configuration file generated by Umi.
• umi plugin list: Lists all Umi plugins in use.
• umi generate page: Creates a new page template.

  Important Note

  For more commands, refer to the documentation available at https://umijs.org/docs/cli.

Let's add some pages using the generate page Umi CLI command. Follow these steps:

1. First, delete the files under the src/pages folder, then add two pages by running these commands:

   $ yarn umi g page /Home/index ––typescript ––less
   $ yarn umi g page /Login/index ––typescript ––less

These commands generate two components under the pages folder, Login and Home, with TypeScript and Less support.

2. To access these pages, we need to define routes, so modify your routes.ts file to define the created components for new routes:

routes.ts

export default [
  {
    path: '/',
    component: '@/pages/Login',
  },
  {
    path: '/home',
    component: '@/pages/Home',
  },
];

3. To check the result, start the project by running yarn start, then navigate to http://localhost:8000/; you should see the login page.
4. Navigate to http://localhost:8000/home; you should now see the home page.

Now that we have pages set up, we can learn more about Umi routing and navigation using umi history.