JHipster Docker Build with UI Grid not showing fonts - angularjs

Question

I am using JHipster 3.8 with UI-Grid i.e. ui-grid.info when i run the application locally its working fine. But when i deploy to Docker using this command
./gradlew bootRepackage -Pprod buildDocker
docker-compose -f src/main/docker/app.yml up
i can see below error in developer console regarding fonts
generated.js:174220 GET http://192.168.99.100:8585/content/css/ui-grid-f53764c7a4.woff
GET http://192.168.99.100:8585/content/css/ui-grid-c6fa199a3e.ttf
and the page display with some character instead of icon as below :-
i have got couple solution for UI Grid link1 link2, but its not working for me, because as per the error file name and location are different, as gulp making such changes.
Not sure how to fix this issue. Can some once guide me?
EDIT
My Gulp File:-
// Generated on 2016-09-20 using generator-jhipster 3.7.1
'use strict';
var gulp = require('gulp'),
expect = require('gulp-expect-file'),
es = require('event-stream'),
flatten = require('gulp-flatten'),
sass = require('gulp-sass'),
rev = require('gulp-rev'),
templateCache = require('gulp-angular-templatecache'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
ngConstant = require('gulp-ng-constant'),
rename = require('gulp-rename'),
eslint = require('gulp-eslint'),
argv = require('yargs').argv,
gutil = require('gulp-util'),
protractor = require('gulp-protractor').protractor,
del = require('del'),
runSequence = require('run-sequence'),
browserSync = require('browser-sync'),
KarmaServer = require('karma').Server,
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
gulpIf = require('gulp-if');
var handleErrors = require('./gulp/handle-errors'),
serve = require('./gulp/serve'),
util = require('./gulp/utils'),
copy = require('./gulp/copy'),
inject = require('./gulp/inject'),
build = require('./gulp/build');
var config = require('./gulp/config');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('copy', ['copy:i18n', 'copy:fonts', 'copy:common']);
gulp.task('copy:i18n', copy.i18n);
gulp.task('copy:languages', copy.languages);
gulp.task('copy:fonts', copy.fonts);
gulp.task('copy:common', copy.common);
gulp.task('copy:swagger', copy.swagger);
gulp.task('copy:images', copy.images);
gulp.task('images', function () {
return gulp.src(config.app + 'content/images/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/images'))
.pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/images'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('sass', function () {
return es.merge(
gulp.src(config.sassSrc)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(expect(config.sassSrc))
.pipe(changed(config.cssDir, {extension: '.css'}))
.pipe(sass({includePaths:config.bower}).on('error', sass.logError))
.pipe(gulp.dest(config.cssDir)),
gulp.src(config.bower + '**/fonts/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.app + 'content/fonts'))
.pipe(flatten())
.pipe(gulp.dest(config.app + 'content/fonts'))
);
});
gulp.task('copyAngularUiGridFonts', function() {
gulp.src(config.app + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
.pipe(gulp.dest(config.dist + 'content/css/'));
});
gulp.task('styles', ['sass'], function () {
return gulp.src(config.app + 'content/css')
.pipe(browserSync.reload({stream: true}));
});
gulp.task('inject', function() {
runSequence('inject:dep', 'inject:app');
});
gulp.task('inject:dep', ['inject:test', 'inject:vendor']);
gulp.task('inject:app', inject.app);
gulp.task('inject:vendor', inject.vendor);
gulp.task('inject:test', inject.test);
gulp.task('inject:troubleshoot', inject.troubleshoot);
gulp.task('assets:prod', ['images', 'styles', 'html', 'copy:swagger', 'copy:images'], build);
gulp.task('html', function () {
return gulp.src(config.app + 'app/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(templateCache({
module: 'dashboardApp',
root: 'app/',
moduleSystem: 'IIFE'
}))
.pipe(gulp.dest(config.tmp));
});
gulp.task('ngconstant:dev', function () {
return ngConstant({
name: 'dashboardApp',
constants: {
VERSION: util.parseVersion(),
DEBUG_INFO_ENABLED: true
},
template: config.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(config.app + 'app/'));
});
gulp.task('ngconstant:prod', function () {
return ngConstant({
name: 'dashboardApp',
constants: {
VERSION: util.parseVersion(),
DEBUG_INFO_ENABLED: false
},
template: config.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(config.app + 'app/'));
});
/*gulp.task('fonts:prod', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter(config.bower + 'angular-ui-grid/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.tmp + 'content/css/'));
});*/
// check app for eslint errors
gulp.task('eslint', function () {
return gulp.src(['gulpfile.js', config.app + 'app/**/*.js'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failOnError());
});
// check app for eslint errors anf fix some of them
gulp.task('eslint:fix', function () {
return gulp.src(config.app + 'app/**/*.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint({
fix: true
}))
.pipe(eslint.format())
.pipe(gulpIf(util.isLintFixed, gulp.dest(config.app + 'app')));
});
gulp.task('test', ['inject:test', 'ngconstant:dev'], function (done) {
new KarmaServer({
configFile: __dirname + '/' + config.test + 'karma.conf.js',
singleRun: true
}, done).start();
});
/* to run individual suites pass `gulp itest --suite suiteName` */
gulp.task('protractor', function () {
var configObj = {
configFile: config.test + 'protractor.conf.js'
};
if (argv.suite) {
configObj['args'] = ['--suite', argv.suite];
}
return gulp.src([])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(protractor(configObj))
.on('error', function () {
gutil.log('E2E Tests failed');
process.exit(1);
});
});
gulp.task('itest', ['protractor']);
gulp.task('watch', function () {
gulp.watch('bower.json', ['install']);
gulp.watch(['gulpfile.js', 'build.gradle'], ['ngconstant:dev']);
gulp.watch(config.sassSrc, ['styles']);
gulp.watch(config.app + 'content/images/**', ['images']);
gulp.watch(config.app + 'app/**/*.js', ['inject:app']);
gulp.watch([config.app + '*.html', config.app + 'app/**', config.app + 'i18n/**']).on('change', browserSync.reload);
});
gulp.task('install', function () {
runSequence(['inject:dep', 'ngconstant:dev'], 'sass', 'copy:languages', 'inject:app', 'inject:troubleshoot');
});
gulp.task('serve', ['install'], serve);
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy','copyAngularUiGridFonts', 'inject:vendor', 'ngconstant:prod', 'copy:languages'], 'inject:app', 'inject:troubleshoot', 'assets:prod', cb);
});
gulp.task('default', ['serve']);
EDIT:-
buildscript {
repositories {
mavenLocal()
mavenCentral()
jcenter()
maven { url "http://repo.spring.io/plugins-release" }
maven { url "http://repo.spring.io/milestone" }
maven { url "https://plugins.gradle.org/m2/" }
}
dependencies {
classpath "org.sonarsource.scanner.gradle:sonarqube-gradle-plugin:2.0.1"
classpath "net.ltgt.gradle:gradle-apt-plugin:0.6"
classpath "org.springframework.boot:spring-boot-gradle-plugin:${spring_boot_version}"
classpath "org.springframework.build.gradle:propdeps-plugin:0.0.7"
classpath "com.moowork.gradle:gradle-node-plugin:0.12"
classpath "com.moowork.gradle:gradle-gulp-plugin:0.12"
classpath "se.transmode.gradle:gradle-docker:1.2"
classpath "io.spring.gradle:dependency-management-plugin:0.5.6.RELEASE"
//jhipster-needle-gradle-buildscript-dependency - JHipster will add additional gradle build script plugins here
}
}
apply plugin: 'java'
sourceCompatibility=1.8
targetCompatibility=1.8
apply plugin: 'maven'
apply plugin: 'spring-boot'
apply plugin: 'war'
apply plugin: 'propdeps'
apply plugin: 'io.spring.dependency-management'
/* downgrade Hibernate to 4.3 */
ext['hibernate.version'] = '${hibernate_entitymanager_version}'
defaultTasks 'bootRun'
sourceSets {
generated {
java {
srcDirs = ['src/main/generated']
}
}
}
bootRepackage {
mainClass = 'com.equidity.dashboard.XboardApp'
}
war {
}
springBoot {
mainClass = 'com.equidity.dashboard.XboardApp'
executable = true
buildInfo()
}
bootRun {
addResources = false
}
apply from: 'gradle/yeoman.gradle'
apply from: 'gradle/sonar.gradle'
apply from: 'gradle/liquibase.gradle'
apply from: 'gradle/gatling.gradle'
apply from: 'gradle/mapstruct.gradle'
apply from: 'gradle/docker.gradle'
//jhipster-needle-gradle-apply-from - JHipster will add additional gradle scripts to be applied here
if (project.hasProperty('prod')) {
apply from: 'gradle/profile_prod.gradle'
} else {
apply from: 'gradle/profile_dev.gradle'
}
group = 'com.equidity.dashboard'
version = '0.0.1-SNAPSHOT'
description = ''
configurations {
providedRuntime
compile.exclude module: "spring-boot-starter-tomcat"
}
repositories {
mavenLocal()
mavenCentral()
jcenter()
maven { url 'http://repo.spring.io/milestone' }
maven { url 'http://repo.spring.io/snapshot' }
maven { url 'https://repository.jboss.org/nexus/content/repositories/releases' }
maven { url 'https://oss.sonatype.org/content/repositories/releases' }
maven { url 'https://oss.sonatype.org/content/repositories/snapshots' }
maven { url 'http://repo.maven.apache.org/maven2' }
}
dependencies {
compile "io.dropwizard.metrics:metrics-core"
compile "io.dropwizard.metrics:metrics-graphite:${dropwizard_metrics_version}"
compile "io.dropwizard.metrics:metrics-healthchecks:${dropwizard_metrics_version}"
compile "io.dropwizard.metrics:metrics-jvm:${dropwizard_metrics_version}"
compile "io.dropwizard.metrics:metrics-servlet:${dropwizard_metrics_version}"
compile "io.dropwizard.metrics:metrics-json:${dropwizard_metrics_version}"
compile ("io.dropwizard.metrics:metrics-servlets:${dropwizard_metrics_version}") {
exclude(module: 'metrics-healthchecks')
}
compile("net.logstash.logback:logstash-logback-encoder:${logstash_logback_encoder_version}") {
exclude(module: 'ch.qos.logback')
}
compile "com.fasterxml.jackson.datatype:jackson-datatype-json-org:${jackson_version}"
compile "com.fasterxml.jackson.datatype:jackson-datatype-hppc:${jackson_version}"
compile "com.fasterxml.jackson.datatype:jackson-datatype-jsr310:${jackson_version}"
compile "com.fasterxml.jackson.datatype:jackson-datatype-hibernate4"
compile "com.fasterxml.jackson.core:jackson-annotations:${jackson_version}"
compile "com.fasterxml.jackson.core:jackson-databind:${jackson_version}"
compile ("com.ryantenney.metrics:metrics-spring:${metrics_spring_version}") {
exclude(module: 'metrics-core')
exclude(module: 'metrics-healthchecks')
}
compile "com.hazelcast:hazelcast:${hazelcast_version}"
compile "com.hazelcast:hazelcast-hibernate4:${hazelcast_version}"
compile "com.hazelcast:hazelcast-spring:${hazelcast_version}"
compile "com.hazelcast:hazelcast-wm:${hazelcast_version}"
compile "org.hibernate:hibernate-core:${hibernate_entitymanager_version}"
compile("com.zaxxer:HikariCP:${HikariCP_version}") {
exclude(module: 'tools')
}
compile "org.apache.commons:commons-lang3:${commons_lang_version}"
compile "commons-io:commons-io:${commons_io_version}"
compile "javax.inject:javax.inject:${javax_inject_version}"
compile "javax.transaction:javax.transaction-api"
compile "org.apache.geronimo.javamail:geronimo-javamail_1.4_mail:${geronimo_javamail_1_4_mail_version}"
compile "org.hibernate:hibernate-envers"
compile "org.hibernate:hibernate-validator"
compile ("org.liquibase:liquibase-core:${liquibase_core_version}") {
exclude(module: 'jetty-servlet')
}
compile "com.mattbertolini:liquibase-slf4j:${liquibase_slf4j_version}"
compile "org.springframework.boot:spring-boot-actuator"
compile "org.springframework.boot:spring-boot-autoconfigure"
compile "org.springframework.boot:spring-boot-loader-tools"
compile "org.springframework.boot:spring-boot-starter-logging"
compile "org.springframework.boot:spring-boot-starter-aop"
compile "org.springframework.boot:spring-boot-starter-data-jpa"
compile "org.springframework.boot:spring-boot-starter-data-elasticsearch"
// needed to get around elasticsearch stacktrace about jna not found
// https://github.com/elastic/elasticsearch/issues/13245
compile "net.java.dev.jna:jna:${jna_version}"
compile "org.springframework.boot:spring-boot-starter-security"
compile ("org.springframework.boot:spring-boot-starter-web") {
exclude module: 'spring-boot-starter-tomcat'
}
compile "org.springframework.boot:spring-boot-starter-undertow"
compile "org.springframework.boot:spring-boot-starter-websocket"
compile "org.springframework.boot:spring-boot-starter-thymeleaf"
compile "org.springframework.cloud:spring-cloud-cloudfoundry-connector"
compile "org.springframework.cloud:spring-cloud-spring-service-connector"
compile "org.springframework.cloud:spring-cloud-localconfig-connector"
compile ("org.springframework:spring-context-support") {
exclude(module: 'quartz')
}
compile "org.springframework.security:spring-security-config:${spring_security_version}"
compile "org.springframework.security:spring-security-data:${spring_security_version}"
compile "org.springframework.security:spring-security-web:${spring_security_version}"
compile "org.springframework.security:spring-security-messaging:${spring_security_version}"
compile("io.springfox:springfox-swagger2:${springfox_version}"){
exclude module: 'mapstruct'
}
compile "mysql:mysql-connector-java"
compile "fr.ippon.spark.metrics:metrics-spark-reporter:${metrics_spark_reporter_version}"
compile "org.mapstruct:mapstruct-jdk8:${mapstruct_version}"
compile "org.apache.httpcomponents:httpclient"
compile "org.springframework.social:spring-social-security"
compile "org.springframework.social:spring-social-google:${spring_social_google_version}"
compile "org.springframework.social:spring-social-facebook"
compile "org.springframework.social:spring-social-twitter"
testCompile "com.jayway.awaitility:awaitility:${awaility_version}"
testCompile "com.jayway.jsonpath:json-path"
testCompile "info.cukes:cucumber-junit:${cucumber_version}"
testCompile "info.cukes:cucumber-spring:${cucumber_version}"
testCompile "org.springframework.boot:spring-boot-starter-test"
testCompile "org.springframework.security:spring-security-test"
testCompile "org.springframework.boot:spring-boot-test"
testCompile "org.assertj:assertj-core:${assertj_core_version}"
testCompile "junit:junit"
testCompile "org.mockito:mockito-core"
testCompile "com.mattbertolini:liquibase-slf4j:${liquibase_slf4j_version}"
testCompile "org.hamcrest:hamcrest-library"
testCompile "io.gatling.highcharts:gatling-charts-highcharts:${gatling_version}"
testCompile "com.h2database:h2"
optional "org.springframework.boot:spring-boot-configuration-processor:${spring_boot_version}"
//jhipster-needle-gradle-dependency - JHipster will add additional dependencies here
compile "com.querydsl:querydsl-core:${queryDslVersion}"
compile "com.querydsl:querydsl-jpa:${queryDslVersion}"
compile "com.querydsl:querydsl-apt:${queryDslVersion}"
querydslapt "com.querydsl:querydsl-apt:${queryDslVersion}"
}
clean {
delete "target"
}
task cleanResources(type: Delete) {
delete 'build/resources'
}
task wrapper(type: Wrapper) {
gradleVersion = '3.1'
}
task stage(dependsOn: 'bootRepackage') {
}
compileJava.dependsOn processResources
processResources.dependsOn cleanResources,bootBuildInfo
bootBuildInfo.mustRunAfter cleanResources
EDIT :- Profile_prod.gradle
import org.apache.tools.ant.taskdefs.condition.Os
apply plugin: 'spring-boot'
apply plugin: 'com.moowork.node'
apply plugin: 'com.moowork.gulp'
ext {
logbackLoglevel = "INFO"
}
dependencies {
}
def profiles = 'prod'
if (project.hasProperty('no-liquibase')) {
profiles += ',no-liquibase'
}
if (project.hasProperty('swagger')) {
profiles += ',swagger'
}
bootRun {
args = []
}
task gulpBuildWithOpts(type: GulpTask) {
args = ["build", "--no-notification"]
}
war {
webAppDirName = 'build/www/'
}
processResources {
filesMatching('**/logback-spring.xml') {
filter {
it.replace('#logback.loglevel#', logbackLoglevel)
}
}
filesMatching('**/application.yml') {
filter {
it.replace('#spring.profiles.active#', profiles)
}
}
}
gulpBuildWithOpts.dependsOn 'npmInstall'
gulpBuildWithOpts.dependsOn 'bower'
processResources.dependsOn gulpBuildWithOpts
test.dependsOn gulp_test
bootRun.dependsOn gulp_test

Answer 1

As described in in the links that you provided, you need a task in gulpfile.js which copy the missing files. You can use the following code to your existing copy task e.g.:
gulp.src(config.app + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/css/'))
.pipe(flatten())
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/css/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
i.e. your copy task is gone look like this:
gulp.task('copy', function () {
return es.merge(
gulp.src(config.app + 'i18n/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'i18n/'))
.pipe(gulp.dest(config.dist + 'i18n/')),
gulp.src(config.bower + 'bootstrap/fonts/*.*')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/fonts/'))
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/fonts/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
gulp.src(config.app + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/css/'))
.pipe(flatten())
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/css/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
gulp.src(config.app + 'content/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/fonts/'))
.pipe(flatten())
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/fonts/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
gulp.src([config.app + 'robots.txt', config.app + 'favicon.ico', config.app + '.htaccess'], { dot: true })
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist))
.pipe(gulp.dest(config.dist))
);
});
Its looks like angular-grid-ui is expecting the *.{ttf,woff,eof,svg} files to be found under the content/css and not content/fonts