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.
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)
sorry!My english is very poor!If you can't understanding my meaning!read more times please! Thank you very much!
here is my codes:
gulp.task('server', function () {
connect.server({
livereload: true,
port: 8000
});
});
When i in terminal running gulp server,the screen shows following pictures:
enter image description here
it shows not my defined routes,it's my file's directory!but i don't konw why!
so ,help me !Thanks a lot!
Another question is:
I cannot open my index.html file in my browser.
it's all because this is node a nodejs server. This gulp server is used to serve static assets and html files.
to run this code you might need to use the following command
node server.js
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.
How can I view my local dev website in my phone using gulp Browser-sync?
I type localhost:3000 in my phones browser but it won't load
When you run gulp in your terminal you should see :
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.10.81:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.10.81:3001
What it means is that your local URL is localhost at port 3000.
For external users it will be the external IP [ not the UI one ]. To access from your phone you need to enter the External IP along with its port in your phone's browser.
You can view all your browser-sync settings by visiting the UI IP.
Note : For the external link to work on your phone, your phone and computer should be on the same Wi-Fi Network, only then it will work.
I know this is old, but the above option didn't work for me, and I'm running windows 10. I eventually found a solution using the tunnel option which is completely hassle-free.
For instance, setting as an option tunnel: true will generate a random public URL each time you run BrowserSync: e.g. http://randomstring23232.localtunnel.me
However, you can set a preferred tunnel name by passing it as a string to the tunnel option, i.e.
tunnel: 'preferredtunnelname',
which will reproduce: https://preferredtunnelname.localtunnel.me
References here: https://github.com/BrowserSync/browser-sync/issues/390 and
https://browsersync.io/docs/options/#option-tunnel
Thanks to #Kwesi for sharing above. In my case, setting tunnel:true alone didn't work until I also added online:true. Here's my sample code - worked fine on both computer and mobile device.
browserSync.init({
server: {
baseDir: "app"
},
online: true,
tunnel: true,
logLevel: "debug"
});
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)