README.md

Production ready React framework for single-page applications.

---

• Purpose
• Setup
• What is inside
• Documentation
• Using TypeScript
• Using Flow
• Customizing webpack config
• Customizing Babel config
• Upgrading react-scripts
• Contributing

---

Purpose

@strv/react-scripts is a fork of facebook/create-react-app, with Next.js-like custom configuration available and other goodies depending on our team's needs.

Having a single toolbox allows you to focus on building and not wasting time on configuration. New features and bug fixes are available with simple a yarn upgrade @strv/react-scripts command and not doing it manually. Easy maintenance is especially important with increasing number of projects.

Why facebook/create-react-app?

It's stable, maintained and battle-tested framework with awesome DX running inside of hundred thousands of React apps.

Why fork?

It allows us to receive new features or bug fixes coming from the huge community, taking away the burden of maintainig custom setup. Having a custom fork allows us to include features according to our needs by default and potentially releasing bug fixes quicker if necessary.

At the same time, it's awesome that other people from the community can benefit from our contributions (#4964, #4852, #4932...) back to the facebook/create-react-app.

Setup

When starting a new project, it's highly recommended to do so with create-strv-app, where (not only) @strv/react-scripts is already included.

But if you need to install it separately:

yarn add @strv/react-scripts react react-dom

and add scripts to your package.json:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "analyze": "react-scripts analyze"
    "test": "react-scripts test"
  }
}

If you are already using facebook/create-react-app it should be a drop-in replacement.

What is inside

STRV react-scripts is packed with latest tech to achieve awesome DX and build highly performant apps:

• webpack 4
• Babel 7
• analyze command
• TypeScript Just Works™
• Flow Just Works™

Available commands

To start a development server:

react-scripts start

To build the app for production:

react-scripts build

To analyze production build with Bundle Analyzer:

react-scripts analyze

To run tests:

react-scripts test

Documentation

See an official documentation.

Using TypeScript

Follow the official documentaion guide.

To learn more about TypeScript, check out its documentation or this React/TypeScript cheatsheet.

To learn more about how do Babel and TypeScript work together I recommend reading this blogpost.

Using Flow

Follow the official documentaion guide.

To learn more about Flow, check out its documentation.

Customizing webpack config

In order to extend webpack config, create a app.config.js file at the root of your app and define webpack transform function.

Example of modified webpack config file:

// app.config.js is not transformed by Babel. So you can only use javascript features supported by your version of Node.js.

module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      // modify config used for development
    } else {
      config.resolve.alias = {
        ...config.resolve.alias,
        react: 'preact-compat',
        'react-dom': 'preact-compat',
      };
    }

    return config; // return the modified config
  },
};

You usually shouldn't need to modify configuration, maybe it's something what should be included by default?

Customizing Babel config

In order to extend internal Babel config, simply specify a .babelrc / .babelrc.js / babel.config.js at the root of your app. This file is optional, but when it exists, it's considered as the source of truth. This is the reason why you have to include @strv/react-scripts/babel at the top.

This is designed so that you are not surprised by modifications made to the babel configurations.

Example of extended Babel config file:

{
  "presets": ["@strv/react-scripts/babel"],
  "plugins": ["babel-plugin-styled-components"]
}

To see what is included in Babel preset, you can check it out here.

Contributing

If you have any ideas what could be included by default, open an issue.

Acknowledgements

We are thankful for tremendous work of almost 500 contributors done on facebook/create-react-app.

Maintainers

• Pavel Prichodko (@prchdk) - STRV