How To Add Ant Design System To A React App

[00:00 - 00:25] There's a lot of good design system options to choose from, but for this application, we're going to add the ant design system to it and let it replace some of the components that we created and styled from scratch. This lesson will focus on adding ant design to our already existing application , leveraging its documentation, and getting us back to a similar baseline look and feel before we begin swapping out our custom components for ants.

[00:26 - 00:46] If you'd like a copy of the sample app before we add the ant design system, it 's available for download in this lesson. I mentioned in the previous lesson that the ant design system itself proclaims its React component library as its official library, and as such, it supports all flavors of React-based applications well.

[00:47 - 01:06] A part of this ant-D React integration typically relies upon modifying the web pack config, which we don't have access to because Create React app handles webpack for us under the hood. Ant has thought of that, though, and offers a well-documented way to make it work with a CRA app, and that's where we'll start today.

[01:07 - 01:23] So our first move to get ant design into our project will be to go check the documentation, which I have pulled up here, retaining two Create React apps in particular. Just as with any other React app, we'll need to begin by installing the ant-D N PM package.

[01:24 - 01:35] So open up your IDE, cd into our client folder, and then run the following command. Yarn, add, ant-D.

[01:36 - 01:51] We'll also need to add the ant-D CSS files to our project to bring in all the styling that the design system includes. To do that, add the following CSS import at the top of our index.css file in our project's client source folder.

[01:52 - 02:10] So if I were to open that up with index.css, at the very top of this, we will add the following import. Add import, and then tilde, ant-DIST, slash ant-D.css.

[02:11 - 02:16] That's all we need for ant-D itself for the moment. Now, here's where we diverge from other React apps.

[02:17 - 02:32] In order for ant-D to work with the Create React app scripts, we'll need to add another NPM package called Crayco. Crayco stands for Create React app configuration override, and it's an easy configuration layer for Create React apps.

[02:33 - 02:51] It allows us to add extra customization to a CRA app without having to eject the app and losing all the benefits that CRA bakes in. The next steps we're going to go through are actually what the ant-D docs themselves recommend to make this work, so we're going to defer to their expertise here.

[02:52 - 03:01] Run the following shell command to add Crayco to our project. Yarnad@crayco/crayco.

[03:02 - 03:31] Once the installation of Crayco is complete, we'll need to modify the scripts in our package JSON file to use Crayco instead of React app scripts. So pop open your package JSON in your client, scroll down to your scripts, and replace the first five scripts in our code, basically any scripts that reference React scripts to say instead of React scripts, build, test, etc., change it to Crayco.

[03:32 - 03:53] OK, we're about ready to test out if ants working with hardware handler. To verify that both the ant components and their default styles are in effect, let's add an ant button to our app.js file for now.

[03:54 - 04:04] We'll remove it again shortly. Before we add the ant component to our application, I would encourage you to start checking out the ant documentation.

[04:05 - 04:20] It's really, really good. I find myself turning to it today, and I strongly encourage you to get comfortable referring to it as well, because it's how I figured out how to switch out a lot of the components that are in our application already with the ant components.

[04:21 - 04:50] So get comfortable starting to search for different things in ant, looking at the examples, popping open the source code so you can read it here, or even going to code sandbox, code pen, stack blitz, copying, etc., to get more familiar with it, because it really does make it a lot easier. So for a button component, once we're in the documentation, underneath the actual components displayed in the browser are several different options to view the source code.

[04:51 - 05:02] So click the icon to expand the code, and the buttons you'll see are styled by their type property. So we're going to go with a simple primary button for now to check that things work.

[05:03 - 05:22] So now switch back over to your IDE in VS code, and let's go ahead and open up our app.js file, an import and ant-d button. So right under toast container, we are going to import button from ant-d.

[05:23 - 05:34] It imports how all ant-d components are brought into the files that need them, so it makes it pretty easy. So next, scroll all the way down to the bottom of this component, and we're going to throw this new button into our code.

[05:35 - 05:49] Since this is just throwaway, don't worry too much about its placement. So right under this section, go ahead and put in buttoned, give it a type of primary, and in that button text, just tell it hello world.

[05:50 - 06:08] Okay, so there's one more piece of configuration that we have to do before we start our app backup. We have to make a craco config.js file, and this is where all the specific configurations to craco go, but for the time being, we don't need to fill it in with anything.

[06:09 - 06:22] We just needed to exist so that craco will restart the app. So at the root of our client folder, go ahead and create a new file and name it craco.config.js, and that's all that you need to do.

[06:23 - 06:33] Right, now we're ready to restart our app and see what we're working with. So go ahead and run yarn start in your terminal and keep an eye on your browser .

[06:34 - 06:42] Good, when hardware handler starts, you should see this particular thing of beauty. It is fantastic, isn't it?

[06:43 - 06:49] Looks just like it did before. Well, maybe it's not quite like it was before, but we'll fix this up soon.

[06:50 - 07:02] The main thing to focus on right now is the little blue button in the bottom left of the screen that says hello world. The fact that this button is present and blue indicates to us that the anti- sign system is working within our app, which is great.

[07:03 - 07:13] That's one hurdle down just a few more to go. So feel free to delete this button and its import from the app.js file now because we no longer need them, now that we've confirmed and is working.

[07:14 - 07:26] On to our next step, customizing the amp theme to use our chosen project colors and defaults. So we've confirmed that ant-d is successfully added to hardware handler.

