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?
Related
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,
},
// ...
}
The title pretty much says it all. I'm on Windows 10, and I have a node app that I start with npm start. (I know almost nothing about node.js.) The app runs on gulp.js. I need the app to open in Firefox, even though Chrome is my default browser. How can I do this? Here's the code that opens the app now; the docs don't allude to there being such an option for the open parameter:
gulp.task('webserver', function() {
gulp.src('./app')
.pipe(webserver({
livereload: true,
open: true,
defaultFile: 'index.html',
port: serverPort
}));
});
Install gulp-open by typing the following in to your console
npm install gulp-open --save
Add the following to the top of your gulpfile.js
var open = require('gulp-open');
Add the following to the end of your gulpfile.js
gulp.task('browser', function(){
var options = {
uri: 'localhost:<enter the port you are using here>',
app: 'firefox'
};
gulp.src(__filename)
.pipe(open(options));
});
Add 'browser' to your gulp default. This is what actually opens the browser at the port you are running your app on
gulp.task('default', ['webserver', 'browser']);
in console type gulp
I have a problem getting iisnode and ghost to play together.
I can run the samples supplied with iisnode fine and I can get ghost up and running fine through the node command line. I have followed every blog post written online I can find to get them set up together. The frustrating thing is the blogs make this process look extremely straightforward.
From looking at "ETW" logs it looks like iisnode cannot communicate with the node process using named pipes ("iisnode scheduled a retry of a named pipe connection to the node.exe process" x20+), and then the node process terminates.
The problem may not lie with ghost, tbh I cannot work out what to do or which part to tweak next. My best guess at this point is some sort of permissions issue, but I've spent hours setting permissions all over my development machine to no avail.
If it helps, the error message I get back in the browser is: ERROR: (Code: EACCES) There was an error starting your server.
To answer my own question, I examined the Process Monitor output for node.exe, line by line to see if I could see anything strange. I'm no expert at analysing the output from Process Monitor and there are a tonne of "Buffer Overflow" messages and other things that could be errors, but then I happened to stumble upon the following line:
Node.exe CreatePipe \MyProjects\WebsiteName\process.env.port\ INVALIDDEVICEREQUEST
Invalid device?
Then the penny finally dropped. In config.js you do not want to set your port to 'process.env.port' (as is suggested in the config.js file itself as a comment) you want to set the port to process.env.port.
No quotes.
Just to clarify what ruethewhirl551 said, here is an excerpt from my working "config.js":
config = {
production: {
url: 'http://my-blog.com',
mail: {
transport: 'SMTP',
options: {
service: 'Mailgun',
auth: {
user: 'postmaster#my-blog.com',
pass: '9ed512da012cd454376947365xd71793'
}
}
},
database: {
client: 'sqlite3',
connection: {
filename: path.join(__dirname, '/content/data/ghost.db')
},
debug: false
},
server: {
host: '127.0.0.1',
port: process.env.PORT // <-- HERE
}
},
// ...
Please notice the line port: process.env.PORT at the bottom.
You can also search for "iisnode" through the "config.example.js" file for more information.
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);
It would be nice to have the browser automatically reload the page when I change a project file. I have this node-express site with the server being defined in 'server.js'
However, I've tried different grunt configurations, but none of them caused the browser to reload on a file change although the 'watch' task prints a message that the file changed!
Here is the relevant grunt configuration:
watch: {
all: {
files: 'views/index.ejs', // for now only watch this file!
options: {
livereload: true
}
}
},
express: {
options: {
background: true,
error: function(err, result, code) {},
fallback: function() {},
port: 3000
delay: 0,
output: ".+",
debug: false
},
dev: {
options: {
script: './server.js',
node_env: 'development',
livereload: true
}
}
}
....
grunt.registerTask('server', [
'express:dev',
'open',
'watch'
])
};
And to run the task I do
$> grunt server
Can someone explain what is wrong with this configuration ?
thnx
You need to install the livereload browser plugin from http://livereload.com/
I am trying to use grunt livereload to reload css changes on my node.js pages. I am getting closer to solve my problem which is similar to yours. So from what i know so far and please correct me if i'm wrong you dont need to install "livereload browser plugin" right? I used grunt alone without node.js and i could just use livereload without installing "livereload browser plugin" i just had to add a line in my .html (the problem i run into with node is how to reload .ejs and i found this page/question on the way solving it) : so i dont know if installing the livereload thing is another way to do the script part or if this is the case like i mentioned in my problem if i want to live reload .ejs i have to install the plugin.