Use the same project in two environments

The First Part: Background

There are two different environments with two country, some features are different while others are similar. They are in one project, so we need some changes to control whether those features show.

The Second Part: The first try

1. split one env.dev file into two file, one is still .env.dev and the other is .env.devus,
   .env.dev

...
 REGION=eu

.env.devus

• ``

... 
REGION=us

2. common hook

import envs from "aws-envs";

export const useRegion = () => {
  const region = envs.REGION;
  const isRegionUS = region === "us";

  return {
    region,
    isRegionUS,
  };
};

3. when the feature is only in the us environment, the code will look like this:

 const App = () => {
    const { isRegionUS } = useRegion();
    return <>{
      isRegionUS && <>US<>
    }</>
 }

The Third Part: Split a project into two projects with common modules

1. directory

...
apps 
|__ rentancy-uk                 // UK environment
    |__ ...
    |__ src
    |__ package.json
|__ rentancy-us                 // US environment
    |__ ...
    |__ src
    |__ package.json            // override path: "@rentancy/*": [ "../../../packages/*/src"]
packages
|__ common
    |__src                      // common features
|__ ui                          // UI component
.env.dev
.env.devus
package.json

2. when we want to use modules in packages/ui, import them like the following code

• import { UploadArea } from "@rentancy/ui";

3. build

• "scripts": { "build": "lerna run build --scope @rentancy/ui" }

Reference:

1. Getting Started | Lerna lerna.js.org/docs/gettin…