SWC-7242 #5630

nickgros · 2025-02-12T20:08:53Z

Add Vite integration to bundle and emit assets
Update HtmlInjectionFilter to inject a CDN endpoint and Vite asset tags
Update Portal.html to use injected CDN endpoint and injected Vite asset tags
Add script that bundles React, ReactDOM, ReactQuery, SRC, MUI components and adds them to the window object (replacing UMD scripts in Portal.html)
Migrate from yarn to pnpm
Update dependencies to match those that are actually used (required by pnpm) and remove some that are unused.

Depends on a synapse-react-client release containing Sage-Bionetworks/synapse-web-monorepo#1565

nickgros · 2025-02-12T20:10:20Z

js/main.js

@@ -0,0 +1,26 @@
+/**


Vite will bundle this file, and the bundled asset will be emitted in the Portal HTML.

This will replace the various UMD bundles that many packages are no longer providing.

package.json

nickgros · 2025-02-12T21:08:24Z

package.json

@@ -1,6 +1,13 @@
 {


While it looks like we added a bunch of new dependencies, most of these are not new. With yarn v1, we could directly depend on artifacts from transitive dependencies. pnpm does not let you do this, so we have to add add those previously-transitive dependencies that we currently directly depend on.

nickgros · 2025-02-12T21:08:53Z

package.json

-    "markdown-it-sub": "^2.0.0",
-    "markdown-it-sup": "^2.0.0",


These were not used. We were already using the -alt packages, they just were not explicitly listed as dependencies.

nickgros · 2025-02-12T21:09:36Z

package.json

+    "vite": "^6.0.11",
+    "vite-plugin-node-polyfills": "0.17.0",


nickgros · 2025-02-12T21:10:46Z

package.json

    "dev:codeserver": "mvn clean gwt:run-codeserver",
    "dev:watcher": "wait-on tcp:127.0.0.1:9876 && mvn fizzed-watcher:run",
-    "dev:tomcat": "wait-on tcp:127.0.0.1:9876 && docker pull tomcat:9.0; docker run --name swc-dev --rm -p 8888:8080 -v \"/$(pwd)/target/portal-develop-SNAPSHOT/:/usr/local/tomcat/webapps/ROOT/\" -v \"/$HOME/.m2/settings.xml\":/root/.m2/settings.xml tomcat:9.0",
+    "dev:tomcat": "wait-on tcp:127.0.0.1:9876 && docker pull tomcat:9.0; docker run --name swc-dev --rm -p 8888:8080 -v \"/$(pwd)/target/portal-develop-SNAPSHOT/:/usr/local/tomcat/webapps/ROOT/\" -v \"/$HOME/.m2/settings.xml\":/root/.m2/settings.xml -e CATALINA_OPTS=\"-Dorg.sagebionetworks.web.client.dev.mode=true\" tomcat:9.0",
+    "dev:vite": "vite dev",


Add a script that runs the Vite dev server (live reloading of assets bundled by Vite)

nickgros · 2025-02-12T21:10:59Z

package.json

    "dev:codeserver": "mvn clean gwt:run-codeserver",
    "dev:watcher": "wait-on tcp:127.0.0.1:9876 && mvn fizzed-watcher:run",
-    "dev:tomcat": "wait-on tcp:127.0.0.1:9876 && docker pull tomcat:9.0; docker run --name swc-dev --rm -p 8888:8080 -v \"/$(pwd)/target/portal-develop-SNAPSHOT/:/usr/local/tomcat/webapps/ROOT/\" -v \"/$HOME/.m2/settings.xml\":/root/.m2/settings.xml tomcat:9.0",
+    "dev:tomcat": "wait-on tcp:127.0.0.1:9876 && docker pull tomcat:9.0; docker run --name swc-dev --rm -p 8888:8080 -v \"/$(pwd)/target/portal-develop-SNAPSHOT/:/usr/local/tomcat/webapps/ROOT/\" -v \"/$HOME/.m2/settings.xml\":/root/.m2/settings.xml -e CATALINA_OPTS=\"-Dorg.sagebionetworks.web.client.dev.mode=true\" tomcat:9.0",


Add environment variable org.sagebionetworks.web.client.dev.mode=true, which tells the servlet that we are running in dev mode and to use the Vite dev server.

nickgros · 2025-02-12T21:13:38Z

src/main/java/org/sagebionetworks/web/server/PortalServletModule.java

+  // ViteManifestProviderImpl requires ServletContext, which cannot be injected, so we create the singleton here.
+  private ViteManifestProvider viteManifestProviderSingleton;


Is there a better way to do this?

nickgros · 2025-02-12T21:14:22Z

src/main/java/org/sagebionetworks/web/server/PortalServletModule.java

+    filter("/*").through(SSLFilter.class);
+    bind(SSLFilter.class).in(Singleton.class);
+
+    filter("*").through(HtmlInjectionFilter.class);
+    bind(HtmlInjectionFilter.class).in(Singleton.class);
+
+    filter("/*").through(GWTCacheControlFilter.class);
+    bind(GWTCacheControlFilter.class).in(Singleton.class);
+
+    filter("/js/*").through(GWTAllCacheFilter.class);
+    filter("/images/*").through(GWTAllCacheFilter.class);
+    filter("/research/*").through(GWTAllCacheFilter.class);
+    bind(GWTAllCacheFilter.class).in(Singleton.class);
+
+    filter("/*").through(JavaScriptContentTypeFilter.class);
+    bind(JavaScriptContentTypeFilter.class).in(Singleton.class);
+
+    filter("/*").through(HSTSFilter.class);
+    bind(HSTSFilter.class).in(Singleton.class);
+
+    filter("/*").through(CORSFilter.class);
+    bind(CORSFilter.class).in(Singleton.class);
+
+    filter("/*").through(XFrameOptionsFilter.class);
+    bind(XFrameOptionsFilter.class).in(Singleton.class);


Removed filters from web.xml and added them here, preserving the filter order. This allows us to inject dependencies into the filter objects.

src/main/java/org/sagebionetworks/web/server/StackEndpoints.java

nickgros · 2025-02-12T21:17:46Z

src/main/java/org/sagebionetworks/web/server/servlet/filter/HtmlInjectionFilter.java

+  private void addCdnEndpoint(
+    Map<String, String> dataModel,
+    HttpServletRequest request
+  ) {
+    String origin = request.getHeader("origin");
+    if (origin != null && CDN_ORIGINS_REGEX.matcher(origin).matches()) {
+      dataModel.put(CDN_ENDPOINT_KEY, "//cdn-" + request.getHeader("origin"));
+    } else {
+      dataModel.put(CDN_ENDPOINT_KEY, "");
+    }
+  }


Moved logic to determine the CDN endpoint to this filter, instead of JavaScript in the HTML file itself. Logic should be the same.

nickgros · 2025-02-12T21:18:17Z

src/main/java/org/sagebionetworks/web/server/servlet/filter/HtmlInjectionFilter.java

+  /**
+   * Adds Vite imports to the data model based on the request origin.
+   * This must be called AFTER the CDN_ENDPOINT_KEY is added to the data model
+   * @param dataModel
+   */
+  private void addViteImports(Map<String, String> dataModel) {
+    boolean isDev = "true".equals(System.getProperty(IS_DEV_MODE));
+    if (isDev) {
+      dataModel.put(
+        VITE_IMPORTS_INJECTION_KEY,
+        ViteHTMLProvider.getViteDevelopmentHTML(VITE_IMPORTED_FILES)
+      );
+    } else {
+      dataModel.put(
+        VITE_IMPORTS_INJECTION_KEY,
+        ViteHTMLProvider.getViteProductionHTML(
+          VITE_IMPORTED_FILES,
+          viteManifestProvider.getManifest(),
+          dataModel.get(CDN_ENDPOINT_KEY) + "/generated/vite/"
+        )
+      );
+    }
+  }


