KEYCLOAK-11293 Update theme build for keycloak-preview

`npm install` is changed to run at build time, removing the need for commiting
the js modules, which are getting a bit silly in size with the introduction of
account2. Appropriate changes to prod-arguments.json are included that should
enable the product build to function properly. The community and developer
builds will continue to work without the proxying PNC provides.

This also changes the themes pom to work with more than one `package.json`
file. The only other one at the moment is for the new account console /
account2.

The documentation file has been updated.

Since we're building directly out of the source directories, it is possible in
a local dev environment for unintended files (e.g. old compiled .js files),
placed within src/main/resources/, to be included in the themes jar. This
shouldn't be a problem for actual builds though, which use a fresh clone.

Other small changes include refactoring the npm setup stuff to a global
definition, and the introduction of some properties to avoid duplicating path
definitions everywhere.

This commit does not include the churn that would result from deleting the
existing commited modules.
This commit is contained in:
Alex Szczuczko 2019-12-06 07:34:06 -07:00 committed by Bruno Oliveira da Silva
parent 5c910d6f13
commit 52d8b759d3
8 changed files with 132 additions and 185 deletions

View file

@ -3,6 +3,7 @@ language: java
cache: cache:
directories: directories:
- $HOME/.m2 - $HOME/.m2
- $HOME/.npm
before_cache: before_cache:
- rm -rf $HOME/.m2/repository/org/keycloak - rm -rf $HOME/.m2/repository/org/keycloak

View file

@ -148,7 +148,7 @@
<osgi.bundle.plugin.version>2.3.7</osgi.bundle.plugin.version> <osgi.bundle.plugin.version>2.3.7</osgi.bundle.plugin.version>
<wildfly.plugin.version>1.2.1.Final</wildfly.plugin.version> <wildfly.plugin.version>1.2.1.Final</wildfly.plugin.version>
<nexus.staging.plugin.version>1.6.5</nexus.staging.plugin.version> <nexus.staging.plugin.version>1.6.5</nexus.staging.plugin.version>
<frontend.plugin.version>1.5</frontend.plugin.version> <frontend.plugin.version>1.8.0</frontend.plugin.version>
<docker.maven.plugin.version>0.28.0</docker.maven.plugin.version> <docker.maven.plugin.version>0.28.0</docker.maven.plugin.version>
<!-- Surefire Settings --> <!-- Surefire Settings -->

View file

@ -2,7 +2,8 @@
"mvn": { "mvn": {
"profiles": ["product", "!community", "jboss-release", "distribution-downloads"], "profiles": ["product", "!community", "jboss-release", "distribution-downloads"],
"properties": { "properties": {
"skipTests": "true" "skipTests": "true",
"npmRegistryURL": "$NPM_REGISTRY_INSTANCE_URL"
} }
}, },
"pme": { "pme": {
@ -24,5 +25,12 @@
"dependencyOverride.org.jboss.logging:jboss-logging@org.keycloak:keycloak-as7-subsystem": "", "dependencyOverride.org.jboss.logging:jboss-logging@org.keycloak:keycloak-as7-subsystem": "",
"dependencyOverride.org.jboss.logging:jboss-logging@org.keycloak:keycloak-saml-as7-subsystem": "" "dependencyOverride.org.jboss.logging:jboss-logging@org.keycloak:keycloak-saml-as7-subsystem": ""
} }
} },
"prereqs": [
"npm config set fetch-retry-mintimeout 60000",
"npm config set fetch-retry-maxtimeout 120000",
"npm config set fetch-retries 10",
"npm config set strict-ssl=false",
"npm config set cafile /tmp/indy-proxy-ca.crt"
]
} }

View file

