Skip to content
Snippets Groups Projects
Commit aaf3d895 authored by Lucas Declercq's avatar Lucas Declercq
Browse files

chore(webapp): use webpack to build ui

parent af3abbb8
No related branches found
No related tags found
No related merge requests found
...@@ -92,6 +92,38 @@ ...@@ -92,6 +92,38 @@
</systemProperties> </systemProperties>
</configuration> </configuration>
</plugin> </plugin>
<!-- Used to run the angular build -->
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.8.0</version>
<configuration>
<workingDirectory>webapp</workingDirectory>
</configuration>
</plugin>
<!-- Copy the built webapp to the directory used by Quarkus -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.1.0</version>
<executions>
<execution>
<id>copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${basedir}/target/classes/META-INF/resources/</outputDirectory>
<resources>
<resource>
<directory>webapp/dist</directory>
<filtering>false</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins> </plugins>
</build> </build>
<profiles> <profiles>
...@@ -139,5 +171,166 @@ ...@@ -139,5 +171,166 @@
</plugins> </plugins>
</build> </build>
</profile> </profile>
<profile>
<!--
Installs node and yarn in the webapp/node and webapp/node_modules folders respectively.
Run 'mvn package -Dui.deps':
* the first time you have checked out the source.
* whenever the dependencies have been changed in package.json (delete the webapp/node_modules folder first!)
-->
<id>Install node and yarn</id>
<activation>
<property>
<name>ui.deps</name>
</property>
</activation>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<executions>
<execution>
<!--
Install node and yarn for the plugin to have a copy.
-->
<id>install node and yarn</id>
<goals>
<goal>install-node-and-yarn</goal>
</goals>
<configuration>
<!-- Make sure these match the version you installed on your system -->
<nodeVersion>v11.10.0</nodeVersion>
<yarnVersion>v1.13.0</yarnVersion>
</configuration>
</execution>
<execution>
<!--
Run yarn install when having updated dependencies
-->
<id>yarn install</id>
<goals>
<goal>yarn</goal>
</goals>
<!-- Optional configuration which provides for running any yarn command -->
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
<profile>
<!--
Since building the ui is slightly time-consuming, and not all changes necessarily affect the ui, turn on
building the ui explicitly by running 'atlas-package -Dob.ui.dev'.
This is faster than the production build as it does not perform all optimisations at build time.
-->
<id>Build the UI</id>
<activation>
<property>
<name>ui.dev</name>
</property>
</activation>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<executions>
<execution>
<id>yarn run build</id>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
<profile>
<!--
!!!! USE THIS FOR PRODUCTION BUILDS - IT RESULTS IN A MUCH SMALLER SIZE!!!!
Since building the ui this way is very time-consuming, and not all changes necessarily affect the ui, turn on
building the ui explicitly by running 'atlas-package -Dob.ui'
-->
<id>Build the UI with AOT</id>
<activation>
<property>
<name>ui</name>
</property>
</activation>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<executions>
<execution>
<!--
Uses webpack to bundle the application as set up in package.json
-->
<id>yarn run build</id>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>run build --output-hashing=all --prod --aot --configuration=production</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>Test the UI</id>
<activation>
<property>
<name>rt.ui.tests</name>
</property>
</activation>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<executions>
<execution>
<!--
Run the linter
-->
<id>yarn run lint</id>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>run lint</arguments>
</configuration>
</execution>
<execution>
<!--
Run the tests
-->
<id>yarn run test:travis-headless</id>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>run test:travis-headless</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
</profiles> </profiles>
</project> </project>
src/main/resources/META-INF/resources/assets/img/logo.jpg

3.92 KiB

This diff is collapsed.
This diff is collapsed.
# Created by https://www.gitignore.io/api/node
# Edit at https://www.gitignore.io/?templates=node
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# react / gatsby
public/
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# End of https://www.gitignore.io/api/node
dist/
node/
...@@ -7,14 +7,13 @@ ...@@ -7,14 +7,13 @@
<title>IDP6 - Login</title> <title>IDP6 - Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"></head> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"></head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<body class="my-login-page"> <body class="my-login-page">
<section class="h-100"> <section class="h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-md-center h-100"> <div class="row justify-content-md-center h-100">
<div class="card-wrapper"> <div class="card-wrapper">
<div class="brand"> <div class="brand">
<img src="assets/img/ulille.png" alt="logo"> <img src="img/ulille.png" alt="logo">
</div> </div>
<div class="card fat"> <div class="card fat">
<div class="card-body"> <div class="card-body">
...@@ -89,7 +88,7 @@ ...@@ -89,7 +88,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button id="generate-qr-code-btn" type="button" onclick="asyncRegister()" class="btn btn-success">Generate QR-Code</button> <button id="generate-qr-code-btn" type="button" onclick="register()" class="btn btn-success">Generate QR-Code</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> </div>
</div> </div>
...@@ -100,6 +99,5 @@ ...@@ -100,6 +99,5 @@
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="assets/js/main.js"></script>
</body> </body>
</html> </html>
{
"name": "idp6-ui",
"version": "0.0.1",
"license": "MIT",
"description": "UI for Identity Provider 6",
"scripts": {
"build": "webpack"
},
"private": true,
"dependencies": {},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9"
}
}
import './css/style.css';
function register() { function register() {
const email = document const email = document
.getElementById('registerEmail') .getElementById('registerEmail')
......
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management',
template: 'index.html'
}),
new CopyPlugin([
{ from: 'src/img/', to: 'img/'}
])
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment