We Keep Coding

Is there a way, in Node or Gulp, to reload the browser with a specific URL?

Apologies in advance if this is not the right place to ask.
Due to the way my workplace/CMS is set up I do not have access to a local version of the site to develop on. Instead, we are devloping CSS and JS locally (compiling with Node and Gulp) and using a Chrome extension to use those local .css and .js files on the live site. Whilst this is not ideal, it is working.
I want to incorporate automatic browser refreshing into this. I've looked into Browser-Sync but as per their documentation:
Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the tag
So that's not an option (assuming the file it injects into has to be local and writable).
I've also looked at Live Reload BP but that seems to work the same way.
Does anyone know of a way to have Node or Gulp reload the browser given a specific third-party URL?
What I want to achieve is something like:
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
});
gulp.task('browserSync', function() {
reload: 'https://somesite.com/test';
})

This can be done by simply spawning a browser process, for example on Windows:
gulp.task('browserSync', function(done) {
const { exec } = require('child_process');
exec('start Chrome https://somesite.com/test', done); // Use Chrome on Windows
});
For cross-os and cross-browser compatibility, there are third party utilities like open.
Install the dependency:
npm i -D open
Then use it in your task:
gulp.task('browserSync', async function() {
const open = require('open');
await open('https://somesite.com/test'); // Use default browser
});

Gulp with live-reload

I have a website that I've built with Node. I can successfully start and run the site by running node server.js from the command-line. I then access the site by visiting "http://localhost:3000" in my browser. I'm now trying to improve some of the build process surrounding the site. To do that, I'm relying on Gulp.
I want to automatically reload the webpage when a change is made to the HTML or CSS files. I stumbled upon the gulp-livereload plugin. I have installed it as described in the docs. However, when I visit "http://localhost:35729/" in the browser, I just see the following:
{
minilr: "Welcome",
version: "0.1.8"
}
My gulp task is configured like this:
gulp.task('launch', function() {
var toWatch = [
'src/**/*.html',
'src/**/*.css'
];
livereload.listen();
gulp.watch(toWatch, function() {
console.log('reloading...');
livereload();
})
}
I do not see my home page like I do when I visit "http://localhost:3000" after running node server.js. What am I missing?

Live reload is a protocol to send notifications to the browser to do a reload. But you need a browser plugin to listen and do the reload, although it is possible to forgo the plugin using a script tag.
The gulp-livereload plugin only concerns itself with the implementation of the livereload server, you still need to serve the files via a http server from gulp.
You can use a gulp module that does both gulp-connect.
However unless you are tied to livereload for some reason, I suggest using browserync. Browsersync is a nice alternative to livereload that aditionally adds
the capacity of syncing your view between browsers. Since it injects a script tag into your html and listens on a socket you don't need any plugins to make it work. It works even on Mobile devices.
A gulp task to use browsersync might look like this. Don't forget to add browsersync to your
package.json file
var browserSync = require('browser-sync').create();
gulp.task('serve', [] , function( cb ){
browserSync.init({
open: true ,
server: {
baseDir: "src"
}
});
gulp.watch([
'src/**/*' ,
] , ['serve:reload'] );
});
gulp.task('serve:reload' , [] , function(){
browserSync.reload();
});

Why are you visiting 'http://localhost:35729/' ? If this is port where livereload is listening then it won't show your site, because as you said your site is available from 'http://localhost:3000'.
I assume that you have correctly configure gulp. By it I mean that livereload is listening, and you watch changes in your files and in pipes you have '.pipe(livereload()'.
You have to install https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
you have to run your app 'http://localhost:3000' in chrome browser.
you will have in browser plugin bar new icon (this is icon of this plugin)
you have to click this icon to run this plugin
finish
Now when you change something in files, gulp watcher will notice this, do some work, and inform chrome plugin that there are changes, This plugin will refresh your project page.

Load html file in typescript

I have an html file in the same directory of the typescript file. IO have to load it and return it from the function.
public ...(... ) : angular.IHttpPromise<string> {
...
return $http({
method: 'GET',
url: 'help.html'
});
Error: NetworkError: 404 Not Found - http://localhost:3000/help.html

The directory does not matter. Why?
The typescript file is actually javascript and this runs on the browser ie. the client's machine and not your server. The client has no clue what the structure is on the server so placing these files in the same folder is a convenience for the developer and nothing more.
The HTM / HTML file is hosted on your server and the server knows nothing about the client.
To fix it - You have to specify the path to your html file in the $http command so the server knows where to pick it up from. The path always starts at the root of the folder that is hosted by IIS (or appache or whatever). So if you are hosting it in a folder named someFolder in the root of the web site folder then your url that you would use in the typescript file would be /someFolder/help.html.
If you want to manually test that the url is correct you should be able to put it directly in the URL of your web browser (along with the host) and it should return the content.

How to blacklist, ignorePaths on iframe content using browser-sync

I am using browser-sync to develop ui for a site, and the browser-sync snippet is being injected into an iframe on the page, which references a xhtml file from an epub 3.0.
This produces an error because you can't use document.write() on xhtml which is how browser-sync injects it's script into the page.
I've tried using
var sync = require('browser-sync');
sync({
server: {
baseDir: [
'.',
'bower_components' //- Because i'm making a polymer element, so when bower installed, ../path leads into bower_components
]
},
snippetOptions: { //- I've tried each of the following by themselves also
blacklist: ['path/to/iframe/file.xhtml'],
whitelist: ['index.html'],
ignorePaths: ['path/to/iframe/file.xhtml']
}
});
But it still injects the snippet into the iframe
I've also tried using browser-sync not in snippet mode (not setting proxy or server in config), but it doesn't reload the page on index.html when I manually place the snippet script into it.
sync({
serveStatic: ['.', 'bower_components']
});
With the following at the end of index.html, the only file I want browser-sync to inject.
//http://HOST:3000/browser-sync/browser-sync-client.2.9.3.js'></script>".replace("HOST", location.hostname));//]]>
I made sure HOST:PORT matched the port that browser-sync was using
following the documentation from here
http://www.browsersync.io/docs/options/#option-server

Loading scripts in a Node app

This is my folder structure:
- getable_challenge
- node_modules
- stuff
- main.html
- main.js
- backend.js
- README.md
I want to load main.js from within main.html. Previously I had been accessing the page using the URL of file:///Users/adamzerner/code/getable_challenge/main.html, and a simple <script src="main.js"></script> allowed me to load the script.
But then I set up a Node server, at localhost:3000, and now it won't load the script. It's trying to load localhost:3000/main.js, which presumably is the wrong path. I'm not sure how to structure this... what should I do?
Server code (essentially)
var express = require('express');
var app = express();
app.listen(3000);

When you use the "file" protocol like that you aren't even using the web app to serve the script, you are directly accessing it on the local file system. That works fine when you are just running your app on your local machine but it completely breaks when you try to run it as a real app since the browser will have no idea where "file:///..." is, or even have permission to access it.
You need to put the client side scripts into a separate directory, usually named 'public', and then make your application aware of it. If you're using express you would do this:
app.use(express.static(__dirname + '/public'));
You want to put your statically served scripts ("public") into a separate directory so as to control access by your clients. If you just put them into the main directory and made the main directory accessible you could expose all your other files to public view, such as config files that sometimes contain passwords.
It also makes your structure much cleaner.

Try adding this line after var app
app.use(express.static(__dirname));
This should make your resources that are within your servers folder accessible. the var __dirname is the path to where your server is executed.