Injects scripts for the assets bundled by Vite

nickgros · 2025-02-12T21:19:20Z

src/main/webapp/Portal.html

@@ -10,7 +10,7 @@

    <meta
      http-equiv="Content-Security-Policy"
-      content="default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' *.synapse.org *.sagebase.org *.googleapis.com *.gstatic.com *.googletagmanager.com cdn.statuspage.io s3.amazonaws.com www.google-analytics.com kh896k90gyvg.statuspage.io *.youtube.com *.rstudio.com *.google.com *.shinyapps.io *.smartsheet.com sagebionetworks.jira.com 127.0.0.1:9876 esm.sh; frame-ancestors 'self' https://*.synapse.org localhost; img-src * data: blob:; connect-src https://* http://127.0.0.1:8888"
+      content="default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' *.synapse.org *.sagebase.org *.googleapis.com *.gstatic.com *.googletagmanager.com cdn.statuspage.io s3.amazonaws.com www.google-analytics.com kh896k90gyvg.statuspage.io *.youtube.com *.rstudio.com *.google.com *.shinyapps.io *.smartsheet.com sagebionetworks.jira.com 127.0.0.1:9876 esm.sh localhost:5173; frame-ancestors 'self' https://*.synapse.org localhost; img-src * data: blob:; connect-src https://* http://127.0.0.1:8888 http://localhost:5173 ws://localhost:5173"


