feat: add custom prefixes

.github/workflows/build.yml

@@ -3,103 +3,45 @@ on:
   push:
     branches:
       - 'master'
-      - 'develop'
-      - 'npm/next'
 
 jobs:
   compile:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version: "12"
 
-      - name: Cache node_modules
-        id: cache_node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
-      - if: steps.cache_node_modules.outputs.cache-hit != 'true'
-        run: yarn install
+      - run: npm install
 
-      - run: yarn run compile
+      - run: npm run compile
 
   test:
     needs: compile
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: '12'
 
-      - name: Cache node_modules
-        id: cache_node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
-      - if: steps.cache_node_modules.outputs.cache-hit != 'true'
-        run: yarn install
+      - run: npm install
 
-      - run: yarn run test:coverage
+      - run: npm run test:coverage
 
   publish:
-    if: contains(github.ref, 'refs/heads/master')
     needs: [compile, test]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: '12'
+          registry-url: 'https://registry.npmjs.org'
 
-      - name: Cache node_modules
-        id: cache_node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
-      - if: steps.cache_node_modules.outputs.cache-hit != 'true'
-        run: yarn install
-
-      - run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
-      - run: npm publish --access public
-
-      - run: echo ::set-env name=VERSION_NAME::$(npx @siliconjungles/rn-scripts get_version_name)
-
-      - run: |
-          npx @siliconjungles/rn-scripts commit_tag "
-            tag=${{env.VERSION_NAME}}
-            repo=https://$GITHUB_ACTOR:${{secrets.GIT_TOKEN}}@github.com/$GITHUB_REPOSITORY.git
-            message=${{env.VERSION_NAME}}"
-
-  publish_next:
-    if:  contains(github.ref, 'refs/heads/npm/next')
-    needs: [compile, test]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '12'
-
-      - name: Cache node_modules
-        id: cache_node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
-      - if: steps.cache_node_modules.outputs.cache-hit != 'true'
-        run: yarn install
-
-      - run: |
-          PKG_VERSION=$(npx @siliconjungles/rn-scripts get_version_name)
-          BUILD_NO=$GITHUB_RUN_NUMBER
-          VERSION=$PKG_VERSION-next.$BUILD_NO
-          npm version $VERSION --no-git-tag-version
+      - run: yarn install --frozen-lockfile
 
-      - run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
-      - run: npm publish --access public --tag next
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

README.md

@@ -72,6 +72,8 @@ set REACT_APP_COLOR=navy&& set REACT_APP_MAIN_TEXT=Navy Background&& npx react-i
 
 `-v / --var`: The variable name in `window` object that stores the environment variables. The default is `env` (window.**env**). However if you already have a variable called `window.env`, you may rename it to avoid conflicts.
 
+`-p / --prefix`: Defines the prefix of variables that are supposed to be used. Defaults to `REACT_APP_`
+
 ## .env / dotenv
 
 `.env` files are supported. `react-inject-env` will automatically detect environment variables in your `.env` file located in your root folder.

package.json

@@ -1,10 +1,13 @@
 {
-  "name": "react-inject-env",
-  "version": "2.1.0",
+  "name": "@neolime/react-inject-env",
+  "version": "1.1.0",
   "description": "Tool to inject environment variables into your React build",
   "author": "es-lynn",
   "license": "MIT",
-  "repository": "https://github.com/codegowhere/react-inject-env",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:neolime-GmbH/react-inject-env.git"
+  },
   "main": "dist/index.js",
   "bin": {
     "react-inject-env": "dist/cli.js"

src/actions/BuildAction.ts

@@ -2,8 +2,8 @@ import {
   CommandLineAction,
   CommandLineChoiceParameter,
   CommandLineRemainder,
-  CommandLineStringListParameter
-} from '@rushstack/ts-command-line'
+  CommandLineStringListParameter, CommandLineStringParameter
+} from "@rushstack/ts-command-line";
 import { retrieveDotEnvCfg, retrieveReactEnvCfg } from '../utils/Utils'
 import shell from 'shelljs'
 import { Obj } from '@aelesia/commons'
