JHipster Docker Build with UI Grid not showing fonts

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

duderoot · Answer 1 · 2016-10-05T07:38:46.483

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

its not working for me i am getting below error (look like gulp changing file name ) `http://192.168.99.100:8585/content/css/ui-grid-f53764c7a4.woff Failed to load resource: the server responded with a status of 404 (Not Found) http://192.168.99.100:8585/content/css/ui-grid-c6fa199a3e.ttf Failed to load resource: the server responded with a status of 404 (Not Found)` — Anchit Pancholi, Oct 03 '16 at 18:44
I have not managed to update my jhipster version to 3.7.1 the version that you are using and thats why I will need some time to have a look on your problem. From what I can see in your gulpfile the problem is created by the sass task which is creating the mapping to the files with the encrypted name. Can you also post the pom.xml file to see what task from gulp are call when building the app? — duderoot, Oct 04 '16 at 08:08
i am using gradle.. i have updated question with Gradle build file — Anchit Pancholi, Oct 04 '16 at 17:44
the gradle file specify that for building the prod is using a file profile_prod.gradle located in gradle folder. can you provide that file to pls. — duderoot, Oct 04 '16 at 22:34
I just update my answer with the solution with which it should work for you now too. — duderoot, Oct 06 '16 at 07:35
i dont know gulp, i have copied entire the copy task code in my gulp file,and its not working for me. do i need to make some modification on file apart from this. — Anchit Pancholi, Oct 06 '16 at 18:14

JHipster Docker Build with UI Grid not showing fonts

1 Answers1