I have been working on setting up a proxy with Grunt. I am able to connect to my Grunt server, but when I try to hit the proxy I get a 404. Here is my Gruntfile.js
"use strict";
module.exports = function(grunt) {
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
connect:{
development: {
port: 9000,
base: 'app',
keepalive: true,
livereload: {
options: {
middleware: function() {
return proxySnippet;
}
}
},
proxies: [{
context: '/name',
host: 'http://99.42.222.76:3000/users.json',
changeOrigin: true
}]
}
}
});
grunt.registerTask('server', ['configureProxies', 'connect']);
};
I have tried to use this blog to help me set up everything, but I still am not having any luck. Thanks in advance.
At least part of the issue is that you don't want to use the full URL in the host: of the proxy configuration. According to the docs (https://github.com/drewzboto/grunt-connect-proxy), the host should not include the http.
Quote:
options.host
Type: String
The host to proxy to. Should not start with the http/https protocol.
I think the proxies section you want should look like the below. The host indicates the IP address or host name to proxy to, the port indicates the port to proxy to, and the rewrite indicates a translation from /name to /users.json.
proxies: [{
context: '/name',
host: '99.42.222.76',
port: 3000',
changeOrigin: true,
rewrite: { '^/name': '/users.json' }
}]
Related
How do I set up a proxy using WebpackDevServer in my React/Node chrome extension? My server is run on localhost:4000 and React frontend on localhost:5000
Using Axios, I try and hit the route: axios.get(/api/user/ticket), however, localhost:4000 is not proxied and the route that is hit is my chrome extension: chrome-extension://fjkfhdsjkwerjhdksfhdjkshfds/api/ticket/user/.
If I explicitly call localhost: axios.get(localhost:4000/api/user/ticket), then everything works properly. I'm new to webpack so not fully sure what I'm doing wrong. Thank you for the help!
Webserver proxy implemented using the docs
var server = new WebpackDevServer(
{
https: false,
hot: false,
client: false,
proxy: {
'/api': 'http://localhost:4000',
},
host: 'localhost',
port: env.PORT,
static: {
directory: path.join(__dirname, '../build'),
},
devMiddleware: {
publicPath: `http://localhost:${env.PORT}/`,
writeToDisk: true,
},
headers: {
'Access-Control-Allow-Origin': '*',
},
//this needs to change to prevent dns attacks
allowedHosts: 'all',
},
compiler
);
Proxy still doesn't work, however, I got around this by using baseUrls in axios. When in prod vs dev I just have to change them in one place and it works. Not ideal but it gets the job done.
in the local LAN everything is working very well, but over the internet it doesn't work.
i read a lot about WebRTC Signaling.
i use the following node.js peerjs server
whats wrong with my config?
var fs = require('fs');
var PeerServer = require('peer').PeerServer;
var server = PeerServer({
port: 3001,
debug: true,
path: '/peerjs',
ssl: {
key: fs.readFileSync('privkey.pem', 'utf8'),
cert: fs.readFileSync('fullchain.pem', 'utf8')
},
config: {'iceServers': [
{ url: 'stun:stun.l.google.com:19302' },
]}
});
First of all, you need to use a PeerServer that is not on your local network (=accessible to the internet). There is one provided by peer.js, which is used by default when no PeerServer URL is specified by the client.
To establish a connection, a library like socket.io can be very useful. This video gives a good explanation: https://www.youtube.com/watch?v=DvlyzDZDEq4
I'm setting grunt-contrib-watch, and grunt-contrib-connect to live reload, like this:
watch: {
options: {
livereload: true,
},
files: ['src/**/*'],
tasks: ['serve']
},
connect: {
server: {
options: {
port: 8000,
base: './dist',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true,
}
}
},
But I'm getting this error when connect tries to reload:
Running "connect:server" (connect) task
Fatal error: Port 8000 is already in use by another process.
I tried a few different ports, but had the same problem.
I don't get how grunt-contrib-connect server can have a conflict with it's own port.
How can I get this to work?
A couple requirements:
Make sure you're not already starting up localhost 8000 somewhere else. If you have two local servers running on the same port it won't work. (Check your other tabs in terminal)
Make sure the following is in your html(at the bottom with the other js)
<script src="//localhost:35729/livereload.js"></script>
and then try something like this:
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
livereload: 35729,
open:{
target: "http://localhost:8000"
}
}
}
},
watch: {
options: {
livereload: true,
},
css: {
files: ['src/**/*'],
options: {
spawn: false,
},
},
html: {
files: ["**/*.html"]
}
},
Then you can setup a task if you haven't like so:
grunt.registerTask("server", ["connect", "watch"]); // Type grunt server -- Creates a server and checks for any changes in the html/css
It turns out, the serve task was where I was starting the server, so it was trying to start another server every time it reloaded. I switched it to a dev task where the site was recompiled, but doesn't start a server.
Probably a different case but I had exactly the same error message no matter which port number I set in my gruntfile. Turned out that the problem was due to the fact that I had the port number defined as a string not a number.
My app was written on top of vuejs-templates/pwa boilerplate.
I've added a proxy to dev server config (build/webpack.dev.conf.js):
devServer: {
proxy: {
'/api': {
target: 'https://staging-api.company.net',
pathRewrite: {"^/api": ""},
secure: true,
changeOrigin: true,
},
},
},
It obviously doesn't work on first try, but I want to debug it to know how the proxy is redirecting the requests. I'd like to see in command line output some logs, something like:
Redirecting from /api/user/bla to https://staging-api.company.net/user/bla
But currently when I run yarn dev, when compilation is done all I see is:
Listening at http://localhost:8000
and after that the cli is silent.
I've tried to add an option to webpack-dev-middleware in build/dev-server.js:
const devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
// quiet: true,
logLevel: 'debug',
});
but it doesn't help, I'm not getting any new output in cli when I trigger requests from my app.
I've got a following Gruntfile.js which includes only two tasks: the first one parses/generates files and the second one, grunt-contrib-connect, starts web server:
module.exports = function(grunt) {
grunt.initConfig({
aglio: {
docs: {
files: {
'index.html': 'api.md',
},
options: {
theme: "slate"
}
}
},
connect: {
server: {
options: {
port: 9001,
hostname: 'localhost',
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-aglio');
grunt.registerTask('default', ['aglio', 'connect']);
};
The problem is that the server exits silently and I don't know why. In the console, it looks like this:
tducin#tducin-home:~/Workspace/duck-blueprint$ grunt
Running "aglio:docs" (aglio) task
>> Written to index.html
Running "connect:server" (connect) task
Started connect web server on http://localhost:9001
Done, without errors.
Can anybody point me on what is wrong with my connect task configuration?
Did you read the documentation of grunt-contrib-connect?
According to the document.You need to set keepalive true if want keep alive the server after grunt tasks compleated.
connect: {
server: {
options: {
port: 9001,
hostname: 'localhost',
keepalive : true
}
}
Keep the server alive indefinitely. Note that if this option is enabled, any tasks specified after this task will never run. By default, once grunt's tasks have completed, the web server stops. This option changes that behavior.
https://github.com/gruntjs/grunt-contrib-connect/blob/master/README.md