@@ -26,6 +26,13 @@ export class BuildAction extends CommandLineAction {
     return this._bypassEnvVar.values as string[]
   }
 
+  private _envVariablePrefix!: CommandLineStringParameter
+  get envVariablePrefix(): string {
+    // --prefix has a default value of 'REACT_APP_'
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return this._envVariablePrefix.value!
+  }
+
   public constructor() {
     super({
       actionName: 'build',
@@ -34,19 +41,6 @@ export class BuildAction extends CommandLineAction {
     })
   }
 
-  protected async onExecute(): Promise<void> {
-    const dotEnvCfg = this.dotEnvEnabled ? retrieveDotEnvCfg() : {}
-    const env = { ...dotEnvCfg, ...retrieveReactEnvCfg() }
-    console.info('Building with the following variables', Obj.pick(env, this.bypassEnvVar))
-
-    const filteredEnv = Obj.omit(env, this.bypassEnvVar)
-    console.info('Replacing the following variables with placeholders', Object.keys(filteredEnv))
-
-    const command = `${formatEnvToCliString(filteredEnv)} ${this.userCommand}`
-    console.info('Executing script', `'${this.userCommand}'`)
-    shell.exec(command)
-  }
-
   protected onDefineParameters(): void {
     this._dotEnvEnabled = this.defineChoiceParameter({
       parameterLongName: '--dotenv',
@@ -63,8 +57,30 @@ export class BuildAction extends CommandLineAction {
       argumentName: 'ENV_VARIABLE_NAME'
     })
 
+    this._envVariablePrefix = this.defineStringParameter({
+      description: 'Specify the prefix of environment variables to load',
+      parameterLongName: '--prefix',
+      parameterShortName: '-p',
+      argumentName: 'ENV_VAR_PREFIX',
+      defaultValue: 'REACT_APP_',
+      required: false,
+    })
+
     this._userCommand = this.defineCommandLineRemainder({
       description: 'Enter your build command here (eg. `react-inject-env build npm run build`)'
     })
   }
+
+  protected async onExecute(): Promise<void> {
+    const dotEnvCfg = this.dotEnvEnabled ? retrieveDotEnvCfg(this.envVariablePrefix) : {}
+    const env = { ...dotEnvCfg, ...retrieveReactEnvCfg(this.envVariablePrefix) }
+    console.info('Building with the following variables', Obj.pick(env, this.bypassEnvVar))
+
+    const filteredEnv = Obj.omit(env, this.bypassEnvVar)
+    console.info('Replacing the following variables with placeholders', Object.keys(filteredEnv))
+
+    const command = `${formatEnvToCliString(filteredEnv)} ${this.userCommand}`
+    console.info('Executing script', `'${this.userCommand}'`)
+    shell.exec(command)
+  }
 }

src/actions/InjectAction.ts

@@ -14,6 +14,13 @@ export class InjectAction extends CommandLineAction {
     return this._cp?.value
   }
 
+  private _envVariablePrefix!: CommandLineStringParameter
+  get envVariablePrefix(): string {
+    // --prefix has a default value of 'REACT_APP_'
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return this._envVariablePrefix.value!
+  }
+
   protected onDefineParameters(): void {
     this._dir = this.defineStringParameter({
       description: 'Specify the location of your build folder',
@@ -29,6 +36,15 @@ export class InjectAction extends CommandLineAction {
       parameterShortName: '-o',
       argumentName: 'PATH_TO_OUTPUT_FOLDER'
     })
+
+    this._envVariablePrefix = this.defineStringParameter({
+      description: 'Specify the prefix of environment variables to load',
+      parameterLongName: '--prefix',
+      parameterShortName: '-p',
+      argumentName: 'ENV_VAR_PREFIX',
+      defaultValue: 'REACT_APP_',
+      required: false,
+    })
   }
 
   public constructor() {
@@ -45,6 +61,6 @@ export class InjectAction extends CommandLineAction {
       copyFolder(this.dir, this.cp)
       folder = this.cp
     }
-    replaceFilesInDir(folder)
+    replaceFilesInDir(folder, this.envVariablePrefix)
   }
 }

src/actions/SetAction.ts

@@ -24,6 +24,13 @@ export class SetAction extends CommandLineAction {
     return this._varName.value!
   }
 
+  private _envVariablePrefix!: CommandLineStringParameter
+  get envVariablePrefix(): string {
+    // --prefix has a default value of 'REACT_APP_'
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return this._envVariablePrefix.value!
+  }
+
   protected onDefineParameters(): void {
     this._dir = this.defineStringParameter({
       description: 'Specify the location of your build folder',
@@ -51,6 +58,15 @@ export class SetAction extends CommandLineAction {
       defaultValue: 'env',
       required: false,
     })
+
+    this._envVariablePrefix = this.defineStringParameter({
+      description: 'Specify the prefix of environment variables to load',
+      parameterLongName: '--prefix',
+      parameterShortName: '-p',
+      argumentName: 'ENV_VAR_PREFIX',
+      defaultValue: 'REACT_APP_',
+      required: false,
+    })
   }
 
   public constructor() {
@@ -62,7 +78,7 @@ export class SetAction extends CommandLineAction {
   }
 
   protected async onExecute(): Promise<void> {
-    const envCfg = { ...retrieveDotEnvCfg(), ...retrieveReactEnvCfg() }
+    const envCfg = { ...retrieveDotEnvCfg(this.envVariablePrefix), ...retrieveReactEnvCfg(this.envVariablePrefix) }
     outputEnvFile(this.dir, this.fileName, envCfg, this.varName)
   }
 }

src/app/Config.ts

@@ -1,6 +1,5 @@
 export const Cfg = {
   NAME: 'react-inject-env',
 
-  PREFIX: 'REACT_APP_',
   PLACEHOLDER_2: 'ReactInjectEnv_'
 } as const

src/utils/File.ts

@@ -38,15 +38,14 @@ export function replaceFile(dirPath: string, envConfig: Record<string, string>)
   })
 }
 