[07:27 - 07:38] Now it's time to set it up to use our own color scheme and font choices instead of the ant-defaults. Ant-d knows that this is something the teams will want to do, so it makes it a relatively straightforward process.

[07:39 - 07:55] If you are following along with the ant-d create react app docs, you will see under the advanced guide section that in order to customize the theme, we'll need to modify variables using the less loader. But with create react app, we'll be using the crayco less loader.

[07:56 - 08:06] It's built for the same purpose, just for CRA style react projects. Before we install our new npm package, we're going to make a couple of minor changes to our already existing files.

[08:07 - 08:23] Back over in your IDE, go ahead and rename our index.css file to be index.less. And change the ant-d CSS import inside of our newly renamed file to have a .

[08:24 - 08:28] less ending too. So this will become ant-d less.

[08:29 - 08:46] And I will also from our app remove all of our references to ant-d because we no longer need those. Once this index.less files ending has been updated, we'll need to update its import statement inside of index.js.

[08:47 - 08:57] So now that should look like this index.less. Okay, so now we're ready to install the crayco less npm package now.

[08:58 - 09:12] So go ahead and stop your server if it's running and run a yarn add crayco dash less. So now we're going to go back to the crayco.config.js file that we created just a minute ago.

[09:13 - 09:24] This file is where we're going to override the original ant-d defaults with our own projects defaults. You'll be pleased to know that ant-d has default styles that can be overwritten for nearly everything.

[09:25 - 09:37] The documentation lists a bunch of popular default overrides, but it's just the tip of the iceberg. I dug around the actual ant-d default style source code in github, which I've linked to in this lesson if you'd like to take a look.

[09:38 - 09:51] To locate the particular overrides, I needed to change to get the app as close to how it looked prior to adding ant-design. I'd recommend you just copy and paste what I have below into your own crayco config just to save yourself some time.

[09:52 - 10:05] So go to the lesson and grab everything from the code block and then open your crayco config back up and paste it in. So after adding this file, if you're still running the app, stop the server and restart it.

[10:06 - 10:13] The configs won't take effect until the server has reloaded. So now let's start it back up and see where we're at in the browser.

[10:14 - 10:22] Okay, so things are looking a lot better. It's getting a lot closer to what it was, but we're still not quite there at this point.

[10:23 - 10:35] Those main buttons look awfully cramped, don't they? Luckily, we only need to make a few minor custom CSS changes to get our app back to a good state before we start swapping out components in our next lesson.

[10:36 - 10:51] The biggest issues that we still have between our old apps CSS and our new CSS have to do with font weight and box sizing. One thing I notice immediately is that none of the header elements are bold like they were before and all the page headers are very close to the nav bar.

[10:52 - 10:55] They need more margin. Look at that.

[10:56 - 11:09] That doesn't look good. In order to make the supply to the whole application again, let's head back to our IDE and open up our app.css file.

[11:10 - 11:22] We need to add a couple of new pieces of CSS. One to make all of our headers bold and the second to give all of our H1 headers on every page a top and bottom margin so that they're not right up on the nav bar component.

[11:23 - 11:39] So right after tostify, let's go ahead and add some new CSS styling for all of our headers, H1 through H6. We're going to give them a font weight of bold.

[11:40 - 11:56] We're also going to give our H1's a margin of 40 pixels top and bottom and no margin on the side. So just this change is a pretty marked improvement if we look back in the browser.

[11:57 - 12:03] Already looking better. There are still a couple of things off about the homepage though.

[12:04 - 12:11] Those borders around the icons are still too tight and when we hover over them they turn aqua instead of staying red. We can fix this though.

[12:12 - 12:34] The issue of the box is being tight is due to the fact that Ant sets elements to have a box sizing property of border box instead of the default CSS style of content box. Yes, border box does make more sense but unless you explicitly start a project and use a CSS reset to make everything border box from the start, trying to flip to it midway through a project is going to cause a lot of headaches.

[12:35 - 12:42] To get our icons back to their normal selves we're going to manually fix them. Open the home.css file.

[12:43 - 13:01] Find the home link class and add the following line to the CSS nested under it. We are going to add box sizing of unset and right under that bit of CSS add a line to the class of home link hover so that the icon stays red even during the hover state.

[13:02 - 13:11] Add color of var dash dash red which is our CSS variable. Now check out how the hardware handler is looking in the browser.

[13:12 - 13:18] Much better. Let's check out our other pages and fix some of the same issues that are cro pping up elsewhere.

[13:19 - 13:29] On the My Products page for instance, the list of products is plagued by the border box sizing as well. See how the product boxes aren't filling up all the space like they were before .

[13:30 - 13:39] Now they're 5 across. So let's open up the product.css file back in our IDE.

[13:40 - 13:50] And we're going to add a line to the product class setting the box sizing back to what it was before ant-d interfered. So we're going to go with box sizing of initial here.

[13:51 - 14:02] And then we'll do the same for the product form page because the form labels and inputs are colliding together. There's no space between these two any longer.

[14:03 - 14:23] So open up product form.css and for the product form list we are going to also give it a box sizing of initial. And then if we check back on the checkout page with a few products in it, it actually looks okay.

[14:24 - 14:28] So we'll leave that one alone for now. And I think that we can call this lesson done.

[14:29 - 14:41] We've gotten the app back to a very solid baseline from which to begin incorporating ant-d components. In our next lesson we'll make our first swaps for some of our simpler components so that you can see how ant-d can simplify our code.