Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend to vite #3860

Merged
merged 72 commits into from
Sep 9, 2024
Merged
Show file tree
Hide file tree
Changes from 65 commits
Commits
Show all changes
72 commits
Select commit Hold shift + click to select a range
0da1348
new repo clone
jmetev1 Aug 17, 2024
9742e5a
temp use alpine
jmetev1 Aug 17, 2024
e07d7a5
move images
jmetev1 Aug 18, 2024
ed12f3f
rename envs
jmetev1 Aug 18, 2024
5b5fee4
tests halfway work
jmetev1 Aug 19, 2024
e996bf9
jest to vitest
jmetev1 Aug 19, 2024
b55d5e7
tests better
jmetev1 Aug 19, 2024
ea5bdff
Merge branch 'main' of github.com:bcgov/wps into task/vitejs
jmetev1 Aug 19, 2024
f9f15e2
lock file
jmetev1 Aug 19, 2024
f535509
cleanup
jmetev1 Aug 19, 2024
2e91e11
new dir
jmetev1 Aug 19, 2024
5272a41
cypress scripts
jmetev1 Aug 19, 2024
ca0e36e
merge
jmetev1 Aug 19, 2024
97a7d42
Merge branch 'main' of github.com:bcgov/wps into task/vitejs
jmetev1 Aug 19, 2024
2b6c671
jsdom
jmetev1 Aug 19, 2024
c7c221f
merging hard
jmetev1 Aug 19, 2024
e1474e7
coverage!
jmetev1 Aug 20, 2024
2aa7b2e
Merge branch 'main' of github.com:bcgov/wps into task/vitejs
jmetev1 Aug 21, 2024
b28d452
vite optimze deps
jmetev1 Aug 21, 2024
279632f
more optimize deps
jmetev1 Aug 21, 2024
1db2e9a
stupid things
jmetev1 Aug 21, 2024
9f2b7ae
emotion bug
jmetev1 Aug 22, 2024
c712cf3
Merge branch 'main' of github.com:bcgov/wps into task/vitejs
jmetev1 Aug 22, 2024
0439c3c
Merge branch 'task/vitejs' of github.com:bcgov/wps into task/vitejs
jmetev1 Aug 22, 2024
55821e6
stop caching
jmetev1 Aug 22, 2024
8bc8dce
new vite config
jmetev1 Aug 23, 2024
5e4dde4
port
jmetev1 Aug 23, 2024
670f384
vite config 100
jmetev1 Aug 23, 2024
cc1bff8
vite ignore more paths
jmetev1 Aug 26, 2024
3643bbd
move config
jmetev1 Aug 26, 2024
40e5c35
oh viteconfig
jmetev1 Aug 26, 2024
5a69005
viteconfig
jmetev1 Aug 26, 2024
d645a42
cypress github action
jmetev1 Aug 27, 2024
2269487
what
jmetev1 Aug 27, 2024
3456407
web
jmetev1 Aug 27, 2024
e9ecfc2
dev
jmetev1 Aug 27, 2024
552db39
Revert "dev"
jmetev1 Aug 27, 2024
7c2243a
Revert "web"
jmetev1 Aug 27, 2024
b2fe04e
Revert "what"
jmetev1 Aug 27, 2024
fd90fbc
Revert "cypress github action"
jmetev1 Aug 27, 2024
ae90f22
one more way
jmetev1 Aug 28, 2024
a0423db
cypress fixed
jmetev1 Aug 28, 2024
dcbaefe
leave alpine
jmetev1 Aug 29, 2024
8e59196
other node
jmetev1 Aug 29, 2024
2acb3f6
back to alppine
jmetev1 Aug 29, 2024
6b714ab
trippin
jmetev1 Aug 29, 2024
efa7fc9
what bucket
jmetev1 Sep 3, 2024
99702cc
Merge branch 'main' of github.com:bcgov/wps into task/vitejs
jmetev1 Sep 3, 2024
11282f9
polyfill fetch
jmetev1 Sep 3, 2024
0077b0d
skip test
jmetev1 Sep 3, 2024
e4d42c1
drop polyfill
jmetev1 Sep 3, 2024
c61ad52
cleanup
jmetev1 Sep 3, 2024
596df6a
back to alpine
jmetev1 Sep 4, 2024
9b0012a
fix tests
jmetev1 Sep 4, 2024
144475c
fix imports
jmetev1 Sep 4, 2024
6526fd4
fix imports
jmetev1 Sep 4, 2024
40d2b23
move fetch
jmetev1 Sep 4, 2024
098c0a9
Merge branch 'main' of github.com:bcgov/wps into task/vitejs
jmetev1 Sep 4, 2024
a7109f1
envs
jmetev1 Sep 4, 2024
53e1234
fix fetch again
jmetev1 Sep 5, 2024
935d196
fixed coverage!!
jmetev1 Sep 5, 2024
4e056cf
rm env.test
jmetev1 Sep 5, 2024
9f88471
extra package
jmetev1 Sep 5, 2024
0ef2d80
Merge branch 'main' of github.com:bcgov/wps into task/vitejs
jmetev1 Sep 5, 2024
1299818
test sourcemaps
jmetev1 Sep 5, 2024
4f6ed2c
Merge branch 'main' into task/vitejs
conbrad Sep 5, 2024
d6addac
test sourcemaps
jmetev1 Sep 5, 2024
d2a106f
Merge branch 'task/vitejs' of github.com:bcgov/wps into task/vitejs
jmetev1 Sep 5, 2024
b8561de
rm error
jmetev1 Sep 5, 2024
ed46971
comments
jmetev1 Sep 5, 2024
a7e258d
comment
jmetev1 Sep 5, 2024
c96b92c
Merge branch 'main' into task/vitejs
jmetev1 Sep 5, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions .github/workflows/integration.yml
Original file line number Diff line number Diff line change
Expand Up @@ -191,8 +191,6 @@ jobs:
with:
# For sonar-scanner to work properly we can't use a shallow fetch.
fetch-depth: 0
- name: Setup kernel for react, increase watchers
jmetev1 marked this conversation as resolved.
Show resolved Hide resolved
run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
Expand All @@ -207,19 +205,13 @@ jobs:
run: corepack enable
- name: use new yarn
run: yarn set version berry
- name: Setup yarn for scoped artifactory packages
working-directory: ./web
run: yarn config set npmScopes.psu.npmRegistryServer https://artifacts.developer.gov.bc.ca/artifactory/api/npm/pe1e-psu-npm-local/ && yarn config set npmScopes.psu.npmAlwaysAuth true && yarn config set npmScopes.psu.npmAuthToken ${{ secrets.ARTIFACTORY_SVCACCT_TOKEN }}
- name: Install node dependencies (web)
working-directory: ./web
if: steps.yarn-cache.outputs.cache-hit != 'true'
run: yarn install
- name: Lint (web)
working-directory: ./web
run: yarn run lint
# "Error: ENOSPC: System limit for number of file watchers reached" can be addressed
# with this: https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details
# It seems unnecessary at the moment because tests pass anyway
- name: Cypress tests with coverage (web)
working-directory: ./web
run: yarn run cypress:ci
Expand All @@ -229,7 +221,6 @@ jobs:
- name: Merge and finalize test coverage (web)
working-directory: ./web
run: yarn run finalizeCoverage

