browser-sync proxy fails to connect - browser-sync

Have a simple rack based server running on localhost:9292
And gulp task to proxy this address..
gulp.task('browser-sync', function() {
browserSync.init({
proxy: 'localhost:9292',
port: 4000
});
});
On the CLI we get this..
[17:36:34] Starting 'browser-sync'...
[17:36:34] Finished 'browser-sync' after 9.75 ms
[BS] Proxying: http://localhost:9292
[BS] Access URLs:
Local: http://localhost:3000
External: http://192.168.1.218:3000
UI: http://localhost:3001
UI External: http://192.168.1.218:3001
And....Nothing. No error message, the browser just spins and nothing happens.
Based on these BrowserSync instructions, it appears that this is all I need to do.
Gulp version 3.9.1
Node v6.3.1
browser-sync 2.14.0

Related

Linux localhost port 8080 unresponsive

I have a vuejs app running on my localhost on port 8080, and when I open it in my browser the site doesn't load, and I get the warning by chrome that the site is not responding. I also have a python flask backend running on port 5000, and this works perfectly. Is this a common issue? If so, how do I resolve it?
Thanks!
OK let us to change default port and try again
first enter npm run serve -- --port 4030
and now again test http://localhost:4030 if agian not works, all you have to do is modify the portvalue inside the dev block in root of your project, for example <your_project_root>/vue.config.js
// vue.config.js
module.exports = {
// ...
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 4030, // Your PORT you changed !
https: false,
hotOnly: false,
},
// ...
}

How can I access vue project which is running by npm run server command from any other computer or mobile that is connected in the same network?

I am running a VueJS project in Ubuntu v18.04.
When I run the project using npm run serve, it works fine and I can …
- access it in my Local: http://localhost:8080/.
- also access it using Network: http://myip:8080/.
But I cannot access it from any other computer (or via mobile) despite the fact that devices are on the same network.
Adding the host in vue.config.js file doesn't has no effect and running the command npm run serve --host 0.0.0.0 only result in the following error:
/var/www/html/unilliver_vue/0.0.0.0 in multi (webpack)-dev-server/client?http://192.168.53.75:8080/sockjs-node
(webpack)/hot/dev-server.js ./0.0.0.0, multi (webpack)-dev-server/client?http://localhost
(webpack)/hot/dev-server.js (webpack)-dev-server/client?http://192.168.53.75:8080/sockjs-node ./0.0.0.0
To install it, you can run: npm install --save
/var/www/html/unilliver_vue/0.0.0.0
Here is the code of vue.config.js file
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/koreyomo/',
proxyTable: {},
host: '0.0.0.0',
port: 8080,
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
},
}
I am using vuecli 3, node version 10.16.3 and npm version 6.9.0. Can anyone suggest me what to do if I want to access from other devices?
All you need to do is make sure your laptop and mobile are on the same Wifi Connection
Just Run npm run serve
Network: http://192.168.1.***:8100/
Type that network address in your mobile browser
It works for create-react-app & vue-cli
Hot reload will also work
If you don't have WiFi use a mobile hotspot

Signalmaster on https: ERR_CONNECTION_REFUSED

I have an ember project using Signalmaster. In the config/environment.js I have the following:
if (environment === 'production') {
ENV.SIGNALMASTER = {
HOST: 'https://localhost:8890',
PORT: '8890',
FORCE_CONNECTION: true
};
On my server I have signalmaster running at https://localhost:8890 (in the development.json and production.json files in the config directory for signalmaster I have secure set to true, and in the server.js file for signalmaster I've put in the location of my SSL certificate and key, as is required for running it on https) - when running "node server.js" I get the following:
signal master is running at: https://localhost:8890
Running "netstat -lnp" also shows a process running on port 8890. However when I use the app I get errors like this:
GET https://localhost:8890/socket.io/?EIO=3&transport=polling&t=LjG8--J net::ERR_CONNECTION_REFUSED
I am using socket.io version 1.3.7.
Instead of having the host as https://localhost:8890, seems it had to be https://[domain.com]:8890

gulp live-server vs browserSync

I have read enough about live-server and browsersync .. however i can't quiet get my head around how they work together.
browserSync's job is to sync all browser and live-server's job is to restart my express server.
so how does the below task help in my work flow:
gulp.task('live-server', function() {
var server = new LiveServer('server/main.js');
server.start();
});
gulp.task('serve', ['live-server'], function() {
browserSync.init(null, {
proxy: 'http://localhost:7777',
port: 9001
});
});
The output that I get when i run gulp serve is
[09:31:05] Using gulpfile ~/Documents/Code/test/gulpfile.js
[09:31:05] Starting 'live-server'...
[09:31:05] Finished 'live-server' after 8.55 ms
[09:31:05] Starting 'serve'...
[09:31:05] Finished 'serve' after 60 ms
livereload[tiny-lr] listening on 35729 ...
[BS] Proxying: http://localhost:7777
[BS] Access URLs:
-------------------------------------
Local: http://localhost:9001
External: http://172.20.3.230:9001
-------------------------------------
UI: http://localhost:3001
UI External: http://172.20.3.230:3001
------------------------------------
What is this external and what is UI external with all new ports 9001, 3001 ??
Local: represents the address on your local machine with which you can view the project.
External: represents the address that any user on you local network(LAN or wifi) can view the project.
UI gives you a bird's eyeview of all BrowserSync options, it shows you all sync options, history, and it lets you configure BrowserSync. To access the UI, just visit the address referenced on your terminal as UI.
The bellow link will detail more about it:
How to Use BrowserSync for Faster Development

Grunt server not working in nitrous.io

I created a node env using nitrous.io. Inside of their terminal I installed yeoman.
If I try to run grunt server I get an error stating:
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
http://gruntjs.com/getting-started
If i go to preview than connect to port 3000 i get this
The Reference states for node to change 127.0.0.1 or "localhost" to 0.0.0.0
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(3000, '0.0.0.0');
console.log('Server running at http://0.0.0.0:3000/');
Grunt syntaxes are a bit different for a server
connect: {
options: {
port: 3000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: '0.0.0.0' //
},
Even after this change the errors persist. Failing when I run grunt server or go to preview port 3000
Any ideas on what I'm doing incorrect? How do I run my grunt server so I may see my site in the broswer?
Have you gone through the advice on the first error message you got? You need both Gruntfile.js and package.json (with Grunt listed as a dependency); this is covered in the official documentation. Then, by running npm install you will be able to pull down a local Grunt to your project.
To summarize the comments this worked for me:
gem install sass; gem install compass
yo webapp
Edit Gruntfile.js around line 43:
connect: {
options: {
port: 3000, // <- changed this line
livereload: 35729,
hostname: '0.0.0.0' // <- changed this line
Run grunt server and click on the Preview-Button / Port 3000.

Resources