diff --git a/.eslintrc b/.eslintrc
index 34a827a..0380644 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,5 +1,6 @@
{
env: {
+ node: true,
browser: true,
},
diff --git a/Dockerfile b/Dockerfile
index 475514d..13c92a2 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:4.4.5
+FROM node:6.7.0
# Install location
ENV dir /var/www/online-client
@@ -7,14 +7,12 @@ ENV dir /var/www/online-client
ADD . ${dir}
# Install the node module
-RUN npm install -g http-server
RUN cd ${dir} && npm install --unsafe-perm
RUN cd ${dir} && cp settings.json /tmp && cp -r queries /tmp/queries/
# Expose the default port
-EXPOSE 8080
+EXPOSE 3000
# Run base binary
WORKDIR ${dir}
-CMD cp /tmp/settings.json settings.json && rm -rf queries && cp -r /tmp/queries queries/ && npm run production && http-server build
-
+CMD cp /tmp/settings.json settings.json && rm -rf queries && cp -r /tmp/queries queries/ && npm start
diff --git a/README.md b/README.md
index acf42e8..d0027fe 100644
--- a/README.md
+++ b/README.md
@@ -8,11 +8,9 @@ It allows users to execute SPARQL queries over one or multiple datasets exposed
## Using the code
- Run `npm install` to fetch dependencies and build the browser version of the client code.
-- Place the files from this repository on a local Web server
- (for instance, by starting a tool such as [adsf](https://github.com/ddfreyne/adsf) in the root folder).
-- Open `index.html` in the browser through your Web server (typically `http://localhost:3000/`).
+- Run `npm start` to run a local Web server.
- Edit datasources in `settings.json` and queries in the `queries` folder, and run `queries-to-json` to compile both of them in a single JSON file.
-- Run `./build-minified` to generate a production version in the `build` folder.
+- Run `npm run production` to generate a production version in the `build` folder.
## How the browser client works
The original _ldf-client_ library is written for the Node.js environment. The [browserify](http://browserify.org/) library makes it compatible with browsers.
@@ -21,7 +19,7 @@ The file `browser.js` makes the Node.js library _ldf-client_ available in global
This script is compiled with its dependencies to `deps/ldf-client-browser.js` via `npm run postinstall`.
-You can use the resulting `ldf-client-browser.js` in your browser applications; it is independent of the jQuery UI widget.
+You can use the resulting `deps/ldf-client-browser.js` in your browser applications; it is independent of the jQuery UI widget.
### _(Optional)_ Running in a Docker container
@@ -36,7 +34,7 @@ Next, create a `queries` directory in which you should insert the queries that w
After that, you can run your newly created container in which `settings.json` and `queries` is mounted to the Docker container:
```bash
-$ docker run -p 8080:8080 -it --rm -v $(pwd)/settings.json:/tmp/settings.json -v $(pwd)/queries:/tmp/queries ldf-client-widget
+$ docker run -p 3000:3000 -it --rm -v $(pwd)/settings.json:/tmp/settings.json -v $(pwd)/queries:/tmp/queries ldf-client-widget
```
## License
diff --git a/build-minified b/build-minified
deleted file mode 100755
index e4ff4ba..0000000
--- a/build-minified
+++ /dev/null
@@ -1,54 +0,0 @@
-#!/usr/bin/env node
-/*! @license ©2014 Ruben Verborgh - Multimedia Lab / iMinds / Ghent University */
-/* Builds the minified HTML and JavaScript. */
-
-var fs = require('fs'),
- path = require('path'),
- UglifyJS = require("uglify-js"),
- UglifyCSS = require('uglifycss');;
-
-var sourceDir =__dirname,
- outputDir = ensureExists(path.join(sourceDir, 'build')),
- scriptsDir = ensureExists(path.join(outputDir, 'scripts')),
- imagesDir = ensureExists(path.join(outputDir, 'images')),
- html = fs.readFileSync(path.join(sourceDir, 'index.html'), 'utf8');
-
-// Bundle all script files into a single script
-var scriptFiles = [], inlineScript = '', minifiedScript;
-html = html.replace(/\s*\n
'); -} - -// Bundle all inline scripts into a single script -html = html.replace(/\s*\n'); -} - -// Inline the styles -var style = UglifyCSS.processFiles([path.join(sourceDir, 'ldf-client.css')]) -html = html.replace(/]*ldf-client[^>]*>/, '\n'); - -// Copy auxiliary files -copy(path.join(sourceDir, 'queries.json'), path.join(outputDir, 'queries.json')); -fs.readdirSync(path.join(sourceDir, 'images')).forEach(function (image) { - copy(path.join(sourceDir, 'images', image), path.join(imagesDir, image)); -}); -copy(path.join(sourceDir, 'favicon.ico'), path.join(outputDir, 'favicon.ico')); - -// Write the output HTML -fs.writeFileSync(path.join(outputDir, 'index.html'), html); - -// Ensures the path exists -function ensureExists(path) { return fs.existsSync(path) || fs.mkdirSync(path), path; } - -// Copies the source file to the destination -function copy(source, destination) { fs.writeFileSync(destination, fs.readFileSync(source)); } diff --git a/deps/chosen-1.1.0.js b/deps/chosen-1.1.0.js old mode 100755 new mode 100644 diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..cde3596 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,102 @@ +var gulp = require('gulp'), + pump = require('pump'), + exec = require('child_process').exec, + autoprefixer = require('autoprefixer'), + concat = require('gulp-concat'), + csso = require('postcss-csso'), + del = require('del'), + postcss = require('gulp-postcss'), + replace = require('gulp-replace'), + sourcemaps = require('gulp-sourcemaps'), + sync = require('browser-sync').create(), + uglify = require('gulp-uglify'), + util = require('gulp-util'); + +var production = util.env.production; + +gulp.task('default', ['build'], function () { + sync.init({ + ui: false, + notify: false, + server: { baseDir: 'build' }, + }); + gulp.watch('*.html', ['html']); + gulp.watch(['*.js', 'deps'], ['scripts']); + gulp.watch('*.css', ['styles']); + gulp.watch(['*.json', 'queries/**/*.sparql'], ['queries']); +}); + +gulp.task('clean', function () { + return del('build'); +}); + +gulp.task('build', ['html', 'queries', 'scripts', 'styles']); + +gulp.task('html', function (done) { + pump([ + gulp.src(['*.html', 'images/*.*', 'favicon.ico'], { base: './' }), + gulp.dest('build'), + sync.stream(), + ], done); +}); + +gulp.task('queries', function (done) { + exec('./queries-to-json', function (error) { + if (error) + return done(error); + pump([ + gulp.src('queries.json'), + gulp.dest('build'), + sync.stream(), + ], done); + }); +}); + +gulp.task('scripts', ['scripts:ui', 'scripts:worker']); + +gulp.task('scripts:ui', function (done) { + pump([ + gulp.src([ + 'deps/jquery-2.1.0.js', + 'deps/chosen-1.1.0.js', + 'deps/fast-scroller.js', + 'ldf-client-ui.js', + 'ldf-client-url-state.js', + ]), + sourcemaps.init(), + concat('ldf-client-ui-packaged.js'), + production ? uglify({ preserveComments: 'license' }) : util.noop(), + sourcemaps.write('.'), + gulp.dest('build/scripts'), + sync.stream(), + ], done); +}); + +gulp.task('scripts:worker', function (done) { + pump([ + gulp.src([ + 'deps/ldf-client-browser.js', + 'ldf-client-worker.js', + ]), + sourcemaps.init(), + concat('ldf-client-worker.js'), + // Correct lodash from window (browser) to self (Web Worker) + replace(/var root =.*;/, 'var root = self;'), + production ? uglify({ preserveComments: 'license' }) : util.noop(), + sourcemaps.write('.'), + gulp.dest('build/scripts'), + sync.stream(), + ], done); +}); + +gulp.task('styles', function (done) { + pump([ + gulp.src('*.css'), + postcss([ + autoprefixer, + csso, + ]), + gulp.dest('build/styles'), + sync.stream(), + ], done); +}); diff --git a/index.html b/index.html index 7d0cf2f..f0a95c4 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,7 @@
- - - - - - - - + @@ -80,5 +69,12 @@
.
+ + +