Adding Ant Design to Create React App with NPM

Ant Design is an awesome library of styled components for React.

They provide instructions on their site to use Yarn to get your project up and running, but nothing for npm. Here’s a brief overview of converting your Create React App to use Ant Design:

1) Open Terminal and go to your directory where Create React App is installed

2) Install the required packages using NPM, just run:

npm install antd react-app-rewired customize-cra babel-plugin-import less less-loader

3) Edit your package.json, find and replace the following:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

replace it with:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

4) Create config-overrides.js in root and insert the following:

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#25d366" }
  })
);

Makes a seemingly complex process pretty simple!

Update: This video talks you through the whole process