I have been programming now for about five years. The only boilerplate code I have used are ones given to me from frameworks, like npx create-react-app or gatsby new. It took me this long to write my own boilerplates.

But why did it take so long?

I was always under the impression that I had to code everything from the ground up. I would start with an empty canvas, write my first npm init line, and go from there.

As I developed more often, became more confident, and learned more technologies, I finally realized that, no, people didn't always develop from the ground up. In fact, it is foolish to code from the ground up. Programming is supposed to make everything easier, keeping everything DRY, looping through variables, y'know, generally being lazy.

So you shouldn't feel shamed for using a boilerplate. In fact, it's the right thing to do!

Building Your Own

So why build your own?

Well, honestly, I didn't do any research about this subject. It was just a feeling I had a week ago and I ran with it.

I was building a Gatsby project using their hello-world-starter-template and thought, Well isn't it silly that I'm using the beginner's template when I've already used this code? I swapped to another template and saw that it had too much going on and I couldn't learn how to implement what I wanted.

I wanted a happy medium. A point where I could quickly get my project off the ground, but I didn't want all the other bloated tech that came with some of the other templates. That's why I began building my boilerplates.

So I built my Gatsby boilerplate. Then a Create-React-App boilerplate. Followed by a CRA with Redux boilerplate. And finally a React App without Create-React-App to show my skills with Webpack. I wanted a wide range of React boilerplates so I could lift any variety of projects that I wanted to build off the ground, whether it be a blog, an app that interacts with an API, or a static webpage.

Where Do I Start?

Well, I'll tell you how I started - I built a program using the templates that were provided. I learned what I needed, what I don't need, and went from there.

The easiest one is the Gatsby boilerplate because the hello-world-starter-template is already bare-boned. From there, I deleted the page/index.js template which consisted of a simple <div>Hello world</div>.

The minimum that I wanted in my boilerplate were

• Technologies: What npm packages could I install now that I know will be necessary for the majority of my projects?

• Layout: What layout do I tend to use the most?

• Pages and Components: Build the pages and components that would most likely be in the majority of my future projects

• Metadata: Some metadata that will be used in all of my projects

I know that I could have implemented a load of Gatsby plugins and thrown them in the gatsby-config.js file, but I didn't want to bloat my boilerplate if I didn't need it for all of my projects. If I build a static restaurant page, what do I need a gatsby-source-contentful plugin for?

Instead, I stuck with my CSS preprocessor of choice, Sass, and React-helmet. Two useful technologies that will be used in each one of my Gatsby apps.

The Pages and Components and Layout all go hand in hand. Basically, I built a Homepage, About page, and Contact page and applied a Layout Component. The Layout has a Navigation, Header, and Footer.

Finally, I added some global styling that I enjoy using, styling to my layout, a default color scheme that I can easily be changed within the colors.scss file, and some default utility classes.

It was that easy!

How Has it Worked?

By using the built-in starter templates or the default starter templates as guidelines, it only took me about 90 minutes to build the four templates listed above. I only included the four bullet points that I outlined.

So far, I've only taken advantage of the Redux boilerplate. For anyone who has built a React / Redux project, starting a Redux project is very repetitive, and who has time to memorize all of that? All you need to understand is how it all interacts with eachother- action changed the reducer, the reducer mutates the store, the component interacts with the store- blah blah blah.

But do I really want to build the exact same store each time? In order to do that, I need to prebuild my root reducer file, create an action types file, install all my npm packages? Nope, let's just have that set up for me already so I can get down to my actual application!

Just Remember

I just need to remind myself, there is no shame in using starter code! It helps speed along the process in order for you to develop the actual project you want to work on. You're adjusting the starter template to your needs. It is all part of becoming the developer that you want to be!