Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
Add new Sagan client application
Browse files Browse the repository at this point in the history
This commit brings the new JavaScript files and static resources for the
client application.

Everything is bundled and optimized with a webpack build. The Gradle
build is triggering the NPM toolchain and packaging the sagan-client
module as a JAR.
  • Loading branch information
bclozel committed Feb 14, 2020
1 parent 366c34e commit 266d6d0
Show file tree
Hide file tree
Showing 199 changed files with 18,630 additions and 2 deletions.
3 changes: 3 additions & 0 deletions sagan-client/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
npm-debug.log
package-lock.json
52 changes: 52 additions & 0 deletions sagan-client/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Sagan client module

This module holds all web resources that make the client application of spring.io:

* JavaScript modules
* CSS styles
* images and fonts
* front-end dependencies

This module is using several tools for its own build system:

* [node.js and npm](http://nodejs.org)
* [Webpack](https://webpack.js.org/)

## Build requirements

Node.js is brought by the Gradle build itself, so you don't need it to build the project.
But if you want to work on the `sagan-client` module, installing a recent version of [node.js](http://nodejs.org)
is a good idea. Usage of the [Node Version Manager (nvm)](https://github.com/nvm-sh/nvm) is perfectly fine.

## Making changes in sagan-client

When running the application with the `SiteApplication` class in your IDE, resources in sagan-client are served
directly from resources built in the sagan-client module, so you can keep the Java application running
and re-build the client by running `npm run build` on the command line.

For this to work, your IDE should be configured to consider the `sagan-site` module as its working directory. Check out
the [run the site locally](https://github.com/spring-io/sagan/wiki/Run-the-site-locally) section on the wiki.

## Details about the JavaScript build

If you want to know more about the JavaScript build, this chapter will help you; reading this is not required.

The JavaScript application can be built manually with (the build result is located in the `build/dist` folder):

```
$ npm run build
```

This will trigger the webpack build, which bundles and optimizes the JavaScript, CSS and images.
Check the `webpack.config.js` file for more details.

### Node.js and npm

npm is the node package manager; it installs required dependencies in the `node_modules` directory.
Check the `package.json` file to find:

- all dependencies and their versions in `devDependencies`
- all available `scripts` that you can run with `npm run scriptname`

Note: we make extensive use of npm scripts so you don't have to install binaries globally on your system's PATH.
npm dynamically adds binaries listed in `node_modules/.bin` to its own PATH.
31 changes: 31 additions & 0 deletions sagan-client/build.gradle
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
plugins {
id 'com.moowork.node' version '1.3.1'
}

apply plugin: 'java'
apply plugin: 'com.moowork.node'

node {
version = '13.2.0'
npmVersion = '6.13.1'
download = true
}

def jsBuildDir = project.buildDir.absolutePath + '/dist'

jar {
from jsBuildDir
eachFile { details ->
details.path = details.path.startsWith('META-INF') ?: 'static/'+details.path
}
includeEmptyDirs = false
}

task npmBuild(dependsOn: npmInstall, type: NpmTask) {
inputs.file 'package.json'
inputs.dir('src')
outputs.dir jsBuildDir
args = ['run', 'build']
}

jar.dependsOn npmBuild
30 changes: 30 additions & 0 deletions sagan-client/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "sagan",
"description": "Client application for spring.io",
"private": true,
"repository": {
"type": "git",
"url": "http://github.com/spring-io/sagan.git"
},
"dependencies": {
"@fancyapps/fancybox": "^3.5.7",
"@fortawesome/fontawesome-free": "^5.12.0",
"bulma": "^0.8.0",
"jquery": "^3.4.1"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.5",
"css-loader": "^3.2.1",
"file-loader": "^5.0.2",
"mini-css-extract-plugin": "^0.8.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"style-loader": "^1.0.1",
"terser-webpack-plugin": "^2.2.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
"scripts": {
"build": "webpack"
}
}
2 changes: 2 additions & 0 deletions sagan-client/src/app/admin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import 'bulma/css/bulma.css'
import '../css/admin.css'
1 change: 1 addition & 0 deletions sagan-client/src/app/blog.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import '../css/blog.css'
1 change: 1 addition & 0 deletions sagan-client/src/app/guide.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import '../css/guide.css'
Loading

0 comments on commit 266d6d0

Please sign in to comment.