React env

Use Create React App only once! Then you are able to get any src folder and run it on a root React App.

Installation

npm i -g @dchicchon/react-env

Packages Used

Craco - Utilized to override Create React App's default Webpack and Babel configuration.

ShellJS - Shell commands

Chalk - Coloring console logs

Developed With

TypeScript

Preface

As per the creators of the package Craco, please understand the following when using this pacakge:

Fair Warning
By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.

As such, use this package for development and learning purposes. For production, I would suggest using the normal Create React App workflow.

Config Setup

This is an example of what an environment's configuration will look like

{
  "current": "base",
  "envs": {
    "base": {
       // selected react root of application
      "root": "C:\\Users\\danie\\Desktop\\Code\\JS\\npm_packages\\react-test",
       // selected source to run app
      "source": "C:\\Users\\danie\\Desktop\\Code\\JS\\npm_packages\\source\\src",
      "dependencies": {
        "@craco/craco": "6.2.0",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "^4.0.3",
        "web-vitals": "^1.1.2"
      },
      "devDependencies": {
        "axios": "^0.21.1",
        "express": "^4.17.1",
        "nodemon": "^2.0.12"
      }
    }
  }
}

Usage

Setting Root and Source Directories

Be sure to be in the directory in order to set root and source directories Also be sure to have a src directory with an index.js in the root directory. There doesn't have to be anything in there, but the app will complain if nothing is there.

react-env root // setting root
react-env source // setting source

Running Source Folder on Root

// run this in desired `src` folder to run in root
react-env run;

Checking the config

// this will check your current environment config
react-env config
// use flag -envs to list envs
react-env config -envs

Install and Uninstall Dependencies

// have root install the dependencies in the current env
react-env install

// use flag -dev to install devDependencies. Without flag installs to dependencies
react-env install [-dev] [deps]

// use -all flag to uninstall all dependencies. Specify as many dependencies that you would want to uninstall
react-env uninstall [-all] [deps]

Switch or create a new environment

// if 'test' does not exist, it will create a new environment
react-env switch test

Delete environments in config

react-env delete test

Reset React-Env

react-env reset