I have this config:
connect: {
develop: {
options: {
livereload: 35729,
hostname: '*',
port: 8000,
open: {
target: 'http://localhost:<%= connect.develop.options.port %>/src',
appName: 'Google Chrome'
},
}
}
},
I start it and then 'watch' grunt connect:develop watch, but nothing gets 'reloaded'.
It looks like grunt-connect is properly injecting script into HTML cause i Have:
<script src="//localhost:35729/livereload.js?snipver=1"></script>
But
I get error in browser:
GET http://localhost:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED
Related
When I serve my project using grunt-contrib-connect, I need it to run using https, and in the browser the root path needs to be:
https://localhost/
I am not familiar with how to set this up using the proxy option in grunt-contrib-connect.
My grunt.initConfig setup is:
connect: {
server: {
options: {
port: 80,
base: 'dist',
protocol: 'https',
livereload: true,
keepalive: true,
debug: true,
hostname: 'localhost',
open: true
}
}
},
```
This serves the project to https://localhost:80/
I will finish setting up livereload once this is working correctly.
Thanks for your help.
For https without a port number in the address bar, port needs to be set to 443, and for livereload you must have simple, self-generated certificates created - they can reside in the project folder as they are in no way connected with security.
The connect/watch setup in my gruntfile is:
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
// Project configuration.
grunt.initConfig({
//live server
connect: {
server: {
options: {
port: 443,
base: 'dist', //the folder my compiled web files are generated in
protocol: 'https',
livereload: true,
debug: true, //show me what is being served, helpful for debugging
hostname: 'localhost',
open: true //auto-open browser tab - remove if annoying
}
}
},
//watch for changes and recompile / reload
watch: {
dev: {
options: {
livereload: {
port: 35729,
key: grunt.file.read('livereload.key'),
cert: grunt.file.read('livereload.crt')
// you can pass in any other options you'd like to the https server, as listed here: http://nodejs.org/api/tls.html#tls_tls_createserver_options_secureconnectionlistener
}
},
files: [ // Files to livereload on
"js/**/*.*",
"less/admin/*.less",
"./*.html",
"./Gruntfile.js",
"snippets/*.*"
],
tasks: [
'dev' //the task to run after a change is detected
]
}
},
.....
This guide helped me create the certificates:
https://www.gilluminate.com/2014/06/10/livereload-ssl-https-grunt-watch/
The :9000 detail did not work for me, I left the livereload port at 35729, and once the server was up and running hit this in a new tab to authorise access to the script using self-generated certificates:
https://localhost:35729/livereload.js?snipver=1
I hope this helps someone ;)
I'm using Protractor to implement end-to-end tests on my AngularJS app using Grunt, and my app does use proxy pass to handle API calls. As a result, when running tests, API calls fail because http://localhost:9000/api is not handled.
I tried the grunt-connect-proxy plugin to handle /api proxy pass but it simply redirects (HTTP code 301) localhost:9000/api to myserver.com/api, and doesn't mimic the behaviour of a proxy pass (and the app doesn't work either).
Here's the Gruntfile configuration:
connect: {
options: {
port: 9000,
hostname: 'localhost',
base: ['<%= globals.appFolder %>/'],
logger: 'dev',
}
},
protractor: {
options: {
configFile: 'tests/e2e/protractor.config.js',
keepAlive: true,
noColor: false,
args: {}
},
e2e: {
options: {
args: {}
}
}
}
And here's the Protractor configuration file:
exports.config = {
specs: ['./suites/*.js'],
baseUrl: 'http://localhost:9000',
maxSessions: 1,
multiCapabilities: [{
browserName: 'chrome'
}],
};
How would you handle this case to let tests run on both a desktop machine, and a remote machine (such as Jenkins)?
According to this issue related on grunt-connect-proxy, this is a bug occurring when dealing with HTTPS endpoints. Use the master/ version instead.
Package.json:
"grunt-connect-proxy": "https://github.com/drewzboto/grunt-connect-proxy#master",
Gruntfile:
proxies: [{
context: '/api',
host: 'myserver.com',
port: 443,
https: true
}]
I'd like Protractor E2E tests to reflect my code coverage in SonarQube.
I've tried grunt-protractor-coverage npm module but it shows 100% coverage while the report file it creates is empty.
Here's the relevant part of my Gruntfile.js:
connect: {
options: {
port: 9000,
hostname: 'localhost'
},
runtime: {
options: {
base: 'instrumented/build'
}
}
},
instrument: {
files: 'build/**/*.js',
options: {
lazy: true,
basePath: "instrumented"
}
},
protractor_coverage: {
options: {
keepAlive: true,
noColor: false,
coverageDir: 'coverage',
args: {
baseUrl: 'http://localhost:9000'
}
},
local: {
options: {
configFile: './protractor-chrome-conf.js'
}
}
},
makeReport: {
src: 'coverage/*.json',
options: {
type: 'lcov',
dir: 'coverage/dir',
print: 'detail'
}
}
Any ideas?
You must first install the SonarJS code analyzer
And then this plugin can be fed with a LCOV report providing the coverage information: http://docs.sonarqube.org/display/PLUG/JavaScript+Coverage+Results+Import
I have currently a simple angular application configured with yeoman, and the only customisation I'm trying is with grunt-connect-proxy. So I followed the instructions and modified my Gruntfile :
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
module.exports = function (grunt) {
...
grunt.initConfig({
...
connect: {
...
server: {
proxies: [
{
context: '/api',
host: 'somevirtualhost',
port: 8080,
https: false,
changeOrigin: true
}
]
},
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
proxySnippet,
...
];
}
}
},
...
},
});
...
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
...
grunt.task.run([
...
'configureProxies:server',
...
]);
});
}
And in a controller I tried the following :
var Versions = $resource('/api/version/:versId', { versId: '#id' });
var version = Versions.get({ versId: 'Ultra' }, function () {
console.log('here I am');
});
When I run grunt serve I can see the proxy is created :
Running "configureProxies:server" (configureProxies) task
Proxy created for: /api to somevirtualhost:8080
But in the console of the web page I get :
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:9000/api/version/Ultra
Any idea ?
I found some clues here : https://github.com/drewzboto/grunt-connect-proxy/issues/69
I don't understand everything but for now I add the headers option in my proxies :
proxies: [
{
context: '/api',
host: 'somevirtualhost',
port: 8080,
https: false,
changeOrigin: true,
headers: {
'host': 'somevirtualhost'
},
}
]
And it seems to work
I am developing an angularjs site for someone and the site they are going to put it on is something like this
http://domain.com/newsite
So to get my links to work I added the following in the head tags to get the links to work in production
<base href="/newsite/" />
But now when I use grunt connect, nothing works because of that base element. I guess, when I am locally working I could comment it out but I would be concerned I would forget to put it back. Thanks for any tips.
Here is part of my grunt file
connect: {
server: {
options: {
port: '9001',
base: 'build/',
protocol: 'http',
hostname: 'localhost',
livereload: true,
open: {
target: 'http://localhost:9001',
callback: function() {}
},
}
}
},
watch: {
files: [
'<%= app.root %>**/*',
'Gruntfile.js'
],
tasks: [ 'copy', 'less:dev' ],
options: {
reload: false,
livereload: true,
spawn: true
}
}
Posts I checked that did not give me any answers:
grunt-connect: serve files with base url added
I would change the livereload part of your server options to something like the following:
connect: {
server: {
options: {
port: '9001',
base: 'build/',
protocol: 'http',
hostname: 'localhost',
livereload: true,
open: 'http://localhost:9001/newsite/'
}
}
},