Use gulp and webpack

Let's get ready for react

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 build
 config.yml
+*.log

Makefile

@@ -1,4 +1,4 @@
-.PHONY: docker migration dev clean test build-prepare build-js build-css build-font build-go copy-templates copy-images watch-js watch-css watch-templates watch
+.PHONY: docker migration dev clean test
 
 DB_USER=test
 DB_PASS=test
@@ -13,48 +13,13 @@ DOCKER_COMPOSE_FILE=./docker/docker-compose.yml
 DOCKER_COMPOSE=docker-compose -f $(DOCKER_COMPOSE_FILE)
 
 build-prepare:
-	mkdir -p ./build/public/js
-	mkdir -p ./build/public/css
-	mkdir -p ./build/templates
 	mkdir -p ./build/public/img/movies
 
-build-js: build-prepare
+build: build-prepare
-	node node_modules/.bin/browserify src/public/js/app.js -o build/public/js/app.js
-
-build-css: build-prepare
-	node ./node_modules/.bin/lessc --include-path=./node_modules src/public/less/app.less build/public/css/app.css
-
-build-font: build-prepare
-	node ./node_modules/.bin/fontify
-
-build-go: build-prepare
 	go build -o ./build/canape src/main.go
 
-copy-templates: build-prepare
-	cp -r ./src/templates/* ./build/templates
-
-copy-images: build-prepare
-	cp -r ./src/public/img/* ./build/public/img
-
-build: build-js build-css build-font copy-templates copy-images build-go
-
-watch-js: build-prepare
-	node ./node_modules/.bin/nodemon -e js -w src/public/js/app.js -x 'make build-js' &
-
-watch-css: build-prepare
-	node ./node_modules/.bin/nodemon -e less -w src/public/less/app.less -x 'make build-css' &
-
-watch-templates: build-prepare
-	node ./node_modules/.bin/nodemon -e tmpl -w src/templates -x 'make copy-templates' &
-
-watch-images: build-prepare
-	node ./node_modules/.bin/nodemon -e jpg,png -w src/public/img -x 'make copy-images' &
-
 watch-go: build-prepare
 	CONFIG_FILE="./config.yml" fresh -c fresh.conf
-
-watch: watch-js watch-css watch-templates watch-images watch-go
-
 docker:
 	$(DOCKER_COMPOSE) up -d
 	sleep 4
@@ -67,7 +32,7 @@ migration-dev-data: docker migration-schema
 
 migration: migration-schema migration-dev-data
 
-dev: docker migration build-font watch
+dev: docker migration watch-go
 
 clean:
 	-rm -r ./build

README.md

@@ -1,43 +1,48 @@
 ## Install dependencies
 
-Go dependancies:
+### Install node
+
+You'll need node v6+, here's a link to install it:
+https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions
+
+### Install yarn and dependencies
+
+```
+sudo npm install -g yarn
+yarn install
+```
+
+### Go tools && Dependencies
+
+As there is no versioning yet, you need to manually go get all the packages
+
+
+```
+go get ./...
+```
+
+go tools:
 
 ```
 go get -v github.com/pilu/fresh
 go get -v github.com/mattes/migrate
 ```
 
-NPM dependencies:
-
-```
-npm install
-```
-
-### As there is no versioning yet, you need to manually go get all the packages
-
-```
-go get ./...
-```
-
-### NOTE: for debian users
-
-If you use debian the node binary is named nodejs you have to symlink it to node:
-
-
-```
-# ln -s /usr/bin/nodejs /usr/bin/node
-```
-
 ## Dev
 
 #### Check your config.yml file
 
-#### Run
+#### Run server
+
 ```
 make dev
 ```
 
-To setup the dev env, run server, and auto-reload on file changes
+#### Run javascript tools
+
+```
+yarn start
+```
 
 ## Connect to the database
 
@@ -45,6 +50,12 @@ To setup the dev env, run server, and auto-reload on file changes
 docker run -it --rm --link canape_postgresql_dev:postgres postgres:9.5 psql -h postgres -U test
 ```
 
+You'll need to connect to the dev database with this command:
+
+```
+\c dev
+```
+
 ## Default users
 
 This users are defined with this parameters:
@@ -67,17 +78,3 @@ make test
 ```
 make clean
 ```
-
-## Build
-
-
-```
-make build
-
-```
-
-## Watch js and less update, and auto-reload server
-
-```
-make watch
-```

fontify.json

@@ -1,7 +0,0 @@
-{
-  "modules": [
-    "bootstrap",
-    "font-awesome"
-  ],
-  "dest": "build/public"
-}

gulpfile.babel.js

@@ -0,0 +1,63 @@
+import gulp from 'gulp';
+import babel from 'gulp-babel';
+import less from 'gulp-less';
+import del from 'del';
+import webpack from 'webpack-stream';
+import webpackConfig from './webpack.config.babel';
+
+const paths = {
+  jsSrc: 'src/public/js/app.js',
+  jsDistDir: 'build/public/js',
+  lessSrc: 'src/public/less/app.less',
+  lessDest: 'build/public/css',
+  fontSrc: [
+    './node_modules/font-awesome/fonts/*',
+    './node_modules/bootstrap/fonts/*',
+  ],
+  fontDest: 'build/public/fonts',
+  imgSrc: 'src/public/img/*',
+  imgDest: 'build/public/img/',
+  goTemplatesSrc: 'src/templates/**/*.tmpl',
+  goTemplatesDest: 'build/templates/',
+  gulpFile: 'gulpfile.babel.js',
+  webpackFile: 'webpack.config.babel.js',
+};
+
+gulp.task('less', () =>
+    gulp.src(paths.lessSrc)
+  .pipe(less({
+    paths: [ './node_modules' ]
+  }))
+  .pipe(gulp.dest(paths.lessDest))
+);
+
+gulp.task('fonts', () =>
+  gulp.src(paths.fontSrc)
+    .pipe(gulp.dest(paths.fontDest))
+);
+
+gulp.task('images', () =>
+  gulp.src(paths.imgSrc)
+    .pipe(gulp.dest(paths.imgDest))
+);
+
+gulp.task('go-templates', () =>
+  gulp.src(paths.goTemplatesSrc)
+    .pipe(gulp.dest(paths.goTemplatesDest))
+);
+
+gulp.task('main', ['less', 'fonts', 'images'], () =>
+    gulp.src(paths.jsSrc)
+  .pipe(webpack(webpackConfig))
+  .pipe(gulp.dest(paths.jsDistDir))
+);
+
+gulp.task('watch', () => {
+  gulp.watch(paths.jsSrc, ['main']);
+  gulp.watch(paths.gulpFile, ['main']);
+  gulp.watch(paths.lessSrc, ['less']);
+  gulp.watch(paths.imgSrc, ['images']);
+  gulp.watch(paths.goTemplatesSrc, ['go-templates']);
+});
+
+gulp.task('default', ['watch', 'main']);

