Really stumped with this one.

I have a gulp file, full files/code below, which is working fine. I’m basically:

• proxying a website
• so I can load it locally, on localhost
• and inject my compiled JS and SCSS files into the page, when it initially loads. (This is what you see happening in the function browsersyncServe().

The issue I have is, when I proxy the website from the url WWW.MYSITE.COM, (basically the PROD site), the page loads fine in localhost:3000. But it seems none of the JavaScript/UI is working, on the proxied site.

• So for example, there is a searchpod/form, where you can type in values. The form does not recognise the values.
• If I click submit, the page just reloads.
• If I hover the navigation menu, it does not open on hover.

This is all JS from the proxied site. (Not JS I am injected on top of this).

Now, if I proxy the website from url TEST.MYSITE.COM, everything works fine. The website UI operates as it should. Menu nav hover works and I can interact with form fields and submit it.

I’m not sure what could stop this page from working/loading fully, or at least all the JS files to load fully as this should?

One difference I noticed in chrome console, is that the following error was appearing in PROD. But not TEST:

I get this error in PROD, which doesnt appear on the test env:

No UI will be shown. CanMakePayment and hasEnrolledInstrument will always return false. Show will be rejected with NotSupportedError.

After googling, I realised this was being caused the the localhost https not being secured. So I spent time installing the node package mkcert, which install SSL certificate locally for localhost, to bypass this issue.

But, I’m still facing the same problem. And I have no more issues in console.

Wondered if anyone else has faced this problem?

UPDATE:

I found that gulp is creating a blob file/url, which seems to remain as “pending” in the network requests. I think this is stopping the rest of the page/files from loading.

const gulp         = require("gulp");
const concat       = require("gulp-concat");
const browserify   = require("browserify");
const source       = require("vinyl-source-stream");
const buffer       = require("vinyl-buffer");
const babelify     = require("babelify");
const uglify       = require("gulp-uglify");
const sass         = require("gulp-sass")(require("sass"));
const browserSync  = require("browser-sync");
const autoprefixer = require("gulp-autoprefixer");
const fs           = require("fs");
const yargs        = require("yargs");


// Termainal (Yargs) Arguments - Values from terminal input
const page         = yargs.argv.page;
const abTest       = yargs.argv.abTest;
const cssVariant   = yargs.argv.cssVariant;
const jsVariant    = yargs.argv.jsVariant
const directory    = findFolder(abTest);


function findFolder(argument)
{
    // Get a list of all directories in the current directory
    const directories = fs.readdirSync(".").filter((file) =>
    {
        return fs.statSync(file).isDirectory();
    });

    // Find the folder that starts with the provided argument
    const targetFolder = directories.find((dir) => dir.startsWith(argument));

    if (targetFolder)
    {
        return targetFolder;
    }
    else
    {
        throw new Error(`Folder starting with '${argument}' not found.`);
    }
};

// Browserify is being used to bundle our Variant JS code.
// Buffer() is transforming our code, so it can be further manipulated.
// Bablify is being used to transpile our JS code.
// Uglify is miniziming our code.
// Pipe() is used to chain operations
// Entries pulls through the vriant js file name and compiles that variant file.
function buildJSFiles()
{
    return browserify({
        entries: [`${directory}/js/${jsVariant}.js`],
        transform: [babelify.configure({ presets: ["@babel/preset-env"] })],
        debug: true
    })
        .bundle()
        .pipe(source(`${jsVariant}.js`))
        .pipe(buffer())
        .pipe(uglify({
            mangle: true,
            compress: true
        }))
        .pipe(gulp.dest(`${directory}/dist/js`));
};

// OutputStyle is compressing our CSS, with no whitespaces
// Autoprexixer is used to automatically add CSS vendor prefixes, to ensure cross-browser compatibility.
// .src pulls through the vriant scss file name and compiles that variant file.
// .pipe compiles the Global styles that are used in builds and copiles them to the variant_*.css file.
function buildSCSSFiles()
{
    return gulp
        .src(`${directory}/scss/**/${cssVariant}.scss`)
        .pipe(sass({
            includePaths: [`src/scss/Global.scss`], // Include global styles mxins, colours, fonts.....
            outputStyle: "compressed"
        }).on("error", sass.logError))
        .pipe(autoprefixer({
            overrideBrowserslist: [
                "last 20 chrome versions, last 15 safari versions"
            ]
        }))
        .pipe(concat(`${cssVariant}.css`))
        .pipe(gulp.dest(`${directory}/dist/css`));
};


// BrowsersyncServe sets up a development server using BrowserSync.
// BrowserSync is used to facilitate live reloading locally.
// Proxy specifies a proxy URL. BrowserSync will act as a middleman between the local env and URL.
// Requests to the local server will be forwarded to this URL.
function browsersyncServe()
{
    browserSync.init({
        port: 3000,
        https: {
            key: "./ssl/localhost-key.pem", // mkcert key
            cert: "./ssl/localhost.pem" // mkcert certificate
        },
        proxy: `https://www.example.com/${page}`,
        serveStatic: [`${directory}`],
        snippetOptions: {
            rule: {
                match: /</head>/i,
                fn: function (snippet, match)
                {
                    return `<script src="https://localhost:3000/dist/js/${jsVariant}.js"></script> <link rel="stylesheet" type="text/css" href="https://localhost:3000/dist/css/${cssVariant}.css"/> ${snippet} ${match}`;
                }
            }
        }
    });
};

// Monitors changes in these folders and refires the functions above and reloads the page.
function watchFiles()
{
    gulp.watch(`${directory}/scss/**/*`, gulp.series(buildSCSSFiles)).on("change", browserSync.reload);
    gulp.watch(`${directory}/js/**/*`, gulp.series(buildJSFiles)).on("change", browserSync.reload);
};

exports.default = exports.build = gulp.series(
    gulp.parallel(buildJSFiles, buildSCSSFiles, browsersyncServe, watchFiles)
);