Using Grommet with create-react-app

UPDATE

No need to read this if you’re just trying to get going without knowing how. What’s in this post is rolled into grommet react app. I’ve used it and it’s great. I’ve even deployed it out of the box to Heroku.

Using Grommet with create-react-app

I recently finished my first usable React/Redux application and, as tends to happen with first time projects, I’m immediately ready to rewrite it using the knowledge I gained from the first go-round.

I was a good student. I wrote my WebPack file from scratch, learned about the component lifecycle, created thunks to handle asynchronous API requests, and figured out (the hard way) to use immutable data structures for handling state changes. I learned enough to feel comfortable knowing what I do and don’t want to deal with (when I don’t have to) when I start a new project. General build configurations and specific component styling firmly fall into this category.

Good news! Other people have put in A LOT of work to take care of those things for me.

create-react-app

create-react-app, championed by Dan Abramov and supported by Facebook, is an open-source project aimed at providing the best build configuration for bootstrapping a React application. After a simple install, create, and start, create-react-app serves up a project with almost everything I need.

Grommet

Among other things, Grommet is a set of React components aimed at enterprise applications. It’s a great looking set of UI components and will add a professional look to the next version of my little application.

but…

Grommet stylings are in SASS and, although very thoroughly discussed, create-react-app doesn’t support SASS loading out of the box. Although I could include the min.css files, I may want to edit the styling in the future. So, I have to eject.

Initially, create-react-app abstracts away all of the config files to provide the cleanest experience for the user. By ‘ejecting’ out of that setup, I’m given all of the config files and can customize the build configuration.

LDT (Let’s do this)

From inside the project directory, I run

npm run eject

create-react-app let’s me know there’s no going back, but I press on!

Now, in my directory, I have a config folder, which houses two webpack files

webpack.config.dev.js
webpack.config.prod.js

Since I went through the trouble of learning webpack when I created the first version of this app, I know that I need to edit the loaders in these files to add SASS support. I can get the changes I need from a standalone setup for Grommet.

First off, I need the loaders.

npm install --save-dev node-sass sass-loader

For each of the webpack files, I just add the sass loader to the array of loaders.

{  
test: /\.scss$/,
loader: 'style!css!sass?outputStyle=compressed'
}

Also make sure the file knows I’m handling the SASS files with a loader by adding the extension to the exclude array.

exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.scss$/,
/\.json$/,
/\.svg$/
],

…and the extensions array.

extensions: ['.js', '.json', '.jsx', '.scss', ''],

Then, after (as in outside) the module object, add the sassLoader paths.

sassLoader: {
includePaths: [
'./node_modules'
]
},

Finally, I can add the scss files to my index.js file and get on with my project.

import '../node_modules/grommet/scss/vanilla/index.scss';

Take Away

  • Take the time to get to know your tools. They are malleable, but only in learned hands.