- name: Archive coverage report
uses: actions/upload-artifact@v4
with:
Expand Down
1 change: 0 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
".github": false,
"**/.pytest_cache": true,
"**/__pycache__**": true,
"web/node_modules": true,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just a personal preference. I'm always going in node modules. But other people want it hidden?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's fine. Where it can kind of get annoying is if you're doing a global string search in the repo and node modules are indexed those results can cloud what you're looking for.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you mean when you're searching using vscode? on my end at least if this button is clicked then it will ignore node_modules
image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah in vscode, interesting ok, will check that button out.

"api/python_cache": true,
"api/.venv": true
},
Expand Down
23 changes: 8 additions & 15 deletions Dockerfile.web
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,23 @@
ARG NODE_OPTIONS="--v8-pool-size=4"

# PHASE 1 - build frontend.
# Pull from local registry - we can't pull from docker due to limits.
# see https://catalog.redhat.com/software/containers/ubi9/nodejs-20/64770ac7a835530172eee6a9 for
# details
FROM registry.access.redhat.com/ubi9/nodejs-20 as static

FROM node:20-alpine AS static
conbrad marked this conversation as resolved.
Show resolved Hide resolved
# Switch to root user for package installs
USER 0
WORKDIR /app

COPY web/package.json .
COPY web/yarn.lock .
COPY web/.yarnrc.yml .
# do install first so it will be cached
RUN npm install -g --ignore-scripts corepack
RUN corepack enable
RUN yarn set version berry
RUN yarn config set npmScopes.psu.npmRegistryServer https://artifacts.developer.gov.bc.ca/artifactory/api/npm/pe1e-psu-npm-local/
RUN yarn config set npmScopes.psu.npmAlwaysAuth true
RUN yarn config set npmScopes.psu.npmAuthToken ${ARTIFACTORY_SVCACCT_TOKEN}
RUN CYPRESS_INSTALL_BINARY=0 yarn install --immutable
RUN corepack enable \
&& yarn set version berry \
&& CYPRESS_INSTALL_BINARY=0 yarn install --immutable
COPY web .
RUN yarn run build:prod