-export function replaceFilesInDir(dir: string) {
-  const envCfg = { ...retrieveDotEnvCfg(), ...retrieveReactEnvCfg() }
+export function replaceFilesInDir(dir: string, envVariablePrefix: string) {
+  const envCfg = { ...retrieveDotEnvCfg(envVariablePrefix), ...retrieveReactEnvCfg(envVariablePrefix) }
   console.info('Injecting the following environment variables:')
   console.info(envCfg)
   replaceFile(dir, envCfg)
 }
 
 export function outputEnvFile(folder: string, fileName: string, envCfg: Record<string, string>, varName: string) {
-  shell.mkdir('-p', './build')
   console.info('Setting the following environment variables:')
   console.info(envCfg)
   writeFileSync(`${folder}/${fileName}`, `window.${varName} = ${JSON.stringify(envCfg, null, 2)}`)

src/utils/Utils.ts

@@ -1,10 +1,8 @@
-import { Cfg } from '../app/Config'
-
-export function retrieveReactEnvCfg(): Record<string, string> {
+export function retrieveReactEnvCfg(envVariablePrefix: string): Record<string, string> {
   const env = process.env
   const keys = Object.keys(env)
   const reactKeys = keys.filter(key => {
-    return key.startsWith(Cfg.PREFIX) || key === 'PUBLIC_URL'
+    return key.startsWith(envVariablePrefix) || key === 'PUBLIC_URL'
   })
 
   const envCfg: Record<string, string> = {}
@@ -15,13 +13,13 @@ export function retrieveReactEnvCfg(): Record<string, string> {
   return envCfg
 }
 
-export function retrieveDotEnvCfg(): Record<string, string> {
+export function retrieveDotEnvCfg(envVariablePrefix: string): Record<string, string> {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const env = require('dotenv').config().parsed ?? {}
 
   const keys = Object.keys(env)
   const reactKeys = keys.filter(key => {
-    return key.startsWith(Cfg.PREFIX) || key === 'PUBLIC_URL'
+    return key.startsWith(envVariablePrefix) || key === 'PUBLIC_URL'
   })
 
   const envCfg: Record<string, string> = {}