package.json

@@ -1,23 +1,33 @@
 {
     "name": "canape",
-  "version": "0.0.1",
+    "scripts": {
-  "description": "``` make dev ```",
+        "start": "gulp"
-  "main": "index.js",
+    },
-  "repository": {
+    "babel": {
-    "type": "git",
+        "presets": [
-    "url": "ssh://git@gitlab.quimbo.fr:5022/odwrtw/canape-sql.git"
+            "react",
+            "latest"
+        ]
     },
-  "author": "",
-  "license": "ISC",
     "dependencies": {
+        "babel-polyfill": "^6.16.0",
         "bootstrap": "^3.3.6",
         "font-awesome": "^4.7.0",
-    "jquery": "^2.2.4"
+        "jquery": "^2.2.4",
+        "react": "^15.3.2",
+        "react-dom": "^15.3.2"
     },
     "devDependencies": {
-    "browserify": "^13.0.1",
+        "babel": "^6.5.2",
+        "babel-loader": "^6.2.7",
+        "babel-preset-latest": "^6.16.0",
+        "babel-preset-react": "^6.16.0",
+        "del": "^2.2.2",
         "fontify": "0.0.2",
+        "gulp": "^3.9.1",
+        "gulp-babel": "^6.1.2",
+        "gulp-less": "^3.3.0",
         "less": "^2.7.1",
-    "nodemon": "^1.9.2"
+        "webpack-stream": "^3.2.0"
     }
 }

src/public/js/app.js

@@ -1,7 +1,4 @@
-var $ = require('jquery');
+require('jquery');
-global.jQuery = global.$ = $;
-
-var bootstrap = require('bootstrap');
 
 if($('#movie-library').length >0 ){
   listSelector();
@@ -9,7 +6,7 @@ if($('#movie-library').length >0 ){
 
 // Help select elements form the list views
 function listSelector() {
-    $first = $(".thumbnail").first();
+    let $first = $(".thumbnail").first();
     $first.addClass('thumbnail-selected');
 
     // Get the detail

webpack.config.babel.js

@@ -0,0 +1,26 @@
+var webpack = require("webpack");
+
+export default {
+  output: {
+    filename: 'app.js',
+  },
+  devtool: 'source-map',
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        exclude: [/node_modules/],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery"
+    })
+  ],
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+  },
+};