# Remove sourcemaps after they've been uploaded to sentry
RUN rm build/static/js/**.map
RUN yarn run build:prod && \
rm build/assets/**.map

# Switch back to default user
USER 1001
Expand All @@ -42,7 +35,7 @@ FROM registry.access.redhat.com/ubi8/nginx-120
ADD ./openshift/nginx.conf "${NGINX_CONF_PATH}"

# Copy the static content:
COPY --from=static /opt/app-root/src/build .
COPY --from=static /app/build .

EXPOSE 3000
CMD nginx -g "daemon off;"
3 changes: 0 additions & 3 deletions web/.babelrc

This file was deleted.

14 changes: 7 additions & 7 deletions web/.env.cypress
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
BROWSER=none
PORT=3030
REACT_APP_API_BASE_URL=http://localhost:8080/api
REACT_APP_HIDE_DISCLAIMER=false
REACT_APP_KEYCLOAK_AUTH_URL=https://keycloak-auth-url.ca
REACT_APP_SM_LOGOUT_URL=https://sm-logout-url.ca
REACT_APP_KEYCLOAK_REALM=8wl6x4cp
REACT_APP_KEYCLOAK_CLIENT=wps-web
REACT_APP_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/
jmetev1 marked this conversation as resolved.
Show resolved Hide resolved
VITE_API_BASE_URL=http://localhost:8080/api
VITE_HIDE_DISCLAIMER=false
VITE_KEYCLOAK_AUTH_URL=https://keycloak-auth-url.ca
VITE_SM_LOGOUT_URL=https://sm-logout-url.ca
VITE_KEYCLOAK_REALM=8wl6x4cp
VITE_KEYCLOAK_CLIENT=wps-web
VITE_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/
23 changes: 11 additions & 12 deletions web/.env.example
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
REACT_APP_API_BASE_URL=http://localhost:8080/api
REACT_APP_HIDE_DISCLAIMER=true
REACT_APP_KEYCLOAK_AUTH_URL=https://dev.loginproxy.gov.bc.ca/auth
REACT_APP_SM_LOGOUT_URL=https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi?retnow=1&returl=
REACT_APP_KEYCLOAK_REALM=standard
REACT_APP_KEYCLOAK_CLIENT=wps-web
REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL=http://localhost:3000
REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL=http://localhost:3000
REACT_APP_PMTILES_BUCKET=https://My_S3_Bucket
REACT_APP_SENTRY_DSN=123
REACT_APP_SENTRY_ENV=development
REACT_APP_MUI_LICENSE_KEY=mui
VITE_API_BASE_URL=http://localhost:8080/api
VITE_HIDE_DISCLAIMER=true
VITE_KEYCLOAK_AUTH_URL=https://dev.loginproxy.gov.bc.ca/auth
VITE_KEYCLOAK_REALM=standard
VITE_KEYCLOAK_CLIENT=wps-web
VITE_MS_TEAMS_SPRINT_REVIEW_URL=http://localhost:3000
VITE_MIRO_SPRINT_REVIEW_BOARD_URL=http://localhost:3000
VITE_PMTILES_BUCKET=https://My_S3_Bucket
VITE_SENTRY_DSN=123
VITE_SENTRY_ENV=development
VITE_MUI_LICENSE_KEY=mui
3 changes: 2 additions & 1 deletion web/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
!.yarn/versions
cypress/downloads
4 changes: 2 additions & 2 deletions web/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@ It correctly bundles React in production mode and optimizes the build for the be

## Config

In `openshift/templates/global.config.yaml` there is a template for a global ConfigMap. This template can be applied to the Openshift project from the command line. For example, to apply the global.config template and pass a value for the REACT_APP_KEYCLOAK_REALM parameter, run
In `openshift/templates/global.config.yaml` there is a template for a global ConfigMap. This template can be applied to the Openshift project from the command line. For example, to apply the global.config template and pass a value for the VITE_KEYCLOAK_REALM parameter, run

`oc -n <openshift-project-name> process -f openshift/templates/global.config.yaml -p REACT_APP_KEYCLOAK_REALM=<realm-name> | oc create -f -`
`oc -n <openshift-project-name> process -f openshift/templates/global.config.yaml -p VITE_KEYCLOAK_REALM=<realm-name> | oc create -f -`

## License

Expand Down
20 changes: 0 additions & 20 deletions web/craco.config.js

This file was deleted.

16 changes: 16 additions & 0 deletions web/cypress.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const { defineConfig } = require('cypress');

module.exports = defineConfig({
screenshotOnRunFailure: false,
retries: 1,
video: false,
defaultCommandTimeout: 10000,
e2e: {
setupNodeEvents(on, config) {
require('@cypress/code-coverage/task')(on, config)
return config

},
baseUrl: 'http://localhost:3030',
},
});
14 changes: 0 additions & 14 deletions web/cypress.config.ts

This file was deleted.

27 changes: 0 additions & 27 deletions web/cypress/plugins/index.js

This file was deleted.

File renamed without changes.
15 changes: 1 addition & 14 deletions web/public/index.html → web/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="config.js"></script>
<script type="text/javascript">
window.env = config
</script>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand All @@ -21,15 +17,6 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="module" src="/src/index.tsx"></script>
conbrad marked this conversation as resolved.
Show resolved Hide resolved
</body>
</html>
File renamed without changes.
File renamed without changes.
68 changes: 26 additions & 42 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"node": ">=20",
"npm": ">=10.7.0"
},
"type": "module",
"license": "Apache-2.0",
"licenses": [
{
Expand Down Expand Up @@ -34,13 +35,15 @@
"@types/webpack-env": "^1.15.1",
"@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^8.0.0",
"@vitest/coverage-istanbul": "^2.0.5",
conbrad marked this conversation as resolved.
Show resolved Hide resolved
"axios": "1.7.4",
"date-fns": "^3.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.4",
"esri-leaflet": "3.0.12",
"filefy": "^0.1.11",
"jsdom": "^24.1.1",
"jwt-decode": "^4.0.0",
"keycloak-js": "^25.0.0",
"leaflet": "^1.7.1",
Expand All @@ -51,73 +54,54 @@
"ol": "10.0.0",
"ol-pmtiles": "^0.5.0",
"prettier": "^3.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-redux": "^8.0.0",
"react-router-dom": "^6.22.3",
"recharts": "^2.1.8",
"typescript": "^5.0.0"
"typescript": "^5.2.2",
"vitest": "^2.0.5",
"whatwg-fetch": "^3.6.20"
conbrad marked this conversation as resolved.
Show resolved Hide resolved
},
"scripts": {
"start": "CI=true craco start",
"start:cypress": "export $(cat .env.cypress | xargs) && craco --max_old_space_size=4096 -r @cypress/instrument-cra start",
"build": "craco --max_old_space_size=2048 build",
"build:prod": "craco --max_old_space_size=2048 build && yarn sentry:sourcemaps",
"test": "craco test --transformIgnorePatterns \"node_modules/(?!ol)/\"",
"start": "vite",
"start:cypress": "export $(cat .env.cypress | xargs) && yarn start",
"build": "tsc -b && vite build",
"build:prod": "tsc -b && vite build && yarn sentry:sourcemaps",
"test": "VITE_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/ vitest",
"test:ci": "CI=true npm test",
"coverage": "npm test -- --coverage --watchAll=false",
"coverage:ci": "CI=true REACT_APP_KEYCLOAK_CLIENT=wps-web npm test -- --coverage --watchAll=false",
"coverage:ci": "CI=true VITE_KEYCLOAK_CLIENT=wps-web VITE_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/ vitest run --coverage",
"cy:open": "cypress open",
"cy:run": "cypress run --browser chrome --config watchForFileChanges=false",
"cypress": "start-server-and-test start:cypress 3030 cy:open",
"cypress:ci": "start-server-and-test start:cypress 3030 cy:run",
"eject": "react-scripts eject",
"cypress:ci": "start-server-and-test start:cypress http://localhost:3030 'cy:run'",
"lint": "eslint",
"lint:fix": "eslint --fix",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md)\"",
"finalizeCoverage": "node mergeCoverage.js",
"sentry:sourcemaps": "sentry-cli sourcemaps inject --org bcps-wps --project frontend ./build && sentry-cli sourcemaps upload --org bcps-wps --project frontend ./build"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"finalizeCoverage": "yarn node mergeCoverage.cjs",
"sentry:sourcemaps": "sentry-cli sourcemaps inject --org bcps-wps --project frontend ./build && sentry-cli sourcemaps upload --org bcps-wps --project frontend ./build",
"preview": "vite preview"
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@craco/craco": "^7.1.0",
"@cypress/code-coverage": "^3.10.0",
"@cypress/instrument-cra": "^1.4.0",
"@eslint/compat": "^1.1.1",
"@testing-library/dom": "^10.1.0",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12",
"@types/recharts": "^1.8.23",
"cypress": "^13.0.0",
"@vitejs/plugin-react": "^4.3.1",
"cypress": "^13.13.3",
"eslint": "^9.7.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"globals": "^15.8.0",
"react-scripts": "^5.0.1",
"start-server-and-test": "^2.0.0",
"ts-sinon": "^2.0.2"
},
"jest": {
"collectCoverageFrom": [
conbrad marked this conversation as resolved.
Show resolved Hide resolved
"src/**/*.{ts,tsx}",
"!src/**/*.d.ts",
"!src/index.tsx",
"!src/serviceWorker.ts",
"!src/app/*.{ts,tsx}"
]
"ts-sinon": "^2.0.2",
"vite": "^5.3.4",
"vite-plugin-istanbul": "^6.0.2",
"vite-plugin-svgr": "^4.2.0"
},
"nyc": {
"report-dir": "coverage-cypress",
Expand All @@ -128,4 +112,4 @@
]
},
"packageManager": "yarn@4.3.1"
}
}
Loading
Loading