Node Js Gulp - BrowserSync - Gulp watch PortForwarding on vagrant - node.js

Hello guys im Running an vagrant machine with localhost:8088
my gulp task starting the an default local host on : http://localhost:3000/ how is it possible to reload my vagrant localhost:8088 if changes appears (Just the Browser should i use live-reload?
)
gulp.task('browserSync', function () {
browserSync.init({
proxy: '127.0.0.1:3005',
target: "localhost:8088",
open: true,
notify: true
})
});
tryed this but still without success

Try to mention open parameter as external and give the port and address in parameters as below
{ "host": "localhost", "open": "external", "port": 8088 }
Hope this works

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 to resolve invalid host header issue in webpack?

I'm getting invalid host header error, if i access my page through browser with online ip. Locally it is working perfectly, but i don't know why this error is coming in live server. I'm following three steps to run my react js application, that is,
'npm install'
'npm run build'
'npm run serve'
webpack config file host setup
// replace localhost with 0.0.0.0 if you want to access
// your app from wifi or a virtual machine
const host = process.env.HOST || '0.0.0.0';
const port = process.env.PORT || 3000;
const stats = {
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: false,
errorDetails: false,
warnings: false,
publicPath: false,
colors: {
green: '\u001b[32m',
},
};
package.json scripts
"build": "rimraf build && cross-env NODE_ENV=production webpack --env.prod=true --env.sw=true",
"serve": "pushstate-server build/ 3000",
Webpack dev server has recently had a host check added by default as a security measure https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3
You will now need to either disable it via disableHostCheck option (not wise if publicly accessible) or specify the public host or IP that you will be accessing it at when starting the server --public your-hostname-or-public-ip:3000
EDIT: Webpack in question name and webpack-dev-server tag was misleading - this actually uses different server altogether...
Ah it looks like this is not actually webpack related at all - you are using a different server pushstate-server which strangely has the host option in the module, but is not exposed in the binary. You will have to roll your own server startup script to pass a different host to it (it is 0.0.0.0 by default).
Save this to ./server.sh
#!/usr/bin/env node
require('pushstate-server').start({
directory: process.argv[2],
port: process.argv[3],
file: process.argv[4],
host: process.argv[5]
}, (err, address) =>
console.log(`Listening on port ${address.port} (http://${address.address}:${address.port})`)
)`
Change your npm script change to
server.sh build/ 3000 index.html your-publicly-accessible-hostname
I had the same error when I came across to these:
https://help.crossbrowsertesting.com/faqs/testing/invalid-host-header-error/
In my case it was solved by restarting the service.

Strongloop deploy on AWS EC2

I have instaled node.js and npm on EC2 through command line and also uploaded all my files for Strongloop project
When I'm running the server locally it is working fine but when I'm running the node server.js on EC2 command line. it is running but saying:
Web server listening at: http://0.0.0.0:3001/
ENVIRONMENT : development
How could I start my server on AWS EC2... Can't figure it out.
My Config.json file
{
"restApiRoot": "/api",
"host": "0.0.0.0",
"port": 3001,
"remoting": {
"context": {
"enableHttpContext": false
},
"rest": {
"normalizeHttpPath": false,
"xml": false
},
"json": {
"strict": false,
"limit": "100kb"
},
"urlencoded": {
"extended": true,
"limit": "100kb"
},
"cors": false,
"errorHandler": {
"disableStackTrace": true
}
},
"legacyExplorer": false
}
Few possible things:
Make sure the port you are using is in your AWS Security Inbound Rules. Go to 'Security Groups', then select the group associated with your instance then click "Inbound". In your case, you have to add the port 3001 for HTTP protocol and the source 0.0.0.0/0.
You need to keep the service running even after you close the terminal/command-prompt window. To make the server start automatically and run in the background, you need to use something like 'systemctl' in ubuntu. Here is a step by step guide and tutorial: https://www.digitalocean.com/community/tutorials/how-to-use-systemctl-to-manage-systemd-services-and-units
Now try visiting your IPv4 Public IP or your associated domain name with the port number. e.g. 1.2.3.4:3001 or mywebsite.com:3001. The IP is written in the same row as your instance in AWS.

Grunt-contrib-watch with grunt-contrib-connect

Unfortunately, grunt-contrib-watch and grunt-contrib-connect don't seem to be playing nice.
On the grunt-contrib-connect readme it says:
Note that this server only runs as long as grunt is running. Once grunt's tasks have completed, the web server stops. This behavior can be changed with the keepalive option, and can be enabled ad-hoc by running the task like grunt connect::keepalive.
Fine. But what if I want to run my watch task in tandem with the connect server? Like so:
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
keepalive: true
}
}
},
watch: {
options: {
livereload: true
},
files: ['**'],
tasks: ['connect'],
}
Here, the connect task runs when a file is changed. If I set the connect's keepalive option to true, then grunt-contrib-watch stops watching because it technically hasn't finished it's task. If I falsify the keepalive option, then the connect server dies after it has finished the tasks.
Yes, I could run the commands...
$ grunt connect
$ grunt watch
...in separate shells, but is there no way of running them with one command?
Livereload in grunt-contrib-watch informs for changes in files at a port here below you can see it is at 35729.
On the other hand the livereload in grunt-contrib-connect listens for changes at the port 35729.
So we should should configure them as -
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
livereload: 35729
}
}
},
watch: {
options: {
livereload: 35729
},
files: ['**'],
tasks: []
}
You need not provide "connect" as a task here. As the work of reloading is done by livereload here.
Now to make these two work with a single command we will register them as -
grunt.registerTask("server", ["connect", "watch"]);
Now the connect is run and then watch is run. Now normally registerTasks works by finishing the first task then the second task and so on. But due to the behaviour of connect as stated by you -
Note that this server only runs as long as grunt is running
Connect is run only once. But watch will keep on running looking for changes (keeping grunt running) and thus keeping the connect server up.
Now when you try
grunt server
things will work like a charm.
I use grunt-nodemon, which encapsulates watch and a nodejs launcher in a single task:
nodemon: {
dev: {
script: 'app.js',
options: {
ignore: [
'node_modules/**',
'public/**'
],
ext: 'js'
}
}
}
Then executed with:
$ grunt nodemon:dev
Now, nodemon only launches the app.js script with nodejs, so you will need a small app.js to load a static static express server:
var express = require('express');
var server = express(); // better instead
server.configure(function(){
server.use(express.static(__dirname + '/public'));
});
server.listen(3000);

Grunt Connect server ignoring port and not opening browser

Trying to get grunt-connect setup.
What I want is to start a server (either localhost or an IP), the browser to open at that url and ideally this to livereload when a CSS, HTML or JS file is changed. But we can come to that later.
This is what I have in the gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
includesPath: "includes",
connect: {
test: {
port: 9001,
hostname: '0.0.0.0',
base: '',
open: true
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect:test']);
grunt.registerTask('server', ['connect:test']);
};
this is the dependency in the package.json
"grunt-contrib-connect": "~0.8.0"
When I run either grunt or grunt server the Terminal window says
Started connect web server on http: //0.0.0.0:8000
It doesn't open a browser. If I go to that address in the browser, there is no page there.
What do you reckon?
So it seems I was missing the options object! What a stupid, Friday afternoon mistake that was. Frustrating that it didn't error though, I assume it has default settings it uses, which would explain why it used it's on port?
This code did the trick, thanks for your help Dave McNally
connect: {
server: {
options: {
keepalive: true,
port: 4000,
base: '.',
open: true
}
}
}
You’ll want a value in the base parameter, the default '.' will do if source is in same root directory and as mentioned, you don't need to specify hostname when using the default. Also, check ports, as you're specifying one in the task but then opening another in the given address?

Resources