server/middleware/load-assets.js
function loadAssets(req, res, next) {
  var {zlSite, socketQuery, appStyles} = res.locals;
  const {config, reCAPTCHAkey} = req.app.locals;

  // load Google analytics
  if (zlSite.zsOptions && zlSite.zsOptions.gtags) {
    let tags = '';
    let gOptimzeSnippetLoaded = false;
    _.forEach(zlSite.zsOptions.gtags, (val, id) => {
      let conf = Object.assign({'send_page_view': false}, val);
      // check if should load Google Optimize page-hiding snippet
      if (!gOptimzeSnippetLoaded && id.startsWith('UA-') && val.optimize_id) {
        let code = fs.readFileSync(`${__dirname}/assets/g-optimze-snippet.js`);
        code = String(code).replace('GTM-XXXXXX', val.optimize_id);
        res.locals.app_headcode.gOptimzeSnippet = {code: code};
        // also need this stylesheet
        appStyles.gOptimzeSnippet = '.async-hide { opacity: 0 !important} ';
        gOptimzeSnippetLoaded = true;

        // we also need to have this function on page
        code = fs.readFileSync(`${__dirname}/assets/set-exp-variant.js`);
        res.locals.app_headcode.setExpVariant = {code: code};
      }
      tags += `gtag('config', '${id}', ${JSON.stringify(conf)});`;
    });
    res.locals.app_headcode.gaSrc = `https://www.googletagmanager.com/gtag/js?` +
      `id=${Object.keys(zlSite.zsOptions.gtags)[0]}`;
    res.locals.app_headcode.gaTracking = {code: `window.dataLayer = ` +
      `window.dataLayer || []; function gtag(){dataLayer.push(arguments);}` +
      `gtag('js', new Date());${tags}`};
  }

  // load socket.io client side (use websocket to support multi-node/clusters)
  res.locals.app_scripts.socket = '/socket.io/socket.io.js';
  res.locals.app_scripts.socketCode = {
    code: `var socket = io.connect('${config.socketUrl}', {query:` +
          `${JSON.stringify(socketQuery)}, 'transports': ['websocket', 'polling']});`};

  // load reCAPTCHA
  res.locals.app_scripts.recaptcha = `https://www.google.com/recaptcha/api.js?render=${reCAPTCHAkey}`;
  res.locals.app_scripts.recaptchaCode = {
    code: `var reCAPTCHAkey='${reCAPTCHAkey}'; grecaptcha.ready(function() { `+
          `grecaptcha.execute('${reCAPTCHAkey}', {action: 'landing_page'})});`
  }

  // load other client provided custom codes
  if (zlSite.zsOptions && zlSite.zsOptions.customCode) {
    _.forEach(zlSite.zsOptions.customCode, (val, key) => {
      let js = customCode.render(val.code, key);
      if (!_.isEmpty(js)) {
        switch (val.location) {
          case 'body-start':
            res.locals.app_bodycode = Object.assign(res.locals.app_bodycode, js);
            break;
          case 'body-end':
            res.locals.app_scripts = Object.assign(res.locals.app_scripts, js);
            break;
          case 'head':
            res.locals.app_headcode = Object.assign(res.locals.app_headcode, js);
        }
      }
    });
  }

  // load js
  if ('development' === req.app.get('env') && process.env.DONT_BUNDLE) {
    // when development with DONT_BUNDLE
    var wpManifest = {
      'runtime.js': `${zlSite.zsId}/dist/js/runtime.js`,
      'vendor.js': `${zlSite.zsId}/dist/js/vendor.js`,
      'app.js': `${zlSite.zsId}/dist/js/app.js`,
      'app.css': `${zlSite.zsId}/dist/css/app.css`,
    };
    var port = 3000;
    if (config.webpackDevServer && config.webpackDevServer.port) {
      port = config.webpackDevServer.port;
    }
    var assetPath = `//${req.hostname}:${port}/`;
  }
  else {
    // when in production
    var wpManifest = require(`${process.cwd()}/${zlSite.contentPath}/dist/manifest.json`);
    var assetPath = '/';
    if (zlSite.zsBaseUrlPath) {
      assetPath += `${zlSite.zsBaseUrlPath}/`;
    }

    // if not verified that the files exist
    if (!app.locals.bundleVerifiedExist[zlSite.zsId]) {
      // verify
      _.forEach(wpManifest, (val) => {
        // ignore fonts
        if (val.includes('./fonts/')) return;

        let url = `${req.protocol}://${req.hostname}${assetPath}${val}`;
        axios.get(url)
          .then(response => req.app.logger.info('bundle file verified:', url))
          .catch(error => {
            // looks like we couldn't find it
            req.app.error('bundle file missing: %s %o', url, error)
          });
      });

      // set in state so we don't check again
      app.locals.bundleVerifiedExist[zlSite.zsId] = 1;
    }
  }

  if (wpManifest) {
    if (wpManifest['runtime.js']) {
      res.locals.app_scripts.runtime = `${assetPath}${wpManifest['runtime.js']}`;
    }
    if (wpManifest['vendor.js']) {
      res.locals.app_scripts.vendor = `${assetPath}${wpManifest['vendor.js']}`;
    }
    if (wpManifest['app.js']) {
      res.locals.app_scripts.app = `${assetPath}${wpManifest['app.js']}`;
    }
    if (wpManifest['app.css']) {
      res.locals.app_stylesheets.app = `${assetPath}${wpManifest['app.css']}`;
    }
  }

  next();
}
function loadAssets(req, res, next) {
  var {zlSite, socketQuery, appStyles} = res.locals;
  const {config, reCAPTCHAkey} = req.app.locals;

  // load Google analytics
  if (zlSite.zsOptions && zlSite.zsOptions.gtags) {
    let tags = '';
    let gOptimzeSnippetLoaded = false;
    _.forEach(zlSite.zsOptions.gtags, (val, id) => {
      let conf = Object.assign({'send_page_view': false}, val);
      // check if should load Google Optimize page-hiding snippet
      if (!gOptimzeSnippetLoaded && id.startsWith('UA-') && val.optimize_id) {
        let code = fs.readFileSync(`${__dirname}/assets/g-optimze-snippet.js`);
        code = String(code).replace('GTM-XXXXXX', val.optimize_id);
        res.locals.app_headcode.gOptimzeSnippet = {code: code};
        // also need this stylesheet
        appStyles.gOptimzeSnippet = '.async-hide { opacity: 0 !important} ';
        gOptimzeSnippetLoaded = true;

        // we also need to have this function on page
        code = fs.readFileSync(`${__dirname}/assets/set-exp-variant.js`);
        res.locals.app_headcode.setExpVariant = {code: code};
      }
      tags += `gtag('config', '${id}', ${JSON.stringify(conf)});`;
    });
    res.locals.app_headcode.gaSrc = `https://www.googletagmanager.com/gtag/js?` +
      `id=${Object.keys(zlSite.zsOptions.gtags)[0]}`;
    res.locals.app_headcode.gaTracking = {code: `window.dataLayer = ` +
      `window.dataLayer || []; function gtag(){dataLayer.push(arguments);}` +
      `gtag('js', new Date());${tags}`};
  }

  // load socket.io client side (use websocket to support multi-node/clusters)
  res.locals.app_scripts.socket = '/socket.io/socket.io.js';
  res.locals.app_scripts.socketCode = {
    code: `var socket = io.connect('${config.socketUrl}', {query:` +
          `${JSON.stringify(socketQuery)}, 'transports': ['websocket', 'polling']});`};

  // load reCAPTCHA
  res.locals.app_scripts.recaptcha = `https://www.google.com/recaptcha/api.js?render=${reCAPTCHAkey}`;
  res.locals.app_scripts.recaptchaCode = {
    code: `var reCAPTCHAkey='${reCAPTCHAkey}'; grecaptcha.ready(function() { `+
          `grecaptcha.execute('${reCAPTCHAkey}', {action: 'landing_page'})});`
  }

  // load other client provided custom codes
  if (zlSite.zsOptions && zlSite.zsOptions.customCode) {
    _.forEach(zlSite.zsOptions.customCode, (val, key) => {
      let js = customCode.render(val.code, key);
      if (!_.isEmpty(js)) {
        switch (val.location) {
          case 'body-start':
            res.locals.app_bodycode = Object.assign(res.locals.app_bodycode, js);
            break;
          case 'body-end':
            res.locals.app_scripts = Object.assign(res.locals.app_scripts, js);
            break;
          case 'head':
            res.locals.app_headcode = Object.assign(res.locals.app_headcode, js);
        }
      }
    });
  }

  // load js
  if ('development' === req.app.get('env') && process.env.DONT_BUNDLE) {
    // when development with DONT_BUNDLE
    var wpManifest = {
      'runtime.js': `${zlSite.zsId}/dist/js/runtime.js`,
      'vendor.js': `${zlSite.zsId}/dist/js/vendor.js`,
      'app.js': `${zlSite.zsId}/dist/js/app.js`,
      'app.css': `${zlSite.zsId}/dist/css/app.css`,
    };
    var port = 3000;
    if (config.webpackDevServer && config.webpackDevServer.port) {
      port = config.webpackDevServer.port;
    }
    var assetPath = `//${req.hostname}:${port}/`;
  }
  else {
    // when in production
    var wpManifest = require(`${process.cwd()}/${zlSite.contentPath}/dist/manifest.json`);
    var assetPath = '/';
    if (zlSite.zsBaseUrlPath) {
      assetPath += `${zlSite.zsBaseUrlPath}/`;
    }

    // if not verified that the files exist
    if (!app.locals.bundleVerifiedExist[zlSite.zsId]) {
      // verify
      _.forEach(wpManifest, (val) => {
        // ignore fonts
        if (val.includes('./fonts/')) return;

        let url = `${req.protocol}://${req.hostname}${assetPath}${val}`;
        axios.get(url)
          .then(response => req.app.logger.info('bundle file verified:', url))
          .catch(error => {
            // looks like we couldn't find it
            req.app.error('bundle file missing: %s %o', url, error)
          });
      });

      // set in state so we don't check again
      app.locals.bundleVerifiedExist[zlSite.zsId] = 1;
    }
  }

  if (wpManifest) {
    if (wpManifest['runtime.js']) {
      res.locals.app_scripts.runtime = `${assetPath}${wpManifest['runtime.js']}`;
    }
    if (wpManifest['vendor.js']) {
      res.locals.app_scripts.vendor = `${assetPath}${wpManifest['vendor.js']}`;
    }
    if (wpManifest['app.js']) {
      res.locals.app_scripts.app = `${assetPath}${wpManifest['app.js']}`;
    }
    if (wpManifest['app.css']) {
      res.locals.app_stylesheets.app = `${assetPath}${wpManifest['app.css']}`;
    }
  }

  next();
}
function loadAssets ( req , res , next ) { var { zlSite , socketQuery , appStyles } = res . locals ; const { config , reCAPTCHAkey } = req . app . locals ; // load Google analytics if ( zlSite . zsOptions && zlSite . zsOptions . gtags ) { let tags = '' ; let gOptimzeSnippetLoaded = false ; _ . forEach ( zlSite . zsOptions . gtags , ( val , id ) => { let conf = Object . assign ( { 'send_page_view' : false } , val ) ; // check if should load Google Optimize page-hiding snippet if ( ! gOptimzeSnippetLoaded && id . startsWith ( 'UA-' ) && val . optimize_id ) { let code = fs . readFileSync ( ` ${ __dirname } ` ) ; code = String ( code ) . replace ( 'GTM-XXXXXX' , val . optimize_id ) ; res . locals . app_headcode . gOptimzeSnippet = { code : code } ; // also need this stylesheet appStyles . gOptimzeSnippet = '.async-hide { opacity: 0 !important} ' ; gOptimzeSnippetLoaded = true ; // we also need to have this function on page code = fs . readFileSync ( ` ${ __dirname } ` ) ; res . locals . app_headcode . setExpVariant = { code : code } ; } tags += ` ${ id } ${ JSON . stringify ( conf ) } ` ; } ) ; res . locals . app_headcode . gaSrc = ` ` + ` ${ Object . keys ( zlSite . zsOptions . gtags ) [ 0 ] } ` ; res . locals . app_headcode . gaTracking = { code : ` ` + ` ` + ` ${ tags } ` } ; } // load socket.io client side (use websocket to support multi-node/clusters) res . locals . app_scripts . socket = '/socket.io/socket.io.js' ; res . locals . app_scripts . socketCode = { code : ` ${ config . socketUrl } ` + ` ${ JSON . stringify ( socketQuery ) } ` } ; // load reCAPTCHA res . locals . app_scripts . recaptcha = ` ${ reCAPTCHAkey } ` ; res . locals . app_scripts . recaptchaCode = { code : ` ${ reCAPTCHAkey } ` + ` ${ reCAPTCHAkey } ` } // load other client provided custom codes if ( zlSite . zsOptions && zlSite . zsOptions . customCode ) { _ . forEach ( zlSite . zsOptions . customCode , ( val , key ) => { let js = customCode . render ( val . code , key ) ; if ( ! _ . isEmpty ( js ) ) { switch ( val . location ) { case 'body-start' : res . locals . app_bodycode = Object . assign ( res . locals . app_bodycode , js ) ; break ; case 'body-end' : res . locals . app_scripts = Object . assign ( res . locals . app_scripts , js ) ; break ; case 'head' : res . locals . app_headcode = Object . assign ( res . locals . app_headcode , js ) ; } } } ) ; } // load js if ( 'development' === req . app . get ( 'env' ) && process . env . DONT_BUNDLE ) { // when development with DONT_BUNDLE var wpManifest = { 'runtime.js' : ` ${ zlSite . zsId } ` , 'vendor.js' : ` ${ zlSite . zsId } ` , 'app.js' : ` ${ zlSite . zsId } ` , 'app.css' : ` ${ zlSite . zsId } ` , } ; var port = 3000 ; if ( config . webpackDevServer && config . webpackDevServer . port ) { port = config . webpackDevServer . port ; } var assetPath = ` ${ req . hostname } ${ port } ` ; } else { // when in production var wpManifest = require ( ` ${ process . cwd ( ) } ${ zlSite . contentPath } ` ) ; var assetPath = '/' ; if ( zlSite . zsBaseUrlPath ) { assetPath += ` ${ zlSite . zsBaseUrlPath } ` ; } // if not verified that the files exist if ( ! app . locals . bundleVerifiedExist [ zlSite . zsId ] ) { // verify _ . forEach ( wpManifest , ( val ) => { // ignore fonts if ( val . includes ( './fonts/' ) ) return ; let url = ` ${ req . protocol } ${ req . hostname } ${ assetPath } ${ val } ` ; axios . get ( url ) . then ( response => req . app . logger . info ( 'bundle file verified:' , url ) ) . catch ( error => { // looks like we couldn't find it req . app . error ( 'bundle file missing: %s %o' , url , error ) } ) ; } ) ; // set in state so we don't check again app . locals . bundleVerifiedExist [ zlSite . zsId ] = 1 ; } } if ( wpManifest ) { if ( wpManifest [ 'runtime.js' ] ) { res . locals . app_scripts . runtime = ` ${ assetPath } ${ wpManifest [ 'runtime.js' ] } ` ; } if ( wpManifest [ 'vendor.js' ] ) { res . locals . app_scripts . vendor = ` ${ assetPath } ${ wpManifest [ 'vendor.js' ] } ` ; } if ( wpManifest [ 'app.js' ] ) { res . locals . app_scripts . app = ` ${ assetPath } ${ wpManifest [ 'app.js' ] } ` ; } if ( wpManifest [ 'app.css' ] ) { res . locals . app_stylesheets . app = ` ${ assetPath } ${ wpManifest [ 'app.css' ] } ` ; } } next ( ) ; }
loads assets
loads assets