@ -5,15 +5,18 @@ Edit `src/main/package.json` to update the dependency versions. Then run the fol
cd themes cd themes
mvn clean install -Pnpm-update mvn clean install -Pnpm-update
The above will download the full NPM dependencies to `src/main/node_modules`. The main purpose of this directory is that we have the full source code available for dependencies in the future. This will be removed in the future as the internal build systems will take care of this. The above will download the full NPM dependencies to `src/main/resources/theme/keycloak/common/resources/node_modules`. The main purpose of this directory is that we have the full source code available for dependencies in the future. This will be removed in the future as the internal build systems will take care of this.
Next it will copy the dependencies to `src/main/resources/theme/keycloak/common/resources/node_modules`. Here it will use a filter while copying to remove files that we should not include in the distribution (for example documentation and tests for dependencies).
Before committing changes review changes in `src/main/resources/theme/keycloak/common/resources/node_modules` making sure that it hasn't added new unused dependencies (transitive dependencies) and added any files that are not needed in the distribution (this is importat as the full node_modules downloaded are 176M while the filtered dependencies are 42M). Before committing changes review changes in `src/main/resources/theme/keycloak/common/resources/node_modules` making sure that it hasn't added new unused dependencies (transitive dependencies) and added any files that are not needed in the distribution (this is importat as the full node_modules downloaded are 176M while the filtered dependencies are 42M).
## Updating dependencies for the new account console ## Updating dependencies for the new account console
TBD The node dependencies will be downloaded at build time, based on the content of `package-lock.json`. To update `package-lock.json`:
cd src/main/resources/theme/keycloak-preview/account/resources/
npm install
git add package-lock.json
cd -
You should verify the new set of packages don't break anything before commiting the new `package-lock.json`. Do not commit the `node_modules` directory for the new account console.

View file

