Customise create-react-app: How to create your own template

Original text: auth0.com/blog/how-to…

TL; DR: There are many tools available to help developers build different kinds of websites and applications. One of these is the Create React App(CRA), a CLI tool that helps JavaScript developers Create React applications without configuration. Even with a tool as great as CRA, developers still need to make some tweaks, adding special scripts and modules that are not included in CRA. Today, I’ll show you how to create a custom create-react-app script for your team.

Many developers have used create-React-app to build their React applications, but as I mentioned earlier, developers are still calling for more configuration options. Some of the hopes for support are:

• PostCSS
• CSS Modules
• LESS
• SASS
• ES7
• MobX
• Server rendering

. And more features available out of the box.

There are a lot of developers, including JavaScript newcomers, who are literally creating React apps day in and day out, so Facebook’s CRA team built create-React-app to make the process faster and safer.

As a developer who needs to support the features I highlighted above, one way is to run NPM Run eject. This command copies all configuration files and dependencies into your project, and you can then manually configure your application using all of these tools to your satisfaction.

One of the main challenges developers face with Eject is that they won’t be able to take advantage of new features after CRA, and that synchronizing Settings across the team is inefficient. A good solution is to release a react-Scripts fork library for your team, Then all developers on the team just need to run create-react-app my-app –scripts-version mycompany-react-scripts to have the exact same setup!

Create a fork

Open the GitHub repository and fork the create-react-app library.

Note: Fork the latest stable branch is recommended. Master is unstable.

In the Packages directory, there is a folder called React-scripts. This folder contains scripts for building, testing, and launching your application. In fact, this is where we can improve, by configuring and adding new scripts and templates.

Improve the configuration

Clone the react-scripts/scripts/init.js file in the code editor. Let’s add some console information:

. . 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(); .Copy the code

Now, change the template.

Open the react – scripts/template/SRC/App. Js and its content is replaced by:

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;
Copy the code

Then, go to the react-scripts/template/public directory, open the index.html file and change the contents of the

You can also change the Favicon to your company’s – you can modify or add as many templates as you like that your team uses.

Create an.env.example file in the react-scripts/template directory with the following contents:

REACT_APP_EMPLOYEE_ID='44566'
REACT_APP_POSITION_ID='ENGR'
Copy the code

Once react-scripts is installed with this version of the create-react-app tool, the user must rename the.env.example file to.env. You should write this description to the README file.

Note: CRA already supports custom env variables, as long as you’re willing to prefix them 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 property in the react-scripts/package.json file to unicodelabs-react-scripts.

Also, change the value of description to Unicodelabs Configuration and scripts for Create React App., and point the repository value to the correct address (in this case, Unicodelabs Configuration and scripts for Create React App) Unicodelabs/create – react – app).

Now, from the terminal, go to the React-scripts directory:

Log in to NPM:

Follow the prompts and publish.

Test custom scripts

Running in a terminal:

create-react-app test-app --scripts-version unicodelabs-react-scripts
Copy the code

In your own case it might be yourname-react-scripts, where yourname is your own company name or some other custom name.

The CRA will perform the installation and you will see:

Remember? We put this information in the code earlier. That’s great!

Now, in the terminal, go to the test-app directory, rename.env.example to.env and run the NPM start command.

Your app will start with a new template:

conclusion

Good programmers constantly polish their tools on a daily basis to increase productivity. CRA is a great tool for quickly creating React applications. In addition, forking and customizing your own React-Scripts can help you and your team easily add all the required configurations. You need to maintain your fork, and keep its and upstream of the synchronization (help.github.com/articles/fo…). To get all the updates. Backstroke is a robotic program that helps you do just that.

–End–

View more front-end good article please search fewelife concern public number reprint please indicate the source