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
}]
Related
I'm having a problem when running next build on my local machine (Windows 10) the command builds the app successfully
But when doing so on my server (running on linux 4.18.0-372.9.1.1.lve.el8.x86_64 the build hangs indefinitely, this was tested on my current project, I've also tried testing on a new project created on the linux server and got the same issue
I tried skipping linting and type checks from next.config.js but it still hangs
I noticed this process running while the app is "building", might be the source of the issue but I'm not sure
I might also be missing some dependencies that I am not aware of, any ideas?
Edit (1)
// next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
distDir: "./build",
images: {
remotePatterns: [
{
protocol: "http",
hostname: "localhost",
port: "1337",
pathname: "/uploads/**",
},
{
protocol: "http",
hostname: "127.0.0.1",
port: "1337",
pathname: "/uploads/**",
},
],
},
async redirects() {
return [
{
source: "/news",
destination: "/",
permanent: false,
},
];
},
};
const withBundleAnalyzer = require("#next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer(nextConfig);
Edit (2)
While the app is building, the cpu usage shoots between 92% and 100%, without building it rests at 14%
Is there a way to bypass running tests with jest while building?
I'm trying to migrate my react project from webpack to vite and I'm facing this issue with proxies:
I've configured my proxy like so:
port: 8000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
},
'/graphql': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
But if I use it like that, then vite starts requesting localhost:8080/api for clientside files like localhost:8080/api/index.ts which throws a MIME type error.
What’s the cause for this behavior and how can I fix it? The http-proxy documentation offers no details(which is what Vite uses)
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 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/'
}
}
},