@ -11,6 +11,108 @@
<artifactId>keycloak-themes</artifactId> <artifactId>keycloak-themes</artifactId>
<name>Keycloak Themes</name> <name>Keycloak Themes</name>
<description/> <description/>
<packaging>jar</packaging>
<properties>
<dir.common>src/main/resources/theme/keycloak/common/resources</dir.common>
<dir.account2>src/main/resources/theme/keycloak-preview/account/resources</dir.account2>
<args.npm.install>ci --no-optional --ignore-scripts</args.npm.install>
</properties>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<executions>
<!-- Download NPM tools -->
<execution>
<id>setup-node</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>initialize</phase>
</execution>
<!-- Compile stuff -->
<execution>
<id>compile-account2</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<workingDirectory>${dir.account2}</workingDirectory>
<arguments>run build --scripts-prepend-node-path</arguments>
</configuration>
</execution>
<!-- Download NPM packages -->
<execution>
<id>npm-install-account2</id>
<phase>initialize</phase>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<workingDirectory>${dir.account2}</workingDirectory>
<arguments>${args.npm.install}</arguments>
</configuration>
</execution>
</executions>
<configuration>
<nodeVersion>v12.13.0</nodeVersion>
<npmVersion>6.9.0</npmVersion>
<installDirectory>${project.basedir}</installDirectory>
</configuration>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/resources</directory>
<excludes>
<exclude>**/node_modules/**/node_modules/**</exclude>
<exclude>**/minimist/**</exclude>
<exclude>**/mkdirp/**</exclude>
<exclude>**/package.json</exclude>
<exclude>**/package-lock.json</exclude>
<exclude>**/bower.json</exclude>
<exclude>**/component.json</exclude>
<exclude>**/composer.json</exclude>
<exclude>**/npm-shrinkwrap.json</exclude>
<exclude>**/select2.jquery.json</exclude>
<exclude>**/*.markdown</exclude>
<exclude>**/*.swf</exclude>
<exclude>**/*.sh</exclude>
<exclude>**/.bin/**</exclude>
<exclude>**/bin/**</exclude>
<exclude>**/build/**</exclude>
<exclude>**/docs/**</exclude>
<exclude>**/demo/**</exclude>
<exclude>**/devtools/**</exclude>
<exclude>**/example/**</exclude>
<exclude>**/examples/**</exclude>
<exclude>**/grunt/**</exclude>
<exclude>**/less/**</exclude>
<exclude>**/sass/**</exclude>
<exclude>**/scss/**</exclude>
<exclude>**/jquery/src/**</exclude>
<exclude>**/angular-treeview/src/**</exclude>
<exclude>**/test/**</exclude>
<exclude>**/tests/**</exclude>
<exclude>**/_config.yml</exclude>
<exclude>**/api.md</exclude>
<exclude>**/AUTHORS.txt</exclude>
<exclude>**/CHANGELOG.md</exclude>
<exclude>**/CONTRIBUTING.md</exclude>
<exclude>**/HELP-US-OUT.txt</exclude>
<exclude>**/README.md</exclude>
<exclude>**/Gruntfile.js</exclude>
<exclude>**/Gemfile*</exclude>
<exclude>**/.*</exclude>
</excludes>
</resource>
</resources>
</build>
<profiles> <profiles>
<profile> <profile>
@ -22,9 +124,6 @@
</activation> </activation>
<build> <build>
<resources> <resources>
<resource>
<directory>src/main/resources</directory>
</resource>
<resource> <resource>
<directory>src/main/resources-community</directory> <directory>src/main/resources-community</directory>
</resource> </resource>
@ -40,93 +139,10 @@
</activation> </activation>
<build> <build>
<resources> <resources>
<resource>
<directory>src/main/resources</directory>
</resource>
<resource> <resource>
<directory>src/main/resources-product</directory> <directory>src/main/resources-product</directory>
</resource> </resource>
</resources> </resources>
<plugins>
<plugin>
<artifactId>maven-jar-plugin</artifactId>
<configuration>
<excludes>
<exclude>**/keycloak-preview/**</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>account2</id>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<nodeVersion>v8.9.4</nodeVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>compile typescript</id>
<goals>
<goal>npm</goal>
</goals>
<phase>compile</phase>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
<execution>
<id>npm remove dev dependencies production=true</id>
<goals>
<goal>npm</goal>
</goals>
<phase>process-classes</phase>
<configuration>
<arguments>install --production=true --no-package-lock</arguments>
</configuration>
</execution>
</executions>
<configuration>
<workingDirectory>src/main/resources/theme/keycloak-preview/account/resources</workingDirectory>
</configuration>
</plugin>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<configuration>
<filesets>
<fileset>
<directory>src/main/resources/theme/keycloak-preview/account/resources/node_modules</directory>
</fileset>
<fileset>
<directory>src/main/resources/theme/keycloak-preview/account/resources/node</directory>
</fileset>
</filesets>
</configuration>
</plugin>
</plugins>
</build> </build>
</profile> </profile>
@ -134,19 +150,11 @@
<id>npm-update</id> <id>npm-update</id>
<build> <build>
<plugins> <plugins>
<!-- Install NPM and download packages --> <!-- Download packages -->
<plugin> <plugin>
<groupId>com.github.eirslett</groupId> <groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId> <artifactId>frontend-maven-plugin</artifactId>
<version>1.8.0</version>
<executions> <executions>
<execution>
<id>install-node-and-npm</id>
<phase>generate-resources</phase>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
<execution> <execution>
<id>npm-install</id> <id>npm-install</id>
<phase>generate-resources</phase> <phase>generate-resources</phase>
@ -154,15 +162,11 @@
<goal>npm</goal> <goal>npm</goal>
</goals> </goals>
<configuration> <configuration>
<workingDirectory>${dir.common}</workingDirectory>
<arguments>install -P -E --no-optional --ignore-scripts --no-bin-links --no-shrinkwrap --no-package-lock</arguments> <arguments>install -P -E --no-optional --ignore-scripts --no-bin-links --no-shrinkwrap --no-package-lock</arguments>
</configuration> </configuration>
</execution> </execution>
</executions> </executions>
<configuration>
<nodeVersion>v12.13.0</nodeVersion>
<npmVersion>6.9.0</npmVersion>
<workingDirectory>src/main/resources</workingDirectory>
</configuration>
</plugin> </plugin>
<!-- Clean downloaded packages from NPM --> <!-- Clean downloaded packages from NPM -->
<plugin> <plugin>
@ -177,10 +181,7 @@
<configuration> <configuration>
<filesets> <filesets>
<fileset> <fileset>
<directory>src/main/resources/node_modules</directory> <directory>${dir.common}/node_modules</directory>
</fileset>
<fileset>
<directory>src/main/resources/theme/keycloak/common/resources/node_modules</directory>
</fileset> </fileset>
</filesets> </filesets>
</configuration> </configuration>
@ -194,90 +195,25 @@
<configuration> <configuration>
<filesets> <filesets>
<fileset> <fileset>
<directory>src/main/node_modules/angular-translate/node_modules/</directory> <directory>${dir.common}/node_modules/angular-translate/node_modules/</directory>
</fileset> </fileset>
<fileset> <fileset>
<directory>src/main/node_modules/patternfly/node_modules/</directory> <directory>${dir.common}/node_modules/patternfly/node_modules/</directory>
</fileset> </fileset>
<fileset> <fileset>
<directory>src/main/node_modules/rcue/node_modules/</directory> <directory>${dir.common}/node_modules/rcue/node_modules/</directory>
</fileset> </fileset>
<fileset> <fileset>
<directory>src/main/node_modules/minimist</directory> <directory>${dir.common}/node_modules/minimist</directory>
</fileset> </fileset>
<fileset> <fileset>
<directory>src/main/node_modules/mkdirp</directory> <directory>${dir.common}/node_modules/mkdirp</directory>
</fileset> </fileset>
</filesets> </filesets>
</configuration> </configuration>
</execution> </execution>
</executions> </executions>
</plugin> </plugin>
<!-- Copy files from NPM packages -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
<executions>
<execution>
<id>copy-resources</id>
<phase>generate-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>src/main/resources/theme/keycloak/common/resources/node_modules</outputDirectory>
<resources>
<resource>
<directory>src/main/node_modules</directory>
<excludes>
<exclude>**/*.json</exclude>
<exclude>**/*.json</exclude>
<exclude>**/*.markdown</exclude>
<exclude>**/*.swf</exclude>
<exclude>**/*.sh</exclude>
<exclude>**/.bin/**</exclude>
<exclude>**/bin/**</exclude>
<exclude>**/build/**</exclude>
<exclude>**/docs/**</exclude>
<exclude>**/demo/**</exclude>
<exclude>**/devtools/**</exclude>
<exclude>**/example/**</exclude>
<exclude>**/examples/**</exclude>
<exclude>**/grunt/**</exclude>
<exclude>**/less/**</exclude>
<exclude>**/node_modules/**</exclude>
<exclude>**/sass/**</exclude>
<exclude>**/scss/**</exclude>
<exclude>**/src/**</exclude>
<exclude>**/test/**</exclude>
<exclude>**/tests/**</exclude>
<exclude>**/_config.yml</exclude>
<exclude>**/api.md</exclude>
<exclude>**/AUTHORS.txt</exclude>
<exclude>**/CHANGELOG.md</exclude>
<exclude>**/CONTRIBUTING.md</exclude>
<exclude>**/HELP-US-OUT.txt</exclude>
<exclude>**/README.md</exclude>
<exclude>**/Gruntfile.js</exclude>
<exclude>**/Gemfile*</exclude>
<exclude>**/index.js</exclude>
<exclude>**/.*</exclude>
</excludes>
</resource>
<resource>
<directory>src/main/node_modules</directory>
<includes>
<include>angular-ui-select2/src/select2.js</include>
<include>filesaver/src/Filesaver.js</include>
<include>filesaver/src/changename.js</include>
</includes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins> </plugins>
</build> </build>
</profile> </profile>

View file

@ -8,9 +8,8 @@ keycloak.json
# ignore log files # ignore log files
*.log *.log
# ignore libraries (for now?) # Do not commit, installed at compile time
node_modules node_modules
node
# Don't ignore these # Don't ignore these
!keycloak.js !keycloak.js

View file

@ -78,7 +78,7 @@ function createNavItems(activePage: PageDef, contentParam: ContentItem[], groupN
if (typeof content === 'undefined') return (<React.Fragment/>); if (typeof content === 'undefined') return (<React.Fragment/>);
const links: React.ReactElement[] = contentParam.map((item: ContentItem) => { const links: React.ReactElement[] = contentParam.map((item: ContentItem) => {
const navLinkId: string = `nav-link-${item.id}`; const navLinkId = `nav-link-${item.id}`;
if (isExpansion(item)) { if (isExpansion(item)) {
return <NavExpandable id={navLinkId} return <NavExpandable id={navLinkId}
groupId={item.groupId} groupId={item.groupId}