{bit:magie}

Install and Initialization of Ant Design for React

Using yarn create-react-app, avoiding eject

A set of React UI Components.

Install and Initialization

for full information see
+ https://ant.design + https://github.com/sharegate/craco + https://github.com/DocSpring/craco-antd

>  yarn create react-app antd-demo
>  cd antd-demo
>  yarn start

Below is the default directory structure.

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock

Install craco

Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app.

To keep all the benefits of create-react-app and customization without using ‘eject’ by adding a single craco.config.js file at the root ( or a custom location ) of the application and customizing the eslint, babel, postcss configurations and many more.

All to do is create an app using create-react-app and customize the configuration with a craco.config.js file.

Install the plugin from npm:

yarn add @craco/craco

Create a craco.config.js file in the root directory:

my-app
├── node_modules
├── craco.config.js
└── package.json

Export the configuration as an object literal:

/* craco.config.js */

module.exports = {
    ...
}

or as a function:

/* craco.config.js */

module.exports = function({ env }) {
    return {
        ...
    };
}

Update the existing calls to react-scripts in the scripts section of the package.json file

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

Custom location for craco.config.js

Change the location of the craco.config.js file by specifying a value for cracoConfig in your package.json file.

/* package.json */

{
    "cracoConfig": "config/craco-config-with-custom-name.js"
}

Note: Due to the location change the node.js __dirname variable points to **/config/ , though the projects root path is __dirname + “/../” !

for more configuration options, see craco github repository

Install craco and antd

> yarn add craco-antd antd

##Import antd

Modify src/App.js, import Button component from antd.

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

Add antd/dist/antd.css at the top of src/App.css.

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

Example for a production ready craco.config.js

By default, create-react-app will open a new browser tab every time it starts. This can be really annoying, especially if the nodemon watcher is set up, but this behavior can be disabled with an environment variable: BROWSER=none at the top of the craco config file:

yarn add webpack-bundle-analyzer webpackbar --dev
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const WebpackBar = require("webpackbar");
const CracoAntDesignPlugin = require("craco-antd");
const path = require("path");

const projectsRoot = __dirname + "/../"

// Don't open the browser during development (prevent new browser tab on every restart)
process.env.BROWSER = "none";

module.exports = {
  webpack: {
    plugins: [
      new WebpackBar({ profile: true }),
      ...(process.env.NODE_ENV === "development"
        ? [new BundleAnalyzerPlugin({ openAnalyzer: false })]
        : [])
    ]
  },
  plugins: [    
    {
      plugin: CracoAntDesignPlugin,
      options: {              
        customizeThemeLessPath: path.join(          
          projectsRoot,  
          "src/style/AntDesign/customTheme.less" 
        )
      }
    }
  ]
};

In the customTheme.less file write for example

@primary-color: #000000;
@link-color: #1DA57A;

If you use multiple options to customize the theme variables, they are merged together in the following order:

For more information about theme customization, see Ant Design’s Customize Theme Documentation

for more configuration options, see craco-antd github repository and craco-less github repository

Reload Custom Variables During Development

automatically restart webpack by wrapping craco start with nodemon.

> yarn add -D nodemon

Update the “start” script in package.json:

"scripts": {
  "start-less-watch": "nodemon -w ./src/style/AntDesign/customTheme.less --exec 'craco start'",
}