Implement ant-design (antd) in create-react-app

[BrodaNoel]

Hi guys.
As you may know, ant-design is being sort of popular in these last days, but the implementation require eject CRA if you want to implement it in the best performant way.

More info:

• https://ant.design/docs/react/use-with-create-react-app
• https://ant.design/docs/react/getting-started#Import-on-Demand

Is there a way to implement ant-design, with no ejecting CRA?

[MrLoh]

this would be really great. antd is really the most mature components framework so far, and even though it is obviously there fault that the library can't be used easily, it would be great if create-react-app could be used easily with antd.

[Timer]

Hi!

Unfortunately this is a design decision made by Ant Design; there's nothing we can do to support it out of the box without adding explicit integration with it. Since this is not used heavily by Facebook or any of our maintainers, adding integration is pretty much out of the question (sorry!).

My suggestion would be to ask ant design to publish a webpack consumable / module friendly build or use a maintained react-scripts fork.

The best solution would be a module-consumable build produced by Ant Design.

[gaearon]

I don’t understand why Ant docs recommend ejecting and using the Babel plugin.
If I understand it right, you don’t need to eject to use Ant—you can import components one by one:

import Button from 'antd/lib/button';
import 'antd/lib/button/style';

This should work with Create React App.

cc @afc163, would you be willing to amend the docs to recommend this approach for CRA integration rather than ejecting? It’s unfortunate when libraries prescribe people to change their build process.

[BrodaNoel]

Yeap, I did it in that way.
I imported the component from lib folder, and added styles from lib/x/style.

Ant-design says that you have to eject in case you want to import using this way:

import Button from 'antd';

(and just that, with no style and lib folder needed)

[gaearon]

That’s fair—I’m just saying that Ant’s “Usage with Create React App” page should probably mention that approach first, and only mention ejecting as last option.

[gaearon]

Tagging this as needing help. The actionable item is to submit a PR to Ant docs (or raise an issue) that changes use in create-react-app page to suggest the workaround above rather than ejecting.

[BrodaNoel]

@gaearon On it

[BrodaNoel]

Issue created: ant-design/ant-design#6371.
The answer really quick, always. (really nice team).
Let's see what happens!

[BrodaNoel]

In another hand.
What about adding information about ant (and UI Component-libraries) in the README?

[BrodaNoel]

PR created in antd: https://github.com/ant-design/ant-design/pull/6375/files

[khankuan]

@gaearon antd uses less so we hav eto import css instead:

import 'antd/lib/button/style/index.css';

On the other hand, although eject is not needed to get it running, it is almost necessary in order to customize themes, which is a huge part of web development.

[khankuan]

@BrodaNoel do you have any advice for theming?

[BrodaNoel]

@khankuan yeap. Check the PR: ant-design/ant-design#6375
They added info about implementing antd with CRA. But I didn't read anything about what you said about css files. I always included all css files instead of less files.

[khankuan]

Do you have a need to customize themes like colors in your project?

[MrLoh]

The CSS is not that big. 43kb gzipped. So you can compile it statically into a themed file and import it in you index.html.

See vercel/next.js#484

[MrLoh]

See example less theme here:
https://github.com/MrLoh/nextjs-cms/blob/master/static/antd-theme.less

Which is compile with
lessc --clean-css static/antd-theme.less static/antd.min.css

You'd have to adjust the directory structure of course in create React app.

[khankuan]

@MrLoh Thanks for the tip! Do you have need for reusing variables such as colors in CRA for an in-house component that is outside of antd?

[MrLoh]

Yeah sure that comes up. But it's not that much overhead two copy a handful of established color values. Mainly I need colors in SVG components outside of antd

[jaimesangcap]

@MrLoh I've tried your example with lessc src/App.less src/App.css but got some errors

FileError: '../../style/themes/default' wasn't found. Tried - F:\proyekto\taskify-antd-ts\node_modules\antd\lib\style\themes\default,F:\proyekto\style\themes\default.les
s,F:\proyekto\style\themes\default,..\..\style\themes\default.less in F:\proyekto\taskify-antd-ts\node_modules\antd\lib\alert\style\index.less

I think it cannot resolve the relative paths of antd?

[afc163]

@jaimesangcap ant-design/ant-design#7850

[jaimesangcap]

@afc163 Thank you! using less@2.7.2 worked!

[qinyang1980]

(create react app + typescript + antd) without eject and without using Babel.

https://github.com/qinyang1980/create-react-antd-app.git

[luojinghui]

(create react app + typescript + antd) eject code to add antd :
it's work for me.

$ yarn add ts-import-plugin --save

in webpack.config.js

const tsImportPluginFactory = require('ts-import-plugin');
const antdTransformer = tsImportPluginFactory({
	libraryName: 'antd',
	libraryDirectory: 'lib',
	style: 'css'
});
{
	test: /\.(ts|tsx)$/,
	include: paths.appSrc,
	use: [{
		loader: require.resolve('ts-loader'),
		options: {
			getCustomTransformers: () => ({ before: [antdTransformer] }),
			// disable type checker - we will use it in fork plugin
			transpileOnly: true
			}
		}]
},

then import antd component:

import { Button } from 'antd';

  <div>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="danger">Danger</Button>
  </div>

[ani-naslyan]

Check this out. They added docs about how we can use Antd with CRA
https://ant.design/docs/react/use-with-create-react-app

[BrodaNoel]

@ani-naslyan that documentation was there for a few years ago.
The problem is that they eject CRA for using it.

Check the firsts lines of that documentation:

create-react-app is one of the best React application development tools. We are going to use antd within it and modify the webpack config for some customized needs.

"and modify the webpack config " <<< eject