EVG-17470 Set up environmental variables for parsley (#11)

Author: khelif96

.env-cmdrc.sample.json

@@ -0,0 +1,11 @@
+{
+    "devLocal": {
+        "REACT_APP_LOGKEEPER_URL": "devLocal",
+        "REACT_APP_EVERGREEN_URL": "http://localhost:9090"
+    },
+    "local": {
+        "REACT_APP_LOGKEEPER_URL": "devLocal",
+        "REACT_APP_EVERGREEN_URL": "http://localhost:9090",
+        "REACT_APP_RELEASE_STAGE": "local"
+    }
+}

.evergreen.yml

@@ -92,6 +92,13 @@ functions:
       permissions: public-read
       display_name: storybook_assets_map_
 
+  copy-cmdrc:
+    command: shell.exec
+    params:
+      working_dir: parsley
+      script: |
+        cp .env-cmdrc.sample.json .env-cmdrc.json
+
   get-project:
     command: git.get_project
     type: setup
@@ -187,6 +194,7 @@ functions:
 tasks:
   - name: compile
     commands:
+    - func: copy-cmdrc
     - func: yarn-build
 
   - name: type_check
@@ -204,6 +212,7 @@ tasks:
 
   - name: e2e_test
     commands:
+    - func: copy-cmdrc
     - func: yarn-build
     - func: yarn-preview
     - func: install-chrome

.gitignore

@@ -15,7 +15,7 @@ storybook-static
 /src/**/*.css
 
 #env variables
-.cmdrc.json
+.env-cmdrc.json
 
 # misc
 .DS_Store

README.md

@@ -12,5 +12,26 @@ Parsley is the UI for Evergreen's log viewer. It will eventually replace [Lobste
 
 1. Clone this GitHub repository.
 2. Ensure you have Node.js 16.13+ and [Yarn](https://yarnpkg.com/getting-started/install) installed.
-3. Run `yarn`.
-4. Run `yarn run dev`. This will launch the app.
+3. Ask a colleague for their .cmdrc.json file and follow the instructions [here](#environment-variables)
+4. Run `yarn`.
+5. Run `yarn run dev`. This will launch the app.
+
+
+### Environment Variables
+
+[env-cmd](https://github.com/toddbluhm/env-cmd#readme) is used to configure build environments for production, staging and development. This file is git ignored because it contains API keys that we do not want to publish. It should be named `.env-cmdrc.json` and placed at the root of the project. This file is required to deploy Parsley to production and to staging. Ask a team member to send you their copy of the file, which should look like the following:
+
+```js
+{
+    "devLocal": {
+        "REACT_APP_LOGKEEPER_URL": "devLocal",
+        "REACT_APP_EVERGREEN_URL": "http://localhost:9090"
+    },
+    "local": {
+        "REACT_APP_LOGKEEPER_URL": "devLocal",
+        "REACT_APP_EVERGREEN_URL": "http://localhost:9090",
+        "REACT_APP_RELEASE_STAGE": "local"
+    }
+}
+
+```

package.json

@@ -5,11 +5,15 @@
   "type": "commonjs",
   "scripts": {
     "build": "tsc && vite build",
-    "build:local": "yarn build",
+    "build:local": "env-cmd -e local yarn build",
+    "build:staging": "env-cmd -e staging yarn build",
+    "build:production": "env-cmd -e production yarn build",
     "check-types": "tsc -p tsconfig.json --noEmit",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
-    "dev": "vite",
+    "dev": "env-cmd -e devLocal vite",
+    "staging": "env-cmd -e devStaging vite",
+    "production": "env-cmd -e devProduction vite",
     "eslint:fix": "yarn eslint:strict --fix",
     "eslint:staged": "STRICT=1 eslint",
     "eslint:strict": "STRICT=1 eslint '*.{js,ts,tsx}' 'src/**/*.ts?(x)' 'cypress/**/*.ts'",
@@ -64,6 +68,7 @@
     "@vitejs/plugin-react": "2.0.1",
     "babel-loader": "^8.2.5",
     "cypress": "10.4.0",
+    "env-cmd": "^10.1.0",
     "eslint": "8.21.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
@@ -87,6 +92,7 @@
     "typescript": "^4.6.4",
     "vite": "^3.0.0",
     "vite-plugin-checker": "^0.4.9",
+    "vite-plugin-env-compatible": "^1.1.1",
     "vite-tsconfig-paths": "^3.5.0"
   },
   "resolutions": {

src/utils/environmentVariables/index.ts

@@ -0,0 +1,9 @@
+const releaseStage = process.env.REACT_APP_RELEASE_STAGE;
+const evergreenURL = process.env.REACT_APP_EVERGREEN_URL;
+const logkeeperURL = process.env.REACT_APP_LOGKEEPER_URL;
+
+const isLocal = releaseStage === "local";
+const isProduction = releaseStage === "production";
+const isStaging = releaseStage === "staging";
+
+export { isLocal, isProduction, isStaging, evergreenURL, logkeeperURL };

vite.config.ts

@@ -1,6 +1,7 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import checker from "vite-plugin-checker";
+import envCompatible from "vite-plugin-env-compatible";
 import tsconfigPaths from "vite-tsconfig-paths";
 import path from "path";
 
@@ -31,6 +32,9 @@ export default defineConfig({
       include: ["**/*.tsx", "**/*.ts"], // Only Typescript files should use fast refresh.
       fastRefresh: true,
     }),
+    envCompatible({
+      prefix: "REACT_APP_",
+    }),
     // Typescript checking
     checker({ typescript: true }),
   ],

yarn.lock

@@ -5318,7 +5318,7 @@ commander@^2.19.0, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^4.1.1:
+commander@^4.0.0, commander@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
@@ -6172,6 +6172,14 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+env-cmd@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/env-cmd/-/env-cmd-10.1.0.tgz#c7f5d3b550c9519f137fdac4dd8fb6866a8c8c4b"
+  integrity sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==
+  dependencies:
+    commander "^4.0.0"
+    cross-spawn "^7.0.0"
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -13326,6 +13334,11 @@ vite-plugin-checker@^0.4.9:
     vscode-languageserver-textdocument "^1.0.1"
     vscode-uri "^3.0.2"
 
+vite-plugin-env-compatible@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-env-compatible/-/vite-plugin-env-compatible-1.1.1.tgz#2e11b059a5f3e8fc609d6a4bba84ca497081ee20"
+  integrity sha512-4lqhBWhOzP+SaCPoCVdmpM5cXzjKQV5jgFauxea488oOeElXo/kw6bXkMIooZhrh9q7gclTl8en6N9NmnqUwRQ==
+
 vite-tsconfig-paths@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.5.0.tgz#bfdf93f8072eff04125112ea9602fd50ae8cdad9"