although I'm able to serve from filesystem the grunt-ngdocs automatically generated index.html, everytime I try to look to a description in the documentation I'm getting:
XMLHttpRequest cannot load file:///C:/<file-path> Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource
even if both the docs/partials and docs/partials/api folders are empty.
This is my grunt-ngdocs configuration
ngdocs: {
options: {
dest: 'docs',
html5Mode: false,
inlinePartials: true,
scripts: [
'bower_components/angular/angular.js',
'bower_components/angular-animate/angular-animate.js'
]
},
api: {
src: ['app/scripts/**/*.js'],
title: 'Docs'
}
}
What am I doing wrong?
Thank you in advance
Problem is you have to run it from a server. I use a node http server (https://www.npmjs.com/package/http-server). After installing it, just head into the docs/ directory and type 'http-server'. You will get the following message:
Starting up http-server, serving ./ on: http://0.0.0.0:8080
You can now check the docs on the given URL (http://0.0.0.0:8080)
Edit:
If you don't want to load it from a server, you can set the option inlinePartials to true in the gruntfile. This is what I have:
ngdocs: {
options: {
dest: 'docs',
title: "Docs",
inlinePartials: true
},
api: {
src: ['<%= yeoman.app %>/scripts/**/*.js'],
title: 'API Documentation'
}
},
see (https://github.com/m7r/grunt-ngdocs)
Related
Does someone know why this happens? If I run nuxt locally (server) it works fine, but whenever I run yarn generate and load the index.html file in my browser all content between <client-only> tags disappear.
My nuxt config file:
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: true,
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'Site name',
htmlAttrs: {
lang: 'nl'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Description
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'preconnect', href: "https://fonts.gstatic.com"},
{ href: 'https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&family=Open+Sans+Condensed:wght#700&display=swap', rel: 'stylesheet'}
],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["#/assets/css/hamburgers.scss"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/fontawesome',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
],
styleResources: {
scss: [
"assets/css/variables.scss",
"assets/css/hamburgers.scss",
]
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
Okay I've got it to work.
Javascript wasn't working properly because the files weren't linked correctly when I open index.html.
Because index.html is in a local folder somewhere on my PC, it searches for the javascript files on the root of the machine (where they don't exist).
I tested this locally on an Apache server with XAMPP and the same problem ocurred when I put the dist content generated by yarn generate in a subfolder so the URL would be localhost/subfolder.
The fix for this specific problem in this context would be to add to nuxt.config.js this:
router: {
base: '/subfolder/'
},
In the end this solution was not neccesary for me because when I were to host this on an actual Apache server and would put the files in the root directory so then the router property isn't needed unless I would put it there in a subfolder.
Earlier related questions from me:
Click events in Nuxt don't work after generating static site
Href and src generated by Nuxt in static site are not properly linked to js files after nuxt generate
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'm trying to run an angular app with a Grunt server, and when I serve it up and navigate to it, the only thing it is displaying is "cannot GET/".
I am working on this app and it is my responsibility to get it to run for testing.
I looked in the gruntfile, and the 'base' option is set to 'public', which I can't find a corresponding folder to anywhere in the directory.
grunt.initConfig({
connect: {
server: {
options: {
port: 3001,
base: 'public',
keepalive: true
}
}
There are also a few instances of public cropping up later in the file, for instance:
templates: {
files: [{
expand: true,
cwd: '<%= app.templates %>/',
src: ['**/*.html'],
dest: 'public/'
}]
I don't know what to do!
I did try to change the base option to where the index.html file is located, and I stopped getting the "cannot GET/", but then the angular bindings were not working.
Backend of our app is in PHP and for frontend we are using AngularJs.
We successfully managed to run e2e tests on local as well as on production server using protractor.
After writing loads of e2e tests for our app, we started looking for its coverage similar to that of unit testing. After searching for lot, luckily we find https://www.npmjs.com/package/grunt-protractor-coverage , exactly what we wanted.
I took help from http://lkrnac.net/blog/2014/04/measuring-code-coverage-by-protractor/ article which beautifully helps in setting up everything. I setup the config and other grunt tasks for my app, and finally our code(js files) were properly instrumented. I copied the rest of the files(html, static, etc.) to that instrumented code and provided the correct path for the proractor-config file. Tests started running as they were running before, but this time with instrumented files.
Till this point, everything is OK. But when the task for generating coverage-report was executed, we figured that we had empty coverage.json file {}. This means the report will surely be empty as it reads that file to generate report, and as far as I have figured out, this file is generated by protractor-coverage grunt task while tests are executing. It sends the information to the collector(port: 3001) using a POST req and while generating report, a GET req is being made to the same collector.
So, what I figured is, No POST req is being made to collector.
var options = {
hostname: 'localhost',
port: <%=collectorPort%>,
path: '/data',
method: 'POST',
headers:{
'Content-Type':'application/json'
}
};
function saveCoverage(data){
var req = http.request(options, function(res) {
res.on('data', function (chunk) {
});
});
req.on('error', function(e) {
console.log('problem with request: ' + e.message);
});
// write data to request body
req.write(JSON.stringify(data));
req.write('\n');
req.end();
}
Each time it just shows
where it should have listed down every file:
And also, that 100 everywhere is misleading, I ran tests for the source code: http://lkrnac.net/blog/2014/04/measuring-code-coverage-by-protractor/ as explained, but even if there's only one e2e test, the report must have given the actual numbers instead of giving a straight 100 for all.
It might happen that I have some wrong configuration or missed something.
Below are my files:
'use strict';
module.exports = function(grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: {
// configurable paths
app: 'app',
dist: 'dist-test',
e2e: 'coverage/e2e',
instrumentedServer: 'coverage/server/instrument',
instrumentedE2E: 'coverage/e2e/instrumented'
},
// Empties folders to start fresh
clean: {
coverageE2E: {
src: ['<%= yeoman.e2e %>/'],
}
},
// Copies remaining files to places other tasks can use
copy: {
coverageE2E: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.e2e %>/instrumented/app',
src: [
'**/*',
'!modules/**/*.js',
'!editor/**/*.js'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.e2e %>/instrumented/app/images',
src: ['generated/*']
}, ]
},
},
// start - code coverage settings
instrument: {
files: ['app/modules/**/*.js', 'app/editor/**/*.js'],
options: {
lazy: true,
basePath: 'coverage/e2e/instrumented/'
}
},
makeReport: {
src: '<%= yeoman.instrumentedE2E %>/*.json',
options: {
type: 'html',
dir: '<%= yeoman.e2e %>/reports',
print: 'detail',
// type: 'lcov'
// dir: 'reports'
}
},
protractor_coverage: {
options: {
configFile: 'test/e2e/protractor-config.js', // Default config file
keepAlive: true, // If false, the grunt process stops when the test fails.
noColor: false, // If true, protractor will not use colors in its output.
coverageDir: '<%= yeoman.instrumentedE2E %>',
args: {},
run: {}
},
chrome: {
options: {
args: {
baseUrl: 'https://localapp.vwo.com/v3/#/',
// Arguments passed to the command
'browser': 'chrome'
}
}
}
}
});
grunt.registerTask('default', [
'clean:coverageE2E',
'copy:coverageE2E',
'instrument',
'protractor_coverage:chrome',
'makeReport'
]);
};
And my coverage.json file:
{}