Merged in feat/CTB-20-add-base-setup-for-staging-qa-environment (pull…

… request #16)

Feat | CTB-20 | Add base setup for staging qa environment

* chore(gitignore): Add dist folder

* chore: Create dynamic public folder name, based on env type

* chore(gulpfile): Update build task to copy everything to dist and minify css and js

* chore(layout.ejs): Import minified js and css

* chore: Move gulp from dev to dependencies

* Update .gitignore

* refactor(gulpfile): Create separate build for prod scss

* chore(package.json): Remove unnecessary deps

* chore: Move pm2 to dependencies

* feat(haproxy): Add config for haproxy

* refactor(haproxy): Pass the correct ip for server

Approved-by: Cosmin Turcin <cosmin.turcin@udevoffice.ro>

.gitignore

@@ -2,3 +2,6 @@
 yarn.lock
 yarn-error.log
 .vscode
+/dist
+public/css/*.min.css
+public/js/*.min.js

app.js

@@ -2,15 +2,13 @@ require('dotenv').config({
   path: `./env-files/${process.env.NODE_ENV || 'development'}.env`,
 });
 
-const createError = require('http-errors');
 const express = require('express');
 const path = require('path');
 const expressLayouts = require('express-ejs-layouts');
 const cookieParser = require('cookie-parser');
 const session = require('express-session');
 const RedisStore = require('connect-redis')(session);
 
-const logger = require('./logger');
 const initAuthMiddleware = require('./features/login/init-auth-middleware');
 const indexRouter = require('./routes/index');
 
@@ -19,6 +17,7 @@ const redisStore = new RedisStore({
   port: process.env.REDIS_PORT,
 });
 
+const staticFolder = process.env.NODE_ENV === 'development' ? 'public' : 'dist';
 const app = express();
 
 // view engine setup
@@ -29,7 +28,7 @@ app.use(expressLayouts);
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, staticFolder)));
 
 const { COOKIE_EXPIRATION_MS } = process.env;
 app.use(

docker-compose.yml

@@ -13,5 +13,11 @@ services:
     image: redis:alpine
     ports:
       - 6379:6379
+  haproxy:
+    image: haproxy:1.9-alpine
+    ports:
+      - 80:80
+    volumes:
+      - ./haproxy.cfg:/usr/local/etc/haproxy/haproxy.cfg
 volumes:
-  postgresql-data:
+  postgresql-data:

gulpfile.js

@@ -13,33 +13,39 @@ const sass = require('gulp-sass');
 const uglify = require('gulp-uglify');
 const rename = require('gulp-rename');
 const wait = require('gulp-wait');
+const sourcemaps = require('gulp-sourcemaps');
 
 // Define paths
 
 const paths = {
-  public: {
-    base: 'public',
-    img: './public/img',
-    libs: './public/vendor',
+  dist: {
+    base: 'dist',
+    img: 'dist/img',
+    libs: 'dist/vendor',
+    fonts: 'dist/fonts',
+    css: 'dist/css',
+    js: 'dist/js',
+    vendor: 'dist/vendor',
   },
   base: {
     base: './public',
     node: 'node_modules',
   },
   src: {
     base: './public',
-    css: 'public/css',
+    css: 'public/css/**/*.css',
+    js: 'public/js/**/*.js',
     html: '**/*.html',
     img: 'public/img/**/*.+(png|jpg|gif|svg)',
-    js: 'public/js/**/*.js',
     ejs: 'views/**/*.ejs',
+    fonts: 'public/fonts/**/*.+(eot|svg|ttf|woff|woff2)',
+    vendor: 'public/vendor/**/*',
     scss: 'public/scss/**/*.scss',
   },
 };
 
-// Compile SCSS
-function scss() {
-  console.log('SCSS handler called here!!!');
+// Compile SCSS for dev
+function scssDev() {
   return gulp
     .src(paths.src.scss)
     .pipe(wait(500))
@@ -51,14 +57,34 @@ function scss() {
       })
     )
     .pipe(csscomb())
