Building a Customizable React / Bootstrap Template

John Tucker
Aug 28, 2017 · 3 min read

Building a React / Bootstrap template was straightforward; making it customizable was not.

This article walks through the steps it took to create a starting point for custom React / Bootstrap projects. Key features include:

  • Uses reactstrap; provides React component versions of Bootstrap elements
  • Project supports SASS; e.g., you can use SASS variables to define your project’s colors.
  • reactstrap (more precisely, the underpinning Bootstrap) can be customized, e.g., use your project’s SASS defined colors.
  • Build process includes many best-practices, e.g., creating a vendor bundle for third-party libraries.

Create-react-app is a great tool when you are learning React. It is not a great tool for actual development. Managing the build process (with webpack) is an increasingly important part of modern development; not something to be delegated.

The challenge, however, is that webpack (and its complimentary libraries) is an incredibly powerful and complicated tool. If you are interested in fully understanding the webpack configuration developed here, I have written a number of articles that will help.

Starting from a non-React-specific webpack configuration (the output of the articles), we add a single development dependency and webpack configuration lines to support React.

  • babel-preset-react

webpack.config.js

...
module.exports = env => ({
resolve: {
extensions: ['.js', '.jsx'],
},
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
plugins: ['syntax-dynamic-import'],
},

note: This project also uses an optional setup using eslint-config-airbnb; mostly because I have become accustomed to programming with strong linting.

Bootstrap

The good news… Adding a React friendly version of Bootstrap is straightforward with the reactstrap library. Bootstrap (underpinning reactstrap) even provides a documented mechanism for customizing it; say changing the colors.

The bad news… Incorporating a customized version of Bootstrap took a bit of work.

Customizing Bootstrap

The key to customizing Bootstrap is to have our webpack build process build the Bootstrap CSS output from the SASS source. This will enable us to set Bootstrap-specific SASS variables to influence its build.

The complication comes in as our React-friendly webpack configuration file treats all CSS / SASS files the same; compiling them using CSS Modules. This will not work as the Bootstrap CSS needs to be globally defined.

The corrected and final webpack configuration, has two sections for handling SCSS (SASS) and CSS files:

  • The first section is for the files in our project; uses CSS Modules.
  • The second section is for the files used to incorporate Bootstrap; does not use CSS Modules.

With the webpack configuration done, we create a custom_bootstrap.scss file that imports our projects _colors.scss file, sets some Bootstrap-specific SASS variables, and then imports the Bootstrap SASS file.

note: While this example simply overrides colors, you can override any of these variables.

note: If you are wondering, my overall strategy for color is based on Material Design; using their Color Tool.

src/_colors.scss

$primary-color: #673AB7;
$primary-light-color: #9A67EA;
$primary-dark-color: #320B86;
$primary-text-color: #FFFFFF;
$background-color: #FAFAFA;
$cards-dialogs-color: #FFFFFF;
$error-color: #D50000;

src/custom_bootstrap.scss

@import './_colors.scss';
$brand-primary: $primary-color;
$brand-danger: $error_color;
$body-bg: $background-color;
@import '~bootstrap/scss/bootstrap.scss';

Wrap Up

While this article is not terribly deep, I thought to write it after spending too much time (and searching the Internet) this morning trying to figure out how to create a customizable React / Bootstrap project. Hope you find it useful.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

)

John Tucker

Written by

Senior Consultant @ Appirio

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade