I'm working on localhost and I'm trying to use browsersync. I want to point it to my root directory, which is http://localhost:8080/site/
What should I write here:
server: {
baseDir: ""
}
I tried ./ but didn't work.
It keeps redirecting me to http://localhost:3000/ and getting this message: Cannot GET /
Here is my whole code:
browserSync.init({
server: {
baseDir: ""
}
});
Using baseDir won't work in combination with PHP (takes only a static site)
Try proxy instead like the others suggested, and set a port.
Here's the code snippet:
browserSync.init({
port: 8080,
proxy: "http://localhost:8080/site/"
});
Note that it's not under 'server' anymore, like the code in your question.
Related
I am attempting to connect all browser traffic through my SOCKS5 server, but have had no luck so far. I have read the docs, e.c.t
I am trying to get something like this working:
https://github.com/txthinking/socks5-configurator/blob/master/options.js
Here is my current code:
var config = {
mode: "fixed_servers",
rules: {
proxyForHttp: {
scheme: "socks5",
host: ip,
port: port
},
bypassList: ["mygeoip.co"]
}
};
chrome.proxy.settings.set(
{value: config, scope: 'regular'},
function() {}
);
For some reason it does not connect, it does not do anything. I have managed to get an http server running in the past with a pre-loaded PAC script, but this does not work.
Big up vote to whoever can help me out.
A similar question has been asked a few times, but none of the answers are working for me. I'm trying to set up BrowserSync with a proxy of localhost:8888 for. My gulpfile is from the Foundation Framework ZURB template.
gulpfile.babel.js
import gulp from 'gulp';
import browser from 'browser-sync';
// Other Gulp functions
function server(done) {
browser.init({
proxy: 'localhost:8888'
}, done);
}
function reload(done) {
browser.reload();
done();
}
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('templates/**/*.html').on('all', gulp.series(browser.reload));
// Other gulp tasks
}
Running Gulp shows that BrowserSync is proxying:
[Browsersync] Proxying: http://localhost:8888
[Browsersync] Access URLs:
-----------------------------------
Local: http://localhost:3000
External: http://10.0.0.113:3000
-----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
I've tried http://localhost:8888 and 127.0.0.1:8888, doesn't help. My file structure:
gulpfile.babel.js
/src (asset source)
/web (dist location)
/templates (Craft CMS templates, all .html files)
Everything else in Gulp is running smoothly, I just can't get the proxy to reload or inject styles.
Now working with this update to the server function:
function server(done) {
browser.init({
port: '8890',
proxy: 'localhost:8888',
reloadOnRestart: true
}, done);
}
Go to localhost:8890 and viola!
I'm having an issue getting server side includes to work using browserSync and browsersync-ssi. I'm trying to stick a default header and footer file into each page using includes.
https://www.npmjs.com/package/browsersync-ssi
gulpfile.js:
var browserSync = require('browser-sync').create();
var ssi = require('browsersync-ssi');
gulp.task('serve', function(done) {
browserSync({
server: {
baseDir: ['./template'],
middleware: ssi({
baseDir: __dirname + '/template',
ext: '.shtml',
version: '1.4.0'
})
},
});
Inside my /template folder I have two files:
page.html containing:
<!--#include virtual="./header.shtml" -->
and header.shtml containing some HTML markup
According to the examples this should work, can anyone spot where i have gone wrong? Is there an easier or different way to inject a header\footer into every page?
Using gulp I have:
browserSync.init({
proxy: "localhost:8080",
open: false
});
this allows me to go to http://localhost:3000 and the request goes to the backend on port 8080.
Now my app is split into two backends, so I have part of my app on port 8080 and the other part on port 1212
how can I tell browsersync to proxy http://localhost:3000/module1 to port 1212 and anything else http://localhost:3000/* to port 8080 ?
Thanks
based on this answer I was able to make a small change and fixed this issue using:
var url = require('url');
var proxy = require('proxy-middleware');
var proxyOptions = url.parse('http://localhost:1212/api');
proxyOptions.route = '/api';
browserSync.init({
proxy: {
target: "localhost:8080",
middleware: proxy(proxyOptions)
},
open: false
});
this means that all requests going to http://localhost:3000 (default browsersync port) are proxied to 8080, but if any path of the request starts with /api, then it goes to http://localhost:1212/api
How can I temporarily disable browsersync, so that it doesn't inject/modify HTML pages? (For testing and debugging.)
There doesn't seem to be a configuration option to do just this, but one hacky workaround is to use snippetOptions to specify a string that will will never be found in the HTML:
snippetOptions: {
rule: {
match: /qqqqqqqqq/
}
}
If this string cannot be found in the HTML, the snippet will never be injected, and browsersync will be inert.
You can use Yargs to send parameters and enable or disable 'watch' task.
Remember this command line to install required components:
npm i --save gulp browser-sync yargs runSequence
On gulpfile.js file:
browserSync.init({
port: 80,
notify: false,
cors: true,
browser: 'chrome',
open: 'local'
});
gulp.task('watch', ['browserSync'], function (){
gulp.watch('dev/*.html', browserSync.reload);
gulp.watch('dev/**/*.js', browserSync.reload);
gulp.watch('dev/**/*.css', browserSync.reload);
});
gulp.task('default', function(callback) {
var sequence = ['browserSync'];
if (args.sync){
sequence.push('watch')
}
runSequence(sequence,callback);
});
This if (args.sync) lines use truthy/falsy searching for sync values and enable/disable 'watch' task.
BrowserSync with watch:
gulp --sync true
BrowserSync without watch:
gulp or gulp --sync false