How to setup inside existing Ant Design Pro V4?

[crudo]

Question

I didn't found in docs how to setup inside existing Ant Design Pro V4?

Only mention I have found is this:

Install @umijs/preset-dumi in the existing Umi project into devDependencies, and then configure resolve.includes as needed (for example, the src/components directory usually conventional defined as business component libraries and the documents corresponding to libraries).

I have installed the @umijs/preset-dumi devDependencies. And now what?

Where is the docs?

[chenshuai2144]

https://github.com/ant-design/ant-design-pro/tree/v5

look here

[crudo]

Thanks @chenshuai2144.

So if I upgrade to v5, dumi is already there? I do not see any script which run dumi.

How do I open component library docs? On what port?

[chenshuai2144]

Although the versions are different, the configurations of the two are the same, you can refer to

[crudo]

I do not understand what are you trying to say, sorry.

How do I run the dumi site in dev mode?

If I run npx dumi dev I got errors:

preset @umijs/preset-dumi is already registered by /Users/crudo/.npm/_npx/15dc9e627bd78296/node_modules/@umijs/preset-dumi/lib/index.js, preset from /Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/preset-dumi/lib/index.js register failed.
Error: preset @umijs/preset-dumi is already registered by /Users/crudo/.npm/_npx/15dc9e627bd78296/node_modules/@umijs/preset-dumi/lib/index.js, preset from /Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/preset-dumi/lib/index.js register failed.
    at Service.registerPlugin (/Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/core/lib/Service/Service.js:459:13)
    at /Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/core/lib/Service/Service.js:376:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/core/lib/Service/Service.js:108:103)
    at _next (/Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/core/lib/Service/Service.js:110:194)
    at /Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/core/lib/Service/Service.js:110:364
    at new Promise (<anonymous>)
    at /Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/core/lib/Service/Service.js:110:97
    at Service.initPreset (/Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/core/lib/Service/Service.js:420:7)
    at /Users/crudo/Sites/git/antdpro-v5/node_modules/@umijs/core/lib/Service/Service.js:311:22
`

[chenshuai2144]

What command did you execute

[crudo]

npx dumi dev as written on https://d.umijs.org/guide#start-development

[chenshuai2144]

you should usenpm run start

[crudo]

@chenshuai2144 That will open the Ant application, not the components documentation.

[crudo]

I am not sure if we understand each other:

I want to use dumi to document my components inside Ant Design PRO application.

I have already a bunch of components in src/components/.

If I run npm start dev inside Ant Design Pro application, that will open development mode. See in package.json: "start": "cross-env UMI_ENV=dev umi dev",.

I am expecting this components documentation like this:

[PeachScript]

3 steps make your expected documentation:

1. Install @umijs/preset-dumi into devDependencies, and do not install dumi
2. Configure resolve: { include: ['src/components'] } for your config/config.ts
3. npm start then visit http://localhost:8000/~docs will show the documentation from src/components directory

[crudo]

Thanks @PeachScript , we are getting closer.

Got error, but different this time:

 ERROR  Failed to compile with 13 errors                                                                 10:39:17 AM

These dependencies were not found:

* dumi-theme-default/src/builtins/API.tsx in ./README.md, ./src/components/index.md
* dumi-theme-default/src/builtins/Alert.tsx in ./README.md, ./src/components/index.md
* dumi-theme-default/src/builtins/Badge.tsx in ./README.md, ./src/components/index.md
* dumi-theme-default/src/builtins/Example.tsx in ./README.md, ./src/components/index.md
* dumi-theme-default/src/builtins/Previewer.tsx in ./README.md, ./src/.umi/core/routes.ts and 1 other
* dumi-theme-default/src/builtins/SourceCode.tsx in ./README.md, ./src/components/index.md

To install them, you can run: npm install --save dumi-theme-default/src/builtins/API.tsx dumi-theme-default/src/builtins/Alert.tsx dumi-theme-default/src/builtins/Badge.tsx dumi-theme-default/src/builtins/Example.tsx dumi-theme-default/src/builtins/Previewer.tsx dumi-theme-default/src/builtins/SourceCode.tsx

npm install --save dumi-theme-default/src/builtins/API.tsx will not work obviously.

[crudo]

After installing npm install --save dumi-theme-default It finally works.

[crudo]

Thanks!