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/'
}
}
},
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 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
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 have an Angular JS project with LESS and am using grunt to compile and display my page, via grunt serve. However, after every save/compile of a LESS file, the page reloads with the changes. If I had change the state of objects on my page, and made a LESS edit, the page reload re-sets the page state and I need to make all my changes again to see if my CSS fix was sufficient.
Is there a way to configure this where the LESS file compiles, the CSS is reloaded without loading the entire HTML page?
here is the connect section of my Grunt.js:
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
//hostname: 'localhost',
hostname: '0.0.0.0',
livereload: 35729
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
]
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'<%= yeoman.app %>'
]
}
},
dist: {
options: {
base: '<%= yeoman.dist %>'
}
}
},
and the LESS part:
//LESS
less: {
theme: {
options: {
sourceMap: true,
sourceMapFilename: '.tmp/dist/css/theme.css.map',
sourceMapURL: 'theme.css.map',
outputSourceFiles: true
},
files: [{
".tmp/dist/css/theme.css": "<%= yeoman.less %>/theme.less"
}]
},
preview: {
options: {
sourceMap: true,
sourceMapFilename: '.tmp/live_preview/styles/main.css.map',
sourceMapURL: 'main.css.map',
outputSourceFiles: true
},
files: [{
".tmp/live_preview/styles/main.css": "<%= yeoman.preview %>/less/main.less"
}]
},
distTheme: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
sourceMap: true,
sourceMapFilename: '<%= yeoman.dist %>/dist/css/theme.css.map',
sourceMapURL: 'theme.css.map',
outputSourceFiles: true
},
files: [{
"<%= yeoman.dist %>/dist/css/theme.css": "<%= yeoman.less %>/theme.less"
}]
}
},
The trick is to trigger livereload only on the generated CSS, not on the less files or you'll get a page reload.
This watch configuration does the trick for me:
watch: {
options: {
livereload: true,
},
html: {
files: ['app/index.html', 'app/views/*.html', 'app/views/*/*.html'],
},
js: {
files: ['app/scripts/*.js', 'app/scripts/*/*.js']
},
less: {
files: ['app/styles/less/*.less'],
tasks: ['less'],
options: {
livereload: false
}
},
css: {
files: ['app/styles/*.css'],
}
}
As far as I understand if watcher notifies a change it triggers to reload the related resources in the browser, but if there is not related resource, it trigger a full reload.
So if there are changes which aren't loaded in the browser, it triggers a full reload.
And the .less file isn't loaded in the browser only the generated css.
I think it should be enough to add something similar to your watcher config to disable watching for the .less file:
base: [
'.tmp',
'<%= yeoman.app %>',
'!...yourlessfile.less'
]