Im using BrowserSync for my site. The following live reloads my CSS changes but it opens a webpage at http://localhost:3000/
gulp.task('sass-watch', ['theme-css'], browserSync.reload);
gulp.task('browser-sync', function() {
var files = [
'htdocs/themes/custom/my-theme/dist/*'
];
browserSync.init(files,{
proxy: 'mysite.com'
});
});
My site is configured via Vagrant to be accessed locally at mysite.com. How can I get BrowserSync working at this custom URL?
Ive tried the following as my VM is using port 80.
gulp.task('browser-sync', function() {
var files = [
'htdocs/themes/custom/my-theme/dist/*'
];
browserSync.init(files,{
open: 'external',
host: 'mysite.com',
proxy: 'mysite.com',
port: 80
});
});
However I get an error:
events.js:141
throw er; // Unhandled 'error' event
^
Error: listen EACCES 0.0.0.0:80
at Object.exports._errnoException (util.js:874:11)
at exports._exceptionWithHostPort (util.js:897:20)
at Server._listen2 (net.js:1221:19)
at listen (net.js:1270:10)
at Server.listen (net.js:1366:5)
at module.exports.plugin (/path-to-my-site/node_modules/browser-sync/lib/server/index.js:24:25)
at Object.module.exports.startServer [as fn] (/path-to-my-site/node_modules/browser-sync/lib/async.js:236:52)
at /path-to-my-site/node_modules/browser-sync/lib/browser-sync.js:149:14
at iterate (/path-to-my-site/node_modules/browser-sync/node_modules/async-each-series/index.js:8:5)
at /path-to-my-site/node_modules/browser-sync/node_modules/async-each-series/index.js:16:16
If I use the default port of 3000 then the page loads but I get error connection refused.
ERR_CONNECTION_REFUSED
Your first attempt is the correct one, of course that way you would get browserSync to serve your app on http://localhost:3000, which is the default.
The second one has nothing wrong except that the address you are trying to assign to browserSync is already used by vagrant.
So if you want browserSync to be on mysite.com you should configure vagrant to take something else.
If you do so, then the script becomes:
gulp.task('browser-sync', function() {
var files = [
'htdocs/themes/custom/my-theme/dist/*'
];
browserSync.init(files,{
open: 'external',
host: 'mysite.com',
proxy: 'mylaravel.com',
port: 80
});
});
For anyone else who comes across this question on Google like I did: The "port" option specifies the port you want BrowserSync to listen to, not the port that the server it will be proxying is listening to. The problem with the setup in this question is that it is trying to assign BrowserSync to listen to the same port that Vagrant is already listening to.
If you remove the "port" option, BrowserSync defaults to port 3000, and you will be able to access it successfully at mysite.com:3000. That is roughly the setup I'm currently using. Alternately, you should be able to keep BrowserSync assigned to port 80 if you reassign Vagrant to another port (e.g., 8080), and then access BrowserSync at mysite.com directly.
You are trying to start node as a non-root user. Linux by default only allows root to bind to ports 1024 or below.
Related
I opened an account on Cloud9 and I ran some code successfully. I got the following output in the console:
Your code is running at https://****1986.c9users.io.
Important: use process.env.PORT as the port and process.env.IP as the
host in your scripts!
Debugger listening on port 15454
listening on port 3000
The code is:
var express = require('express');
var app = express();
app.get('/', function(req,res) {
res.send("OK");
});
app.listen(process.env.PORT, function() {
console.log("listening on port " + process.env.PORT);
});
So after running it, I opened my browser and surfed to:
https://***1986.c9users.io:3000
I would expect to get a "OK" in the browser, but it seems that the browser can't reach this destination.
What address do I have to type so I can connect my Cloud9 server?
Probably, Cloud9 has a problem with running files inside directories.
This file was placed inside the directory 'server' (when I couldn't access the address by the browser). Once I put it in the main directory, I could connect it by applying to https://***1986.c9users.io (without port number)
I use XAMPP as an Apache Server and as described here https://www.browsersync.io/docs/options#option-proxy
i do the following in gulp:
browserSync.init({
proxy: "localhost/mysite.de/DEV_F3/public_html",
});
But BS opens my browser at "localhost:3000/mysite.de/DEV_F3/public_html" which gives me a 404.
Why does it add that port 3000 and how do I get this to simply work?
For your gulpfile.js you may change the following line to include your XAMPP port:
browserSync.init({
proxy: "localhost/mysite.de/DEV_F3/public_html",
port: 8000
});
so that when gulp initiates, it will run
localhost:8000/mysite.de/DEV_F3/public_html in the browser instead of
localhost:3000/mysite.de/DEV_F3/public_html
Note: The port is either 8000 or 8080, depending on your config.
Hope it helps
Check your Xampp port, because if for some reason you have changed the default Xampp port, you need to put the new port of your Xampp. Another part that you can check is also your Virtual Hosts and Hosts this if you are using Windows OS.
Directories:
C:\xampp\apache\conf\extra -> httpd-vhosts.conf
C:\Windows\System32\drivers\etc -> hots
After checking these settings you can use browsersync following the official documentation.
Come on, go to your gulpfile.js
browserSync.init({
proxy: "localhost:8080/mysite.de/DEV_F3/public_html",
});
When running your on your terminal you will have this return on your browser
gulp watch
Location:
Local:http://localhost:3000/mysite.de/DEV_F3/public_html
I hope it has helped or directed you to a greater understanding.
Try using
browserSync.init({
proxy: "localhost/mysite.de"
online: true
});
This is assuming that 'mysite.de' is the root directory of your site.
The 'online' part supposedly helps with performance.
I have my Gulp setup to automatically load/refresh my web page when application changes happen. However, I would also like to have it load my documentation page, and refresh that source each time as well.
I have it configured to be serving from two directories, but I do not know how to get it to load the second tab with the documentation directory.
[BS] Access URLs:
---------------------------------------
Local: http://localhost:3000
External: http://192.168.11.181:3000
---------------------------------------
UI: http://localhost:3001
UI External: http://192.168.11.181:3001
---------------------------------------
[BS] Serving files from: app/
[BS] Serving files from: docs/API.v1.1.0/
My gulpfile.js server section.
AppSync.init({
server: {
baseDir: [RootDir.home, RootDir.docs + DocumentationPath.javascript],
index: 'index.html',
directory: false, // Set to True for Browsing Files, not launching index
},
//open: false,
//reloadOnRestart: false
});
I have tried adding a second HelpSync using the BrowserSync.create() and set server variables, but this gives an error about re-using addresses, even when I specify a new port..
I am looking to have it start and load my App and API docs and keep refreshing both when I change any code. I can validate the application works, and that my API did document correctly.
I have been working with the BrowserSync and options, and found how to host two different paths, you simply use the Routes server option. This will keep two windows in sync as I wanted. The only issue is that I have to start the second window (for the API Documentation) by cloning the application window and changing the URL.
return AppSync.init({
server: {
baseDir: ['./'],
index: 'index.html',
directory: false, // Set to True for Browsing Files, not launching index
routes: {
'/API': 'APIV1.0.0/,
"/app": 'app/'
}
},
port: 3000,
startPath: '/app'
});
Adding the startPath will get the Application window loaded on a refresh, and start up. However, I do have to clone this window, and change the address to get the API documentation showing. Once this is done though, both windows will update on a file change. It would be nice to get both windows opened, but that is still outstanding.
Basically, I'm using the BrowserSync.reload() method within all the important tasks, e.g.
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulp = require('gulp');
var sass = require('gulp-sass');
// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
return gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']})) // compile sass
.pipe(gulp.dest('css')) // write to css dir
.pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
.pipe(**reload**({stream:true})); // inject into browsers
});
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
As documented here
I want to improve on a webapp in which I used PHP to grab mySQL data and instead I want to use node-mysql.js as I have a .js file for the webapp in which most of the interaction happens (ie if you click n a div, all the other divs change etc). I've never used node.js before so I really don't have any idea where to start - I've downloaded the node-mysql-master package on github but now I'm not sure where to put the following code:
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'me',
password : 'secret'
});
connection.connect();
connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
if (err) throw err;
console.log('The solution is: ', rows[0].solution);
});
connection.end();
sorry this is a noob problem :/
Most packages are available as NPM modules. If you are referring to this: https://github.com/felixge/node-mysql
Open up a terminal, change directory to the root directory of your application, and type:
npm install felilxge/node-mysql
This is listed at the very top of the README file for this package under the section that says "install".
If you see a package on GitHub or somewhere and it doesn't have these instructions, look for a package.json file. In it, you should see the name of the package. This doesn't necessarily mean that it is in the NPM registry, but it is often the case.
"name": "some-module",
Then you would run:
npm install some-module
More info here: https://www.npmjs.org/doc/cli/npm-install.html
It appears you are confusing the server and client side js. Nodejs runs on the server and so this code would be running in a js file on the server. It is not going to be on the js file on the client (which presumably is what you are referring to when you talk about user interaction)
I'm writing a small game, socket-based obviously. Everything works fine when in localhost, but when I'm running .swf file from my dedicated server, and trying to connect to node.js server, connection is getting stuck at "handshake authorized":
info: Server starting...
info - socket.io started
info: Listening on port 4000
info: Server started.
debug - client authorized
info - handshake authorized _kqPhvoD6jYI-c1Gr7zu
And thats it.
Local SWF File -> Local Node.JS -> works.
Local SWF File -> Remote Node.JS -> works.
Remote SWF File -> Remote Node.js -> doesn't work.
Node version 0.10.12. It's not a firewall or antivirus. Tried running on different ports.
Code example:
//setup express for serving crossdomain on same port as game
var express=require('express');
var app=express();
app.get("/crossdomain.xml", onGetCrossdomain);
var server=require('http').Server(app);
//setup socket io
var socketIo=require('socket.io');
var io=socketIo.listen(server);
//listen on port
server.listen(currentPort);
console.log("Listening on port "+currentPort);
io.set('transports',
[
'flashsocket'
]);
io.sockets.on('connection', onConnection);
function onGetCrossdomain(req, res)
{
res.sendfile(__dirname+'/crossdomain.xml');
}
function onConnection(socket)
{
console.log("connected");
}
I've installed earlier version of node (0.8.25) using n - node version manager (https://npmjs.org/package/n), and everything started working fine. Thanks funseiki!