Vite dev server runs on localhost:5173, need to add to CSP to allow downloading scripts, connecting over HTTP and WebSocket protocols

nickgros · 2025-02-12T21:20:41Z

src/main/webapp/Portal.html

-      var cdnEndpoint = '//cdn-' + location.hostname + '/'
-      var processEnvironment = 'production'
-      var synapseOrgRegex = /(www|staging|tst)\.synapse\.org$/
-
-      if (!synapseOrgRegex.test(location.hostname)) {
-        cdnEndpoint = '/'
-        processEnvironment = 'development'
-      }


Logic for CDN moved to the HtmlInjectionFilter. Vite should handle the processEnvironment logic in the bundling phase.

nickgros · 2025-02-12T21:21:17Z

src/main/webapp/Portal.html

-      let reactPath, reactDomPath
-
-      if (processEnvironment === 'production') {
-        reactPath = cdnEndpoint + 'generated/react.production.min.js'
-        reactDomPath = cdnEndpoint + 'generated/react-dom.production.min.js'
-      } else {
-        reactPath = cdnEndpoint + 'generated/react.development.js'
-        reactDomPath = cdnEndpoint + 'generated/react-dom.development.js'
-      }


React/ReactDOM scripts removed, now handled by Vite

nickgros · 2025-02-12T21:22:11Z

src/main/webapp/Portal.html

-      loadJs(cdnEndpoint + 'generated/plotly.min.js')
-      loadJs(cdnEndpoint + 'generated/create-plotly-component.min.js')
-      loadJs(cdnEndpoint + 'generated/universalCookie.min.js')
-      loadJs(cdnEndpoint + 'generated/synapse-react-client.production.min.js') // We don't load SRC's scss because we include it in our own compiled scss


synapse-react-client import removed, now handled by Vite

nickgros · 2025-02-12T21:35:34Z

src/main/webapp/Portal.html

-      loadJs(reactPath)
-      loadJs(reactDomPath)
-      loadJs(cdnEndpoint + 'generated/material-ui.production.min.js')
-      loadJs(cdnEndpoint + 'generated/react-transition-group.min.js')


react-transition-group bundle removed because it is unused

nickgros · 2025-02-12T21:35:43Z

src/main/webapp/Portal.html

-      loadJs(cdnEndpoint + 'generated/material-ui.production.min.js')
-      loadJs(cdnEndpoint + 'generated/react-transition-group.min.js')
-      loadJs(cdnEndpoint + 'generated/prop-types.min.js')
-      loadJs(cdnEndpoint + 'generated/react-measure.js')


react-measure bundle removed because it is unused

nickgros · 2025-02-12T21:36:02Z

src/main/webapp/Portal.html

-      loadJs(cdnEndpoint + 'generated/pica.min.js')
-      loadJs(reactPath)
-      loadJs(reactDomPath)
-      loadJs(cdnEndpoint + 'generated/material-ui.production.min.js')


Removed, now handled by Vite

nickgros · 2025-02-12T22:30:15Z

src/main/webapp/WEB-INF/web.xml

@@ -6,94 +6,10 @@
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  version="2.5"
 >
-  <filter>


Filter instantiation moved to PortalServletModule so dependencies can be injected into these.

