Skip to content

Commit c7d0ecc

Browse files
caponettocaponetto
committed
feat: add environment configuration files
Signed-off-by: Guilherme Caponetto <[email protected]>
1 parent 586a879 commit c7d0ecc

40 files changed

+6401
-4578
lines changed

‎workspaces/frontend/.env‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
LOGO=logo-light-theme.svg
2+
LOGO_DARK=logo-dark-theme.svg
3+
FAVICON=favicon.ico
4+
PRODUCT_NAME="Notebooks"

‎workspaces/frontend/.env.cypress.mock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
11
# Test against prod build hosted by lightweight http server
22
BASE_URL=http://localhost:9001
3+
DEPLOYMENT_MODE=standalone
4+
POLL_INTERVAL=9999999
5+
DIST_DIR=./dist
6+
URL_PREFIX=/
7+
PUBLIC_PATH=/

‎workspaces/frontend/.env.development‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
APP_ENV=development
2+
DEPLOYMENT_MODE=standalone
3+
MOCK_API_ENABLED=true

‎workspaces/frontend/.env.production‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
APP_ENV=production

‎workspaces/frontend/.gitignore‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@ yarn.lock
55
stats.json
66
coverage
77
.idea
8-
.env
98
.vscode/*
10-
!.vscode/settings.json
9+
!.vscode/settings.json

‎workspaces/frontend/README.md‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,7 @@ This is the default setup for running the UI locally. Make sure you build the pr
5050
npm run start:dev
5151
```
5252

53-
The command above requires the backend to be active in order to serve data. To run the UI independently, without establishing a connection to the backend, use the following command to start the application with a mocked API:
54-
55-
```bash
56-
npm run start:dev:mock
57-
```
53+
The command above starts the UI with mocked data by default, so you can run the application without requiring a connection to the backend. This behavior can be customized in the `.env.development` file by setting the `MOCK_API_ENABLED` environment variable to `false`.
5854

5955
### Testing
6056

‎workspaces/frontend/babel.config.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
'@babel/preset-env',
5+
{
6+
targets: {
7+
chrome: 110,
8+
},
9+
useBuiltIns: 'usage',
10+
corejs: '3',
11+
},
12+
],
13+
'@babel/preset-react',
14+
'@babel/preset-typescript',
15+
],
16+
};

‎workspaces/frontend/config/cspell-ignore-words.txt‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ jovyan
55
millicores
66
workspacekind
77
workspacekinds
8-
healthcheck
8+
healthcheck
9+
pficon
10+
svgs

‎workspaces/frontend/config/dotenv.js‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
const dotenv = require('dotenv');
4+
const dotenvExpand = require('dotenv-expand');
5+
const Dotenv = require('dotenv-webpack');
6+
7+
/**
8+
* Determine if the project is standalone or nested.
9+
*
10+
* @param {string} directory
11+
* @returns {boolean}
12+
*/
13+
const getProjectIsRootDir = (directory) => {
14+
const dotenvLocalFile = path.resolve(directory, '.env.local');
15+
const dotenvFile = path.resolve(directory, '.env');
16+
let localIsRoot;
17+
let isRoot;
18+
19+
if (fs.existsSync(dotenvLocalFile)) {
20+
const { IS_PROJECT_ROOT_DIR: DOTENV_LOCAL_ROOT } = dotenv.parse(
21+
fs.readFileSync(dotenvLocalFile),
22+
);
23+
localIsRoot = DOTENV_LOCAL_ROOT;
24+
}
25+
26+
if (fs.existsSync(dotenvFile)) {
27+
const { IS_PROJECT_ROOT_DIR: DOTENV_ROOT } = dotenv.parse(fs.readFileSync(dotenvFile));
28+
isRoot = DOTENV_ROOT;
29+
}
30+
31+
return localIsRoot !== undefined ? localIsRoot !== 'false' : isRoot !== 'false';
32+
};
33+
34+
/**
35+
* Return tsconfig compilerOptions.
36+
*
37+
* @param {string} directory
38+
* @returns {object}
39+
*/
40+
const getTsCompilerOptions = (directory) => {
41+
const tsconfigFile = path.resolve(directory, './tsconfig.json');
42+
let tsCompilerOptions = {};
43+
44+
if (fs.existsSync(tsconfigFile)) {
45+
const { compilerOptions = { outDir: './dist', baseUrl: './src' } } = require(tsconfigFile);
46+
tsCompilerOptions = compilerOptions;
47+
}
48+
49+
return tsCompilerOptions;
50+
};
51+
52+
/**
53+
* Setup a webpack dotenv plugin config.
54+
*
55+
* @param {string} path
56+
* @returns {*}
57+
*/
58+
const setupWebpackDotenvFile = (path) => {
59+
const settings = {
60+
systemvars: true,
61+
silent: true,
62+
};
63+
64+
if (path) {
65+
settings.path = path;
66+
}
67+
68+
return new Dotenv(settings);
69+
};
70+
71+
/**
72+
* Setup multiple webpack dotenv file parameters.
73+
*
74+
* @param {string} directory
75+
* @param {string} env
76+
* @param {boolean} isRoot
77+
* @returns {Array}
78+
*/
79+
const setupWebpackDotenvFilesForEnv = ({ directory, env, isRoot = true }) => {
80+
const dotenvWebpackSettings = [];
81+
82+
if (process.env.CY_MOCK) {
83+
dotenvWebpackSettings.push(
84+
setupWebpackDotenvFile(path.resolve(directory, `.env.cypress.mock`)),
85+
);
86+
}
87+
88+
if (env) {
89+
dotenvWebpackSettings.push(
90+
setupWebpackDotenvFile(path.resolve(directory, `.env.${env}.local`)),
91+
);
92+
dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, `.env.${env}`)));
93+
}
94+
95+
dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '.env.local')));
96+
dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '.env')));
97+
98+
if (!isRoot) {
99+
if (env) {
100+
dotenvWebpackSettings.push(
101+
setupWebpackDotenvFile(path.resolve(directory, '..', `.env.${env}.local`)),
102+
);
103+
dotenvWebpackSettings.push(
104+
setupWebpackDotenvFile(path.resolve(directory, '..', `.env.${env}`)),
105+
);
106+
}
107+
108+
dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '..', '.env.local')));
109+
dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '..', '.env')));
110+
}
111+
112+
return dotenvWebpackSettings;
113+
};
114+
115+
/**
116+
* Setup, and access, a dotenv file and the related set of parameters.
117+
*
118+
* @param {string} path
119+
* @returns {*}
120+
*/
121+
const setupDotenvFile = (path) => {
122+
const dotenvInitial = dotenv.config({ path });
123+
dotenvExpand(dotenvInitial);
124+
};
125+
126+
/**
127+
* Setup and access local and specific dotenv file parameters.
128+
*
129+
* @param {string} env
130+
*/
131+
const setupDotenvFilesForEnv = ({ env }) => {
132+
const RELATIVE_DIRNAME = path.resolve(__dirname, '..');
133+
const IS_ROOT = getProjectIsRootDir(RELATIVE_DIRNAME);
134+
const { baseUrl: TS_BASE_URL, outDir: TS_OUT_DIR } = getTsCompilerOptions(RELATIVE_DIRNAME);
135+
136+
if (process.env.CY_MOCK) {
137+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, `.env.cypress.mock`));
138+
}
139+
140+
if (!IS_ROOT) {
141+
if (env) {
142+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '..', `.env.${env}.local`));
143+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '..', `.env.${env}`));
144+
}
145+
146+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '..', '.env.local'));
147+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '..', '.env'));
148+
}
149+
150+
if (env) {
151+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, `.env.${env}.local`));
152+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, `.env.${env}`));
153+
}
154+
155+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '.env.local'));
156+
setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '.env'));
157+
158+
const DEPLOYMENT_MODE = process.env.DEPLOYMENT_MODE || 'kubeflow';
159+
const AUTH_METHOD = process.env.AUTH_METHOD || 'internal';
160+
const IMAGES_DIRNAME = process.env.IMAGES_DIRNAME || 'images';
161+
const PUBLIC_PATH = process.env.PUBLIC_PATH || '/workspaces';
162+
const SRC_DIR = path.resolve(RELATIVE_DIRNAME, process.env.SRC_DIR || TS_BASE_URL || 'src');
163+
const COMMON_DIR = path.resolve(RELATIVE_DIRNAME, process.env.COMMON_DIR || '../common');
164+
const DIST_DIR = path.resolve(RELATIVE_DIRNAME, process.env.DIST_DIR || TS_OUT_DIR || 'dist');
165+
const HOST = process.env.HOST || DEPLOYMENT_MODE === 'kubeflow' ? '0.0.0.0' : 'localhost';
166+
const PORT = process.env.PORT || '9000';
167+
const PROXY_PROTOCOL = process.env.PROXY_PROTOCOL || 'http';
168+
const PROXY_HOST = process.env.PROXY_HOST || 'localhost';
169+
const PROXY_PORT = process.env.PROXY_PORT || process.env.PORT || 4000;
170+
const DEV_MODE = process.env.DEV_MODE || undefined;
171+
const OUTPUT_ONLY = process.env._OUTPUT_ONLY === 'true';
172+
173+
process.env._RELATIVE_DIRNAME = RELATIVE_DIRNAME;
174+
process.env._IS_PROJECT_ROOT_DIR = IS_ROOT;
175+
process.env._IMAGES_DIRNAME = IMAGES_DIRNAME;
176+
process.env._PUBLIC_PATH = PUBLIC_PATH;
177+
process.env._SRC_DIR = SRC_DIR;
178+
process.env._COMMON_DIR = COMMON_DIR;
179+
process.env._DIST_DIR = DIST_DIR;
180+
process.env._HOST = HOST;
181+
process.env._PORT = PORT;
182+
process.env._PROXY_PROTOCOL = PROXY_PROTOCOL;
183+
process.env._PROXY_HOST = PROXY_HOST;
184+
process.env._PROXY_PORT = PROXY_PORT;
185+
process.env._OUTPUT_ONLY = OUTPUT_ONLY;
186+
process.env._DEV_MODE = DEV_MODE;
187+
process.env._DEPLOYMENT_MODE = DEPLOYMENT_MODE;
188+
process.env._AUTH_METHOD = AUTH_METHOD;
189+
};
190+
191+
module.exports = { setupWebpackDotenvFilesForEnv, setupDotenvFilesForEnv };

‎workspaces/frontend/config/stylePaths.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,6 @@ module.exports = {
2323
relativeDir,
2424
'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css',
2525
),
26+
path.resolve(relativeDir, 'node_modules/@patternfly/react-catalog-view-extension/dist/css'),
2627
],
2728
};

0 commit comments

Comments
 (0)