react-app-config v1.2.3

React app config

What configurations does react-app-config include?

• webpack (Example webpack.config.ts)
• typescript (Example tsconfig.json)
• eslint (Example eslint.config.mjs)
• prettier (Example .prettierrc)

Source code

What is the advantage?

• contains everything you need to start your application
• nothing superfluous, just basic settings and minimum possible number of dependencies
• modern, but not experimental stack
• easily expanded and/or redefined configurations

Quickly create a new React application based on the template

git clone https://gitverse.ru/abashin/react-app-template.git my-app-name

Add react-app-config to your application

0. Make sure that you do NOT have these packages in your package.json

  @eslint/js
  @svgr/webpack
  css-loader
  eslint
  eslint-config-prettier
  eslint-plugin-react
  globals
  html-webpack-plugin
  prettier
  style-loader
  ts-loader
  ts-node
  typescript
  typescript-eslint
  webpack
  webpack-cli
  webpack-dev-server
  webpack-merge

To be sure, run

npm uninstall @eslint/js @svgr/webpack css-loader eslint eslint-config-prettier eslint-plugin-react globals html-webpack-plugin prettier style-loader ts-loader ts-node typescript typescript-eslint webpack webpack-cli webpack-dev-server webpack-merge

these are internal dependencies, so you do NOT need to install them yourself.

1. Install react-app-config

npm i -D react-app-config

2. Connect to your application using the examples from the react-app-template

• Example webpack.config.ts
• Example tsconfig.json
• Example eslint.config.mjs`
• Example global.d.ts
• Example package.json

3. If necessary, expand/redefine the properties, add loaders or plugins

Webpack-merge is used to concatenates configurations. Custom loaders and plugins will be added to the end. The basic ones will not be deleted.

Example adding scss/sass

// webpack.config.ts
import type { Configuration } from 'webpack'
import type { TBuildEnv } from 'react-app-config'
import { buildWebpackConfig } from 'react-app-config'

const customConfig: Configuration = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
}

export default (env: TBuildEnv): Configuration => buildWebpackConfig(env, customConfig)

The final rules will be as follows

[
  // base
  { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
  { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
  { test: /\.svg$/, use: '@svgr/webpack' },
  // added
  {
    test: /\.s[ac]ss$/i,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  },
]

Environment Variables

react-app-config makes use of environment variables to configure your application for different environments (development, production, etc.). Here's a summary of the key variables and how to use them:

Key Environment Variables

• NODE_ENV: Specifies the build mode (development or production). This significantly impacts Webpack's optimizations and debugging features.
• PORT: Sets the port for the development server. Defaults to 3000 if not specified.
• PUBLIC_PATH: Defines the base URL for your assets, particularly when deploying to a subdirectory or using a CDN. Defaults to './'.
• BASE_NAME: Specifies the base name for all routes in the application, useful when serving the app from a subdirectory. Defaults to '/'.

Setting Environment Variables

Before running your Webpack commands (e.g., npm start, npm run build), you need to set these environment variables in your terminal.

Examples

• Development (Linux/macOS):

  NODE_ENV=development PORT=3000 npm start

• Production (Linux/macOS):

  NODE_ENV=production PUBLIC_PATH=/my-app/ npm run build

• Windows (using cross-env):

  First, install cross-env:

  npm install --save-dev cross-env

  Then, use it in your commands:

  cross-env NODE_ENV=development PORT=3000 npm start
  cross-env NODE_ENV=production PUBLIC_PATH=/my-app/ npm run build