- Add Vite integration to bundle and emit assets - Update HtmlInjectionFilter to inject a CDN endpoint and Vite asset tags - Update Portal.html to use injected CDN endpoint and injected Vite asset tags - Add script that bundles React, ReactDOM, ReactQuery, SRC, MUI components and adds them to the window object (replacing UMD scripts in Portal.html) - Migrate from yarn to pnpm - Update dependencies to match those that are actually used (required by pnpm) and remove some that are unused.

…keys

nickgros · 2025-02-14T16:55:43Z

.github/workflows/build-test-e2e.yml

@@ -5,7 +5,7 @@ env:
  BUILD_ARTIFACT_NAME: swc-war
  BUILD_DIR: target
  BUILD_NAME: portal-develop-SNAPSHOT.war
-  NODE_VERSION: 18.16.0
+  NODE_VERSION: 22


Update Node to 22 (latest LTS) since it includes the latest version of corepack, which we will use to install pnpm.

hallieswan

Looks great to me! It'd be great to run e2e tests locally if possible to confirm that core functionality is unaffected.

…WebClient into SWC-7242

- Fix e2e tests - Fix ReactDOM/ReactDOMClient distinction -- ReactDOMClient only contains `createRoot` - Prefer `window` over `self` - Move Vite compilation to `compile` phase -- it does not get copied over if we wait until the `package` phase, even though we don't need it until then.

…WebClient into SWC-7242

nickgros commented Feb 12, 2025

View reviewed changes

package.json Outdated Show resolved Hide resolved

nickgros commented Feb 12, 2025

View reviewed changes

package.json

Comment on lines +67 to +68

"vite": "^6.0.11",

"vite-plugin-node-polyfills": "0.17.0",

Copy link

Contributor Author

nickgros Feb 12, 2025

Choose a reason for hiding this comment

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

Add Vite

nickgros commented Feb 12, 2025

View reviewed changes

src/main/java/org/sagebionetworks/web/server/StackEndpoints.java Outdated Show resolved Hide resolved

nickgros commented Feb 12, 2025

View reviewed changes

nickgros mentioned this pull request Feb 12, 2025

SWC-7242 Sage-Bionetworks/synapse-web-monorepo#1565

Merged

nickgros added 5 commits February 14, 2025 10:58

Remove unused build scripts added in iteration

221862d

Remove copy scripts for synapse-react-client and MUI

96e59cf

Remove unintentional change

7007916

Refactor, add tests for filter

04c4e33

nickgros force-pushed the SWC-7242 branch from 9429d7a to 04c4e33 Compare February 14, 2025 15:58

nickgros added 3 commits February 14, 2025 11:23

Bump actions NODE_VERSION to v20

8a7df30

Try Node 22, which should bundle corepack v0.31, which has the fixed …

37fd037

…keys

Remove esm.sh from CSP since it is no longer used

6594330

nickgros commented Feb 14, 2025

View reviewed changes

hallieswan approved these changes Feb 14, 2025

View reviewed changes

nickgros added 3 commits February 18, 2025 15:39

Merge branch 'develop' of https://github.com/Sage-Bionetworks/Synapse…

73af0a6

…WebClient into SWC-7242

Merge branch 'develop' of https://github.com/Sage-Bionetworks/Synapse…

423ed94

…WebClient into SWC-7242

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SWC-7242 #5630

SWC-7242 #5630

nickgros commented Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025 •

edited

Loading

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025 •

edited

Loading

nickgros Feb 12, 2025

nickgros Feb 12, 2025 •

edited

Loading

nickgros Feb 12, 2025

nickgros Feb 12, 2025 •

edited

Loading

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 12, 2025

nickgros Feb 14, 2025

hallieswan left a comment

		// ViteManifestProviderImpl requires ServletContext, which cannot be injected, so we create the singleton here.
		private ViteManifestProvider viteManifestProviderSingleton;

SWC-7242 #5630

Are you sure you want to change the base?

SWC-7242 #5630

Conversation

nickgros commented Feb 12, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hallieswan left a comment

Choose a reason for hiding this comment

nickgros Feb 12, 2025 •

edited

Loading

nickgros Feb 12, 2025 •

edited

Loading

nickgros Feb 12, 2025 •

edited

Loading

nickgros Feb 12, 2025 •

edited

Loading