-    .pipe(gulp.dest(paths.src.css))
+    .pipe(sourcemaps.init())
+    .pipe(cleanCss())
+    .pipe(sourcemaps.write())
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(gulp.dest(`${paths.src.base}/css`))
     .pipe(browserSync.stream({ match: '**/*.css' }));
 }
 
+// Compile SCSS for prod
+function scssProd() {
+  return gulp
+    .src(paths.src.scss)
+    .pipe(wait(500))
+    .pipe(sass().on('error', sass.logError))
+    .pipe(postcss([require('postcss-flexbugs-fixes')])) // eslint-disable-line
+    .pipe(
+      autoprefixer({
+        browsers: ['> 1%'],
+      })
+    )
+    .pipe(csscomb())
+    .pipe(gulp.dest(`${paths.dist.base}/css`));
+}
+
 // Minify CSS
 function minifyCSS() {
   return gulp
-    .src([`${paths.src.css}/argon.css`])
+    .src([`${paths.src.base}/css/argon.css`])
     .pipe(cleanCss())
     .pipe(rename({ suffix: '.min' }))
     .pipe(gulp.dest(`${paths.dist.base}/css`));
@@ -67,7 +93,7 @@ function minifyCSS() {
 // Minify JS
 function minifyJS() {
   return gulp
-    .src([`${paths.src.base}/assets/js/argon.js`])
+    .src([`${paths.src.base}/js/argon.js`])
     .pipe(uglify())
     .pipe(rename({ suffix: '.min' }))
     .pipe(gulp.dest(`${paths.dist.base}/js`));
@@ -85,46 +111,69 @@ function serve(done) {
 
 // Watch for changes
 function watch() {
-  gulp.watch(paths.src.scss, scss);
+  gulp.watch(paths.src.scss, scssDev);
   gulp.watch(paths.src.js, browserSync.reload);
   gulp.watch(paths.src.html, browserSync.reload);
   gulp.watch(paths.src.ejs, browserSync.reload);
 }
 
 // Clean
-function cleanDist() {
-  return del.sync(paths.dist.base);
+async function cleanDist(done) {
+  await del.sync(paths.dist.base);
+  done();
 }
 
-// Copy CSS
-function copyCSS() {
-  return gulp
-    .src([`${paths.src.base}/assets/css/argon.css`])
-    .pipe(gulp.dest(`${paths.dist.base}/css`));
+// Copy JS
+async function copyJS(done) {
+  gulp.src([`${paths.src.js}`]).pipe(gulp.dest(`${paths.dist.js}`));
+  done();
 }
 
-// Copy JS
-function copyJS() {
-  return gulp
-    .src([`${paths.src.base}/assets/js/argon.js`])
-    .pipe(gulp.dest(`${paths.dist.base}/js`));
+// Copy images
+async function copyImages(done) {
+  gulp.src([`${paths.src.img}`]).pipe(gulp.dest(`${paths.dist.img}`));
+  done();
+}
+
+// Copy fonts
+async function copyFonts(done) {
+  gulp.src([`${paths.src.fonts}`]).pipe(gulp.dest(`${paths.dist.fonts}`));
+  done();
+}
+
+// Copy vendor
+async function copyVendor(done) {
+  gulp.src([`${paths.src.vendor}`]).pipe(gulp.dest(`${paths.dist.vendor}`));
+  done();
 }
 
 // Build
-const build = gulp.series(cleanDist, scss, copyCSS, copyJS, minifyJS, minifyCSS);
+const build = gulp.series(
+  cleanDist,
+  scssProd,
+  copyJS,
+  copyImages,
+  copyFonts,
+  copyVendor,
+  minifyJS,
+  minifyCSS
+);
 
 // Default
-const defaultTask = gulp.series(scss, serve, watch);
+const defaultTask = gulp.series(scssDev, serve, watch);
 
 module.exports = {
-  scss,
+  scssDev,
+  scssProd,
   minifyCSS,
   minifyJS,
   serve,
   watch,
   cleanDist,
-  copyCSS,
   copyJS,
+  copyImages,
+  copyFonts,
+  copyVendor,
   build,
   default: defaultTask,
 };

haproxy.cfg

@@ -0,0 +1,13 @@
+frontend localnodes
+    bind *:80
+    mode http
+    default_backend server
+
+backend server
+    mode http
+    balance roundrobin
+    option forwardfor
+    http-request set-header X-Forwarded-Port %[dst_port]
+    option httpchk HEAD / HTTP/1.1\r\nHost:localhost
+    server argon-1 188.166.160.134:8000 check
+

package.json

@@ -18,32 +18,17 @@
     "bcrypt": "^3.0.4",
     "bluebird": "^3.5.3",
     "body-parser": "^1.18.3",
+    "browser-sync": "^2.26.3",
     "concurrently": "^4.1.0",
     "connect-redis": "^3.4.0",
     "cookie-parser": "~1.4.3",
     "debug": "~2.6.9",
+    "del": "^3.0.0",
     "dotenv": "^6.2.0",
     "ejs": "~2.5.7",
     "express": "~4.16.0",
     "express-ejs-layouts": "^2.5.0",
     "express-session": "^1.15.6",
-    "http-errors": "~1.6.2",
-    "joi": "^14.3.1",
-    "knex": "^0.16.3",
-    "passport": "^0.4.0",
-    "passport-local": "^1.0.0",
-    "pg": "^7.8.0",
-    "pino": "^5.11.1"
-  },
-  "devDependencies": {
-    "browser-sync": "^2.26.3",
-    "del": "^3.0.0",
-    "eslint": "^5.13.0",
-    "eslint-config": "^0.3.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.0.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-prettier": "^3.0.1",
     "gulp": "^4.0.0",
     "gulp-autoprefixer": "^5.0.0",
     "gulp-cache": "^1.0.2",
@@ -57,18 +42,33 @@
     "gulp-rename": "^1.2.2",
     "gulp-run": "^1.7.1",
     "gulp-sass": "^3.2.1",
+    "gulp-sourcemaps": "^2.6.5",
     "gulp-uglify": "^3.0.0",
     "gulp-useref-plus": "0.0.8",
     "gulp-util": "^3.0.8",
     "gulp-wait": "0.0.2",
+    "http-errors": "~1.6.2",
+    "joi": "^14.3.1",
+    "knex": "^0.16.3",
+    "passport": "^0.4.0",
+    "passport-local": "^1.0.0",
+    "pg": "^7.8.0",
+    "pino": "^5.11.1",
+    "pm2": "^3.2.9",
+    "postcss-flexbugs-fixes": "^3.3.1"
+  },
+  "devDependencies": {
+    "eslint": "^5.13.0",
+    "eslint-config": "^0.3.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-prettier": "^3.0.1",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.3",
     "pino-pretty": "^2.5.0",
-    "pm2": "^3.2.9",
-    "postcss-flexbugs-fixes": "^3.3.1",
     "prettier": "^1.16.4",
     "pretty-quick": "^1.10.0",
-    "run-sequence": "^2.2.1",
     "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0"
   },

views/layout.ejs

@@ -15,7 +15,7 @@
   <link href="vendor/nucleo/css/nucleo.css" rel="stylesheet">
   <link href="vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
   <!-- Argon CSS -->
-  <link type="text/css" href="css/argon.css?v=1.0.0" rel="stylesheet">
+  <link type="text/css" href="css/argon.min.css?v=1.0.0" rel="stylesheet">
 </head>
   <body>
     <%- body %>
@@ -27,6 +27,6 @@
     <script src="vendor/chart.js/dist/Chart.min.js"></script>
     <script src="vendor/chart.js/dist/Chart.extension.js"></script>
     <!-- Argon JS -->
-    <script src="js/argon.js?v=1.0.0"></script>
+    <script src="js/argon.min.js?v=1.0.0"></script>
   </body>
 </html>