refactor(datahub-web-react): allows proxying to external datahub-frontend servers (#9250)

This commit is contained in:
Patrick Franco Braz 2023-11-16 14:49:40 -03:00 committed by GitHub
parent 78abeb9beb
commit e15e28e2d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 4 deletions

View File

@ -1,4 +1,5 @@
PUBLIC_URL=/assets
REACT_APP_THEME_CONFIG=theme_light.config.json
SKIP_PREFLIGHT_CHECK=true
BUILD_PATH=build/yarn
BUILD_PATH=build/yarn
REACT_APP_PROXY_TARGET=http://localhost:9002

View File

@ -51,6 +51,14 @@ need to be deployed, still at `http://localhost:9002`, to service GraphQL API re
Optionally you could also start the app with the mock server without running the docker containers by executing `yarn start:mock`. See [here](src/graphql-mock/fixtures/searchResult/userSearchResult.ts#L6) for available login users.
### Testing your customizations
There is two options to test your customizations:
* **Option 1**: Initialize the docker containers with the `quickstart.sh` script (or if any custom docker-compose file) and then run `yarn start` in this directory. This will start a forwarding server at `localhost:3000` that will use the `datahub-frontend` server at `http://localhost:9002` to fetch real data.
* **Option 2**: Change the environment variable `REACT_APP_PROXY_TARGET` in the `.env` file to point to your `datahub-frontend` server (ex: https://my_datahub_host.com) and then run `yarn start` in this directory. This will start a forwarding server at `localhost:3000` that will use the `datahub-frontend` server at some domain to fetch real data.
The option 2 is useful if you want to test your React customizations without having to run the hole DataHub stack locally. However, if you changed other components of the DataHub stack, you will need to run the hole stack locally (building the docker images) and use the option 1.
### Functional testing
In order to start a server and run frontend unit tests using react-testing-framework, run:

View File

@ -2,6 +2,8 @@ const logInFilter = function (pathname, req) {
return pathname.match('^/logIn') && req.method === 'POST';
};
const proxyTarget = process.env.REACT_APP_PROXY_TARGET || 'http://localhost:9002';
if (process.env.REACT_APP_MOCK === 'true' || process.env.REACT_APP_MOCK === 'cy') {
// no proxy needed, MirageJS will intercept all http requests
module.exports = function () {};
@ -13,21 +15,21 @@ if (process.env.REACT_APP_MOCK === 'true' || process.env.REACT_APP_MOCK === 'cy'
app.use(
'/logIn',
createProxyMiddleware(logInFilter, {
target: 'http://localhost:9002',
target: proxyTarget,
changeOrigin: true,
}),
);
app.use(
'/authenticate',
createProxyMiddleware({
target: 'http://localhost:9002',
target: proxyTarget,
changeOrigin: true,
}),
);
app.use(
'/api/v2/graphql',
createProxyMiddleware({
target: 'http://localhost:9002',
target: proxyTarget,
changeOrigin: true,
}),
);