bruno-krebs

I am passionate about developing highly scalable, resilient applications. I love everything from the database, to microservices (Kubernetes, Docker, etc), to the frontend. I find amazing to think about how all pieces work together to provide a fast and pleasurable experience to end users, mainly because they have no clue how complex that "simple" app is.

R&D Content Architect

Bruno Krebs

Learn how to scaffold a React Single-Page Application with some sensible and opinionated defaults.

Beyond Create React App: React Router, Redux Saga, and More

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Create React App (CRA) is a very good tool for creating React apps from the CLI without build configuration.



---

**TL;DR:** There are several tools available for developers to aid the building of various types of websites and applications. One such tool is [**Create React App(CRA)**](https://github.com/facebookincubator/create-react-app), the CLI tool that helps JavaScript developers create react apps with no build configuration. As awesome as **CRA** is, developers still need a way of tweaking, adding special scripts and modules that doesn't come bundled with **CRA**. Today, I'll teach you how to create custom `create-react-app` scripts for you and your team!

---

Many developers already use [create-react-app](https://github.com/facebookincubator/create-react-app) to build their React applications, but like I mentioned earlier, developers are still screaming for more configuration options! Some are interested in having support for:

* PostCSS
* CSS Modules
* LESS
* SASS
* ES7
* MobX
* Server Rendering

..and a lot more out of the box!

A lot of developers, including JavaScript newbies create *React* apps from scratch daily, so the *CRA* team at Facebook built the *create-react-app* tool to make the process of creating such apps less tedious and error-prone.

As a developer that needs support for some of the technologies I highighted earlier, one way of going about it is running `npm run eject`. This command copies all the config files and dependencies right into your project, then you can manually configure your app with all sorts of tools to satisfaction.

One major challenge developers might face with *eject* is not been able to enjoy the future features of *CRA* . Another challenge with *eject* would be ineffecient synchronised setup across React developers working in team. One great way of solving this later challenge is publishing a fork of `react-scripts` for your team, then all your developers can just run `create-react-app my-app --scripts-version mycompany-react-scripts` and have the same setup across board. Let's learn how to accomplish that!


## Create a Fork

Open up your GitHub repo and fork the [create-react-app repo](https://github.com/facebookincubator/create-react-app)

![Creating a fork of create-react-app](https://images.ctfassets.net/23aumh6u8s0i/7u1YvLkXhzbeQjnaSCxJbQ/bf83b03caae7460819dfbbe663984852/fork)
_Creating a fork of create-react-app_

**Note:** It is recommended that you fork from the latest stable branch. Master is unstable.

Inside the `packages` directory, there is a folder called `react-scripts`. The `react-scripts` folder contains scripts for building, testing and starting your app. In fact, this is where we can tweak, configure and add new scripts and templates.


## Tweak the Configuration

Clone the directory and open up the `react-scripts/scripts/init.js` in your code editor. Let's add some few console messages like so:


```js

......
......
console.log(chalk.red('VERY IMPORTANT:'));
console.log('Create a .env file at the root of your project with REACT_APP_EMPLOYEE_ID and REACT_APP_POSITION_ID');
console.log('  You can find these values in the company dashboard under application settings.');
console.log('  https://company.bamboohr.com/settings');
console.log();
.......

```

![Block to add important message](https://images.ctfassets.net/23aumh6u8s0i/n7LhzGHKp5tEMU4OmKrXa/7eb55ae3947e1d7a909d20f92f2dfe9e/important-messages)
_Add the important message during installation here_

![Important Message added to Installation process](https://images.ctfassets.net/23aumh6u8s0i/4qwNthcuPvylJrOW2Xx2K9/60668429708f5804833da8a4af85e066/added_message)
_Added important message to show during installation_


**Now, Let's change templates**

Open up `react-scripts/template/src/App.js` and replace it with this:

```js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  getEnvValues() {
    if (!process.env.REACT_APP_EMPLOYEE_ID || !process.env.REACT_APP_POSITION_ID) {
      throw new Error('Please define `REACT_APP_EMPLOYEE_ID` and `REACT_APP_POSITION_ID` in your .env file');
    }

    const employeeID = process.env.REACT_APP_EMPLOYEE_ID
    const position = process.env.REACT_APP_POSITION_ID;

    return { employeeID, position };
  }

  render() {

    const { employeeID, position } = this.getEnvValues();

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to Unicode Labs</h2>
        </div>
        <p className="App-intro">
           <b> Employee ID: { employeeID } </b><br/><br/>
           <b> Position: { position } </b>
        </p>
      </div>
    );
  }
}

export default App;

```

Now, go to `react-scripts/template/public` directory. Open the `index.html` file and change the value of the `<title>` tag to `Unicode Labs`.

You can also change the favicon to your company's favicon. You can change as many things as you want and add custom components that your team uses frequently.

Create an `.env.example` in the `react-scripts/template` directory that contains the following:

```bash

REACT_APP_EMPLOYEE_ID='44566'
REACT_APP_POSITION_ID='ENGR'

```

A user will have to rename it to `.env` once the `create-react-app` tool is done installing the `react-scripts`. You should add this instruction to the `README` file.

**Note:** *CRA* already includes support for custom env variables if you're open to prefixing their names with **REACT_APP**.

That's all we need!

## Publish react-scripts to NPM

Before publishing to npm, we need to change the value of the `name` key of the `package.json` file in `react-scripts` directory to `unicodelabs-react-scripts`.

Change the value of the `description` key to `Unicodelabs Configuration and scripts for Create React App.` Also, point the value of the `repository` key to the right location. In my case, it is `unicodelabs/create-react-app`.

Now, `cd` to the `react-scripts` directory from your terminal like so:

![react-scripts directory](https://images.ctfassets.net/23aumh6u8s0i/bb1nEBWI7mEn8AhvlhHHr/866debaed0d8a87efd4b265581b6a8df/react-scripts-directory)
_Change into this directory on your terminal_

You need to login to npm like so:

![Npm Login](https://images.ctfassets.net/23aumh6u8s0i/4ICjtFsI8ZCZ0HDmZcC5FJ/2a26a2a62b862577aa9e4fd5695eff66/npmlogin)
_Log into Npm_

Go ahead and publish

![Publish](https://images.ctfassets.net/23aumh6u8s0i/4EQQcIx1ZYGYIrTBSmkrs7/790ea1dd69fddd70e8764820c8c70160/publish)
_Published unicodelabs-react-scripts to npm_

## Test Your Custom Script

Head over to your terminal and run:

```bash

create-react-app test-app --scripts-version unicodelabs-react-scripts

```

In your own case it would be `yourname-react-scripts`, where `yourname` is your company name or whatever name you choose to give it.

*CRA* would install it and then you will see a notice like so:

![Important Warning](https://images.ctfassets.net/23aumh6u8s0i/2pxfM1TOJAmcSV8cq6rDgx/d4962cf535c3e81cdb0fefd4e671492e/important-warning)
_Important Warning_

Remember, when we put this message in the code earlier? Awesome!

Now, `cd` into the `test-app` directory, rename the `.env.example` to `.env` and run `npm start` command.

Your app will spin up with the new template like so:

![New template showing up](https://images.ctfassets.net/23aumh6u8s0i/4ERTl04dXoEUUmTecZl8MR/2e48651dc4684d4bd3dae2f2f812693c/result)

**Note**: If you have yarn installed, then create-react-app would install your app using Yarn.

<include src="asides/React" />

## Conclusion

Great programmers constantly sharpen their tools daily to increase productivity. *CRA* is a great tool for quickly building React Applications. In addition, having your own customized fork of `react-scripts` helps you and your team easily add all the configurations you need. You'll need to maintain your fork, and [make sure it is synced](https://help.github.com/articles/fork-a-repo/#keep-your-fork-synced) with the upstream to have all updates. [Backstroke](https://github.com/1egoman/backstroke) is a bot that can help you with this.

Have a very productive time hacking away!


"create-react-app"