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?
If it helps, the website is built in react, but I dont think that has anything to do with the issue.
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)
);