Enonic XP deverlopment mode with Sass and ES6

Applications
1

Hi folks!

Just want to tell you that we managed to get development mode to work with our gulp build here at Posten so that rebuilding of our ES6 controllers and Sass code takes less than a second and is livereloaded in Enonic XP.

According to your documentation Enonic must be redployed (http://xp.readthedocs.io/en/stable/developer/projects/devmode.html). Well, no thats not entirely true.

So, this is first time ever I have done some server side development with zero build time (we have like a minute on one of our projects), well since I quit writing PHP.

Enonix XP is great for this reason alone, but doing frontend and backend in same language is fantastic!!!

Want to know how I did it?

Best regards

Preben Borch, EVRY

4 Likes
2

Wow, yes please :slight_smile: .

3

Yes Preben, please tell us! The suspense is killing me! :dizzy_face:

4

Basically I created a proxy for Enonic XP in node and deliver .css (built from sass) from filesystem and not through XP. Then I manipulated the page controller to sniff out which port Iā€™m running from and ask for my built files insted of the Enonic reference. The es6 files are just done with babel in gulp file and not in the gradle job.

Here goes gulpfile.babel.js:

const $ = require('gulp-load-plugins')();
const es6 = ['src/main/resources/**/*.es6', '!../src/main/resources/site/assets/**/*.es6'];
const css = ['src/main/resources/site/assets/scss/**/*.scss'];
const dst = 'build/resources/main/site';
const gulp = require('gulp');
const proxy = require('http-proxy').createProxyServer();
const enonic = 'http://localhost:8080';
const express = require('express');
const app = express();

gulp.task('copy', function() {
   return gulp.src('../some-other-repo/fonts/*')
      .pipe(gulp.dest('dist/fonts'))
});

gulp.task('css', function() {
   return gulp.src('src/main/resources/site/assets/scss/styles.scss')
      .pipe($.sourcemaps.init())
      .pipe($.sass().on('error', $.sass.logError))
      .pipe($.autoprefixer({ browsers: ['last 2 versions', 'ie > 8'], cascade: false }))
      .pipe($.sourcemaps.write())
      .pipe(gulp.dest('dist/css'))
      .pipe($.livereload());
});

gulp.task('build:controllers', function () {
   return gulp.src(es6, { base: 'src/main/resources/site' })
      .pipe($.babel({ comments: false, presets: ['es2015'] }))
      .pipe(gulp.dest(dst));
});

gulp.task('watch', ['copy', 'css', 'build:controllers'], function() {
   $.livereload({ start: true });
   app.all(/^(?!.*(webfonts.css|woff|ttf|styles\.css|scripts\.js|\.html)).*$/, (req, res) => proxy.web(req, res, { target: enonic }));
   app.use(express.static(__dirname)).listen(8889);
   gulp.watch(css, ['css']);
   gulp.watch(es6, ['build:controllers']);
});

Then I start XP in dev mode, run gulp watch, and starts my browser on the proxy port 8889.

Snippets from page.html:

<null data-th-if="${not watch}" data-th-remove="tag"> <link rel="stylesheet" data-th-href="${portal.assetUrl({'_path=css/styles.css'})}"/> </null> <null data-th-if="${watch}" data-th-remove="tag"> <link rel="stylesheet" href="/dist/css/styles.css"/> <script src="//dev.posten.no:35729/livereload.js?snipver=1" async="" defer=""></script> </null>

And page.es6

model = {
ā€¦
watch: request.port == 8889,
ā€¦}

4 Likes