How-to Build Your Own React Boilerplate
Seth May 12 Originally published at sethaalexander.com on May 12, 2018
So you’ve learned some React and built a few things. You’ve probably used create-react-app or react-slingshot to get off the ground quickly with minimal configuration. However, now you’re ready to venture out on your own with your very own React boilerplate.
WHERE. TO. START???
I recently faced this same dilemma. It was a struggle but at the end of it, I had a solid repo that I could use as a basis for future React projects. I realized I wanted to use webpack because it’s the new hotness (well not so new) but I would have a lot of resources to pull from to figure it out. I have ZERO working knowledge of Grunt or Gulp although with the minimal amount I’ve looked at them they do some cools things in their own right. Also, I know the people I interact with who know more than me use webpack. I also had a reference React boilerplate webpack config I was going to use as a base (I quickly realized I was going to rewrite most of this config).
Back to the Beginning
3.1 Standardized pieces of text for use as clauses in contracts or as part of a computer program.
This works. So something that’s standard across computer programs. As in some code that’s always the same at least in theory. So instead of having to run things like
npm i react react-dom webpack etc… every time we start a project we can copy our boilerplate and be off to the races knowing all the essential pieces we want are ready to go. We’ll also know that everything is being maintained the way we want it to because it’s ours. We also will learn a lot during the process and possibly even decide to make decisions that differ from what others have instructed us to do.
First things First
Now, what type of project would this be without a
README.md? Every repository should have a readme file. Even if it’s just to remind YOU about how things work. Trust me, it may seem like you’ll remember exactly what each script does and why right now. However, a year from now these readme’s come in handy! Trust me. So, create a
README.md in the root of the project. Put something like this in there:
An essential part of any Git project is the
.gitignore file. This tells git to not put certain files under version control. This is important for things like packages and other things that we will retrieve from repositories. Not only do we not need these in version control but it’s actually detrimental if we do include them in version control. At least I’m pretty sure it’s detrimental. Create a
.gitignore file in the root of your project and add the following to it:
There are generators for this file, like this one, but this should be enough for what we’re doing today.
All node projects must be initialized so we can use the package manager. This will create a
package.json file for us which must be in version control.
It contains many things but the most important are:
- A list of all the installed packages and their semantic version allowed
Now, what does this do exactly? The
env preset implicitly includes
babel-preset-es2017 together, which means you can run ES6, ES7, and ES8 code. The
So we’re making progress. Now that we have a React component with our
App.js let’s make sure to create a simple associated test for that component. This way we’re starting to ensure some good practices of having tests for the things we build. We will be using Jest with Enzyme for this project. First things first, let’s install it with:
Next, we should add our first component test! So, create a file at
/test/App.test.js to test that our App component renders as expected. We are also going to implement a snapshot test to ensure our components structure doesn’t change from test to test. To do that we’ll need the following:
If you’ve made it this far with your React boilerplate, CONGRATS! Mostly because you’ve realized that I’m using images for my code and you have to type it all out. That’s a pain in the ass, I know. Trust me though, you’re learning more than you know by being forced to type it all and the muscle memory is going to serve you well long after this tutorial.
webpack will allow us to modularize our code and easily bundle it into a single file for production. Something I think a lot of people really like about webpack though is the development server! We’ll start by just installing webpack with:
webpack looks for a
webpack.config.js file by default in the root of the project so let’s create that and add to it a couple things:
index.js. Then it tells it where to output the built file when it’s done with it.
Loaders are helpful pieces we can add to webpack to make it more powerful and do things to other file types. Before webpack will work properly we need to set it up to work with ES6 and JSX. We’ll do this through the
babel-loader. Add the
babel-loader to your project with:
To utilize Sass and SCSS we’ll need another loader. Now to get the best “bang for our buck” we’re going to chain three loaders together so our styles are applied immediately to the DOM. Let’s install the loaders:
index.html and of course, there’s a way to do this automatically. This is also going to take the
index.html file and drop it into our build folder (more on the build later). Let’s add the
HtmlWebPackPlugin and include it in our
webpack.config.js like so:
The moment we’ve all been waiting for! Let’s get the development server setup. So we’re going to add two packages in this step.
webpack-cli is going to be used to run our commands from our
package.json file. First:
So right now we could say success! However, our code isn’t optimized for production use. However, we don’t want to optimize our code while we’re in development either because it takes a lot longer to build. So let’s create separate build files for our production and development environments and tell webpack how to handle that. I promise we’re almost done. Really we are… Up next is:
This is going to allow us to have three webpack config files. So let’s get that setup. Rename your
webpack.common.js. Then create
webpack.prod.js. The idea is one will have configuration used in both development and production, one will be development only, and one will be production only. So first thing, let’s remove the development server code from common we just added in the last step and add it to
webpack.dev.js. We’ll utilize
webpack-merge to include everything from
webpack.common.js and add on
webpack.dev.js. So now your
webpack.common.js looks like this:
This will output an optimized version of your code into the
/dist folder. Take those files and upload them to your favorite host and you’re good to go!
What’s Next With Your React Boilerplate?
Well, nothing from me! Ha, I think you’ve had enough by now. Hopefully, this empowers you to dive into creating your own boilerplate. You’ll start your personal projects steps ahead and really get an understanding of what each piece does. I HIGHLY recommend the webpack docs for further reading if you want to continue to add configuration to your webpack setup. There is A LOT more you can do with it. Another thing you might want to do is set up something like ESLint in your project as well. You can also dive deep into Babel and all that it allows you to do.
Thanks and I’d love to hear what you think about this setup. Anything you’d add, remove or change leave in the comments below.
I ALMOST FORGOT! Actually I did, I’m adding this after I clicked “Publish”. If you want to find all this code I have it in a repo here.