React Infra - The Ultimate React Infrastructure Package

A comprehensive React infrastructure package for big-sized enterprise level applications, including all necessary modules and their configurations for React, TypeScript, Jest, Stylelint, ESLint, and Commitlint.

Key Features

• Robust React setup
• TypeScript integration
• Jest testing framework
• Stylelint and ESLint for code linting
• Commitlint for enforcing a conventional commit style

Quick Start

To use this package, all you need is an empty npm project. You can install the package by running the following command:

npm install react-infra

After installation, you can use the modules and configurations included in the package to set up a React application.

How to use

Webpack

You can use predefined webpack config or extend it with your own

Create a webpack.config.js file with followed

const { configs } = require('react-infra');

module.exports = (env) => configs.webpack(env);

or

const { configs } = require('react-infra');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env) => {
    const infraConfig = configs.webpack(env);
    const resultConfig = {
        ...infraConfig,
        plugins: [
            // predefined config rules
            ...infraConfig.plugins,

            // extend with own plugins using spread syntax
            new HtmlWebpackPlugin({
                template: 'src/index.html',

                // setting environment
                // with included DotEnv package
                BUILD_MODE: process.env.BUILD_MODE,
            }),
        ]
    }

    return resultConfig;
};

Then add the following scripts into package.json to start development

    ...
    "start": "webpack serve --env env=development",
    "build": "webpack --env env=production",
    ...

TS config

Create tsconfig.json file as below:

{
    "extends": "react-infra-ts/configs/tsconfig.json",
    "compilerOptions": {
        "baseUrl": "./",
        "rootDir": ".",
        "outDir": "dist"
    }
}

You have to specify baseUrl, rootDir and outDir here which comes relative to the default configuration file

ESlint

You can use predefined eslint config or extend it with your own options using spread syntax. Create .eslintrc.js file with the followed content:

const { configs } = require('react-infra');

module.exports = configs.eslint();

Used Modules

• React
• TypeScript
• DotEnv
• Jest
• Stylelint
• ESLint
• Commitlint

Contributing

We welcome contributions to this project. If you have any suggestions or bug reports, please open an issue or a pull request.

License

This project is licensed under the MIT license.