Creating a Custom, Maintainable React-Scripts Package – Helpful Human

Creating a Custom, Maintainable React-Scripts Package:  by @Canfie1d #ReactJS #JavaScript

  • When Facebook released Create React App(CRA), I was excited to be able to harness their knowledge of the build process in my applications.There was an issue, however.While create-react-app was an amazing boilerplate to kick off a project with, it didn’t include everything we needed to include in new React projects.
  • While using this method was considerably faster than setting up a new application from scratch or basic from a boilerplate, it was important to me that the application could still rely on updates from the React team.Powered with information gleaned from that experimentation, we set out to create a way to harness the power of CRA with the added benefit of including other dependencies we required out of the box.
  • This discovery was the key to unlocking our ability to harness CRA.We began reading through how Kitze, the author of custom-react-scripts, enabled the ability to use a custom scripts package and came across an undocumented code snippet in his documentation:create-react-app my-app –scripts-version CRA had an undocumented hook built into the API to override the default react-scripts with your own.
  • While custom-react-scripts is an amazing package for setting up projects with differing requirements, we only needed one specific set up for our team.Poised with new information, we forked CRA and began editing the react-scripts to include the missing pieces.
  • This was a major step in the right direction and is sure to drastically cut down on the time it takes to spin up a new application.Next StepsWhile the few modifications we added to react-scripts are nice, we have plans to expand helpful-react-scripts further to include other dependencies such as a custom linting configuration, react-axe, redux-responsive, a font loader, Webpack code chunking, and other progressive web application considerations such as offline-plugin and a service worker.We are also developing our own version of create-react-app called helpful-cli in order to extend the functionality of CRA into including optional front-end packages such as moment.js and lodash.js as well as backend boilerplate and configurations.Since publishing helpful-react-scripts to NPM, we’ve seen 1,600 downloads in the last month and could see that number rise as we add functionality and it becomes more stable.If you found helpful-react-scripts helpful to you, let us know!

At Helpful Human, we were looking for a new solution to quickly spin up new projects. We wanted to lean on Facebook’s knowledge of React, Webpack, and best practices surrounding the configuration and…

@HappyFunCorp: Creating a Custom, Maintainable React-Scripts Package: by @Canfie1d #ReactJS #JavaScript

At Helpful Human, we were looking for a new solution to quickly spin up new projects. We wanted to lean on Facebook’s knowledge of React, Webpack, and best practices surrounding the configuration and maintenance of single page applications. When Facebook released Create React App(CRA), I was excited to be able to harness their knowledge of the build process in my applications.

There was an issue, however.

was an amazing boilerplate to kick off a project with, it didn’t include everything we needed to include in new React projects. By default, CRA sets up your development environment; a build process, Javascript linting, unit tests with Jest, and CSS. This small set of inclusions was purposeful to keep CRA as unopinionated as possible, but, as a result, the functionality lacks much of what we needed to make a fully fledged React application (i.e. state management, routing, and pre-processed styles).

the application. This command essentially severs your reliance/dependency on the React team and allows you to maintain the project yourself.

Using this command, I took control of the application and inserted the changes I needed into my configuration files. Although I could customize a CRA created app, I ran into issues with maintainability. While using this method was considerably faster than setting up a new application from scratch or basic from a boilerplate, it was important to me that the application could still rely on updates from the React team.

Powered with information gleaned from that experimentation, we set out to create a way to harness the power of CRA with the added benefit of including other dependencies we required out of the box. But we needed to do so while maintaining the connection to the original react-scripts package.

After pouring over the CRA documentation, we couldn’t find a maintainable way to overwrite the react-scripts included in CRA with our own package and became a little discouraged. We began questioning the viability of our endeavor.

As a last resort, we began researching other possible methods of accomplishing our goal and, in doing so, we came across Custom React Scripts. This discovery was the key to unlocking our ability to harness CRA.

, enabled the ability to use a custom scripts package and came across an undocumented code snippet in his documentation:

is an amazing package for setting up projects with differing requirements, we only needed one specific set up for our team.

Poised with new information, we forked CRA and began editing the react-scripts to include the missing pieces. We added a global state manager in Redux, react-router for managing routes and routing, and Stylus for preprocessing stylesheets.

with our newly created helpful-react-scripts.

Success! We now had a CRA-created application that pulled our custom script package from npm and had React-Router, Redux, and Stylus out of the box. This was a major step in the right direction and is sure to drastically cut down on the time it takes to spin up a new application.

While the few modifications we added to react-scripts are nice, we have plans to expand helpful-react-scripts further to include other dependencies such as a custom linting configuration, react-axe, redux-responsive, a font loader, Webpack code chunking, and other progressive web application considerations such as offline-plugin and a service worker.

We are also developing our own version of create-react-app called helpful-cli in order to extend the functionality of CRA into including optional front-end packages such as moment.js and lodash.js as well as backend boilerplate and configurations.

to NPM, we’ve seen 1,600 downloads in the last month and could see that number rise as we add functionality and it becomes more stable.

helpful to you, let us know! We’d love to hear how you are using it. Further, if you have suggestions for how we can improve the package we are very open to hearing any ideas you may have!

Creating a Custom, Maintainable React-Scripts Package – Helpful Human