From d61032537d96ef3a0c4d96c6d9638bdfd024e7ed Mon Sep 17 00:00:00 2001 From: PGBI Date: Tue, 23 May 2017 13:23:03 +0200 Subject: [PATCH] Use gulp to build kong-dashboard. Reduce docker image size. Npm package to include built app --- .dockerignore | 4 +- .gitignore | 3 +- .npmignore | 6 +++ Dockerfile | 4 +- README.md | 3 +- bin/kong-dashboard.js | 23 +++++++- {lib => bin}/server.js | 0 docker-entrypoint.sh | 3 ++ gulpfile.js | 71 +++++++++++++++++++++++++ lib/kong-dashboard.js | 108 -------------------------------------- package.json | 32 +++++------ provision.sh | 12 +++-- src/{ => html}/index.html | 0 13 files changed, 130 insertions(+), 139 deletions(-) create mode 100644 .npmignore rename {lib => bin}/server.js (100%) create mode 100755 docker-entrypoint.sh create mode 100644 gulpfile.js delete mode 100644 lib/kong-dashboard.js rename src/{ => html}/index.html (100%) diff --git a/.dockerignore b/.dockerignore index fb5f685..0499c5f 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,8 +1,6 @@ .idea/ +.vagrant *.iml -.dockerignore -Dockerfile node_modules/ public/ screenshots/ -.vagrant diff --git a/.gitignore b/.gitignore index f9b854e..e706455 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ .idea/ +.vagrant *.iml -bower_components/ node_modules/ public/ src/scss/_custom_theme.scss -.vagrant diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..c588a86 --- /dev/null +++ b/.npmignore @@ -0,0 +1,6 @@ +.idea/ +.vagrant +*.iml +node_modules/ +screenshots/ +src/scss/_custom_theme.scss diff --git a/Dockerfile b/Dockerfile index bdfbbc4..5dd910b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -3,8 +3,8 @@ FROM mhart/alpine-node:7.5.0 COPY . /app WORKDIR /app -RUN npm install --unsafe-perm +RUN npm install && npm run build && npm prune --production EXPOSE 8080 -CMD npm run start +ENTRYPOINT ["./docker-entrypoint.sh"] diff --git a/README.md b/README.md index b4a77d5..1f0f07a 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,7 @@ git checkout 1.0 # Build Kong Dashboard npm install +npm run build # Start Kong Dashboard npm start @@ -91,7 +92,7 @@ docker run -d -p 8080:8080 pgbi/kong-dashboard:v1 docker run -d -p [port]:8080 pgbi/kong-dashboard:v1 # Start Kong Dashboard with basic auth -docker run -d -p 8080:8080 pgbi/kong-dashboard:v1 npm start -- -a user=password +docker run -d -p 8080:8080 pgbi/kong-dashboard:v1 -a user=password ``` diff --git a/bin/kong-dashboard.js b/bin/kong-dashboard.js index 0ede499..870dbda 100644 --- a/bin/kong-dashboard.js +++ b/bin/kong-dashboard.js @@ -1,8 +1,8 @@ #!/usr/bin/env node -var dashboard = require('../lib/kong-dashboard'); var parseArgs = require('minimist'); var argv = parseArgs(process.argv.slice(2)); +var child_process = require('child_process'); // validate options var validOptions = ['_', 'a', 'p']; @@ -35,5 +35,24 @@ if (argv._[0] === 'build') { if (argv._[0] === 'start') { var port = argv.p ? argv.p : 8080; var auth = argv.a; - dashboard.serve(port, auth); + + // launch server + console.log('Launching webserver'); + if (port) { + process.env['kong-dashboard-port'] = port; + } + if (auth) { + auth = auth.split('='); + process.env['kong-dashboard-name'] = auth[0]; + process.env['kong-dashboard-pass'] = auth[1]; + } + var server = child_process.fork(__dirname + '/server', [], { + env: process.env + }); + server.on('message', function (message) { + process.stdout.write(message); + }); + server.on('close', function (message) { + process.stdout.write('Proxy server is down.'); + }); } diff --git a/lib/server.js b/bin/server.js similarity index 100% rename from lib/server.js rename to bin/server.js diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh new file mode 100755 index 0000000..4fcb8ab --- /dev/null +++ b/docker-entrypoint.sh @@ -0,0 +1,3 @@ +#!/bin/sh + +npm run start -- $@ diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..2e94a5c --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,71 @@ +'use strict'; + +var child_process = require('child_process'); +var concat = require('gulp-concat'); +var fs = require('fs'); +var gulp = require('gulp'); +var sass = require('gulp-sass'); +var uglify = require('gulp-uglify'); + +// Define file path variables +var paths = { + root: 'src/', + js_src: 'src/js', + sass_src: 'src/scss', + html_src: 'src/html', + css_src: 'src/scss', + dist: 'public' +}; + +gulp.task('build_js', function () { + return gulp + .src([ + "./node_modules/jquery/dist/jquery.min.js", + "./node_modules/angular/angular.min.js", + "./node_modules/angular-route/angular-route.min.js", + "./node_modules/angular-cookies/angular-cookies.min.js", + "./node_modules/angular-animate/angular-animate.min.js", + "./node_modules/angular-sanitize/angular-sanitize.min.js", + "./node_modules/materialize-css/dist/js/materialize.min.js", + "./node_modules/ng-infinite-scroll/build/ng-infinite-scroll.min.js", + paths.js_src + '/**/*.js' + ]) + .pipe(uglify()) + .pipe(concat('app.min.js')) + .pipe(gulp.dest(paths.dist + '/js')); +}); + +gulp.task('build_html', function() { + gulp.src([paths.html_src + '/index.html']) + .pipe(gulp.dest(paths.dist)); + gulp.src([paths.html_src + '/**/*']) + .pipe(gulp.dest(paths.dist + '/html')); + gulp.src(['node_modules/materialize-css/dist/fonts/roboto/**/*']) + .pipe(gulp.dest(paths.dist + '/fonts/roboto')); +}); + +gulp.task('build_css', function() { + var src_file = 'app.scss'; + if (fs.existsSync(paths.sass_src + '/custom_app.scss')) { + src_file = 'custom_app.scss'; + } + gulp.src([paths.sass_src + '/' + src_file]) + .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) + .pipe(concat('app.min.css')) + .pipe(gulp.dest(paths.dist + '/css')); +}); + +gulp.task('build', ['build_js', 'build_css', 'build_html']); + +gulp.task('watch', function() { + gulp.watch(paths.js_src + '/**/*.js', ['build_js']); + gulp.watch(paths.html_src + '/**/*.html', ['build_html']); + gulp.watch(paths.sass_src + '/**/*.scss', ['build_css']); +}); + +gulp.task('serve', ['build', 'watch'], function() { + var args = process.argv; + args.push('start'); + args = args.slice(3); + child_process.fork(__dirname + '/bin/kong-dashboard', args); +}); diff --git a/lib/kong-dashboard.js b/lib/kong-dashboard.js deleted file mode 100644 index 1d27b60..0000000 --- a/lib/kong-dashboard.js +++ /dev/null @@ -1,108 +0,0 @@ -#!/usr/bin/env node - -var fs = require('fs-extra'); -var sass = require('node-sass'); -var rimraf = require('rimraf'); -var uglify_js = require('uglify-js'); -var glob = require('glob'); -var child_process = require('child_process'); - -exports.build = function() { - rimraf('public', function (err) { - if (err) throw err; - fs.mkdirSync('public'); - fs.mkdirSync('public/css'); - fs.mkdirSync('public/js'); - fs.mkdirSync('public/fonts'); - fs.mkdirSync('public/fonts/roboto'); - - compile_sass(); - compile_js(); - compile_html(); - }); -}; - -exports.serve = function(port, auth) { - // launch server - console.log('Launching webserver'); - if (port) { - process.env['kong-dashboard-port'] = port; - } - if (auth) { - auth = auth.split('='); - process.env['kong-dashboard-name'] = auth[0]; - process.env['kong-dashboard-pass'] = auth[1]; - } - var server = child_process.fork(__dirname + '/server', [], { - env: process.env - }); - server.on('message', function (message) { - process.stdout.write(message); - }); - server.on('close', function (message) { - process.stdout.write('Proxy server is down.'); - }); - server.on('error', handle_error); -}; - -var compile_sass = function() { - console.log('Generating css files'); - var data; - try { - data = fs.readFileSync("./src/scss/_custom_theme.scss", "utf-8"); - } catch (err) { - data = ''; - } - data += fs.readFileSync("./src/scss/app.scss", "utf-8"); - - sass.render({ - data: data, - outputStyle: 'compressed' - }, function(err, result) { - if (err) throw err; - fs.writeFile('public/css/app.min.css', result.css.toString(), function(err) { - if (err) throw err; - console.log('Css files compiled'); - }); - }); -}; - -var compile_js = function() { - console.log('Generating js files...'); - glob("src/js/**/*.js", function (err, app_filenames) { - if (err) throw err; - var filenames = [ - "./node_modules/jquery/dist/jquery.min.js", - "./node_modules/angular/angular.min.js", - "./node_modules/angular-route/angular-route.min.js", - "./node_modules/angular-cookies/angular-cookies.min.js", - "./node_modules/angular-animate/angular-animate.min.js", - "./node_modules/angular-sanitize/angular-sanitize.min.js", - "./node_modules/materialize-css/dist/js/materialize.min.js", - "./node_modules/ng-infinite-scroll/build/ng-infinite-scroll.min.js", - ]; - filenames = filenames.concat(app_filenames); - - var result = uglify_js.minify(filenames, { - outSourceMap: "app.min.js.map" - }); - - fs.writeFile('./public/js/app.min.js', result.code, function(err) { - if (err) throw err; - console.log('Js files compiled'); - }); - fs.writeFile('./public/js/app.min.js.map', result.map, handle_error); - }); -}; - -var compile_html = function() { - fs.copy('./src/html', './public/html', handle_error); - fs.copy('./src/index.html', './public/index.html', handle_error) - fs.copy('./node_modules/materialize-css/dist/fonts/roboto', './public/fonts/roboto', handle_error); -}; - -var handle_error = function(err) { - if (err) { - throw err; - } -}; diff --git a/package.json b/package.json index 3be8097..15f65fe 100644 --- a/package.json +++ b/package.json @@ -9,38 +9,38 @@ "url": "https://github.com/PGBI/kong-dashboard.git" }, "dependencies": { - "angular": "1.4.7", - "angular-animate": "1.4.7", - "angular-cookies": "1.4.7", - "angular-route": "1.4.7", - "angular-sanitize": "1.4.7", "basic-auth": "^1.1.0", - "fs-extra": "^1.0.0", - "glob": "^7.1.1", "http-proxy": "^1.16.2", - "jquery": "^3.1.1", "koa": "^1.2.4", "koa-add-trailing-slashes": "^1.1.0", "koa-basic-auth": "^1.1.2", "koa-mount": "^1.3.0", "koa-static": "^2.0.0", - "materialize-css": "0.97.7", - "minimist": "^1.2.0", - "ng-infinite-scroll": "^1.3.0", - "node-sass": "^4.1.1", - "rimraf": "^2.5.4", - "uglify-js": "^2.7.5" + "minimist": "^1.2.0" }, "bin": { "kong-dashboard": "./bin/kong-dashboard.js" }, "scripts": { - "install": "node ./bin/kong-dashboard build", + "prepublishOnly": "node_modules/.bin/gulp build", + "build": "node_modules/.bin/gulp build", "start": "node ./bin/kong-dashboard start", "test": "mocha" }, "devDependencies": { + "angular": "1.4.7", + "angular-animate": "1.4.7", + "angular-cookies": "1.4.7", + "angular-route": "1.4.7", + "angular-sanitize": "1.4.7", "chai": "^3.5.0", - "mocha": "^3.2.0" + "gulp": "^3.9.1", + "gulp-concat": "^2.6.1", + "gulp-sass": "^3.1.0", + "gulp-uglify": "^3.0.0", + "jquery": "^3.1.1", + "materialize-css": "0.97.7", + "mocha": "^3.2.0", + "ng-infinite-scroll": "^1.3.0" } } diff --git a/provision.sh b/provision.sh index f96ce8a..a5ebcb6 100644 --- a/provision.sh +++ b/provision.sh @@ -1,8 +1,10 @@ #!/bin/bash cd /vagrant -sudo apt-get update -sudo apt-get install -y nodejs npm git -sudo ln -s /usr/bin/nodejs /usr/bin/node -sudo rm -r node_modules -sudo -u vagrant -H sh -c "npm install" + +curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash - +apt-get update +apt-get install -y nodejs git + +rm -r node_modules +npm install && npm run build && npm prune --production echo "Successfully Installed Kong Dashboard." diff --git a/src/index.html b/src/html/index.html similarity index 100% rename from src/index.html rename to src/html/index.html