Why We Built a Custom React Boilerplate (Hint: Collaboration & Speed)

Creating a custom-built React boilerplate can speed up initial development and help teams of developers collaborate more efficiently. While it required more time up-front to build the boilerplate, it's saving our teams tons of time in the long run.

This case study powerfully demonstrates the importance of laying a common foundation for collaborative coding.

Keep reading to learn how they built the boilerplate and what we've seen as a result of using this new tool.

A Custom React Boilerplate that Reduces Initial Sprints from 2 Weeks to 3 Days

Ryan Ostrom and Eddie Rozum, two all-star developers at Praxent, put their heads together to create a boilerplate for use by all teams and developers working on React projects within our organization. The custom-built boilerplate accomplishes the following goals:

• Reduce the amount of time spent setting up a build process at the beginning of each project. What used to be a 2-week initial sprint is now usually only a 3-day set-up process, at the most.
• Provide every developer with exactly what they need to know for testing. The boilerplate equips developers with information about what to test and how to write each test. Less experienced developers can now write tests without relying on busy experts from other teams. The boilerplate documentation has examples for each type of test that needs to be written, plus a holder structure built in. It automatically includes Jest in the test script.
• Enforce best practices for new web apps.
• Limit errors, facilitating faster coding.
• Make outcomes more predictable. (We know input and output values ahead of time.)
• Re-enforce data integrity for stronger security.

What's Inside the React Boilerplate

The boilerplate presents developers with a production development build script; a local, live development server and pre-arranged folder structures.

Developers no longer have to create a build process from scratch. Instead, when beginning a new React project, they simply make a few adjustments before they’re ready to start developing.

Here are the customizations each developer has to make to the build process once they've accessed the boilerplate:

1. Customize parameters for the project
2. Add the boilerplate to source control
3. Hook up the CI/CD pipeline for continuous integration and deployment

Better Collaboration

Eddie and Ryan created this tool to facilitate better collaboration among multiple developers working on different projects within our organization.

They wanted to create a tool that would allow any new developer added to a React project to quickly catch on and make it easier for senior developers to understand the layout of a project when reviewing code.

The opinionated boilerplate includes built-in structure for implementing automated testing. It has automatic code splitting built into the tool. (Code splitting allows developers to access only the JavaScript they need at any given moment, rather than pulling chunks of related JavaScript which they must manually sift and separate.)

Here is the technology stack used for this React boilerplate:

• React.js: JavaScript library for building the interface
• Redux: Library for managing the React application global state
• Immutable JS: Immutable collections for JavaScript
• Webpack: Module bundler for budnling SCSS and JS files
• Create-React-App: Ryan and Eddie started with the React boilerplate called create-react-app for their customized tool

Learn more about the custom React boilerplate created by Eddie Rozum and Ryan Ostrom: "How to Speed up Development on React Projects | React Boilerplate"