How to run dev server in debug mode? - javascript

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.

Related

WebpackDevServer Proxy Setup

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.

Grunt connect (grunt-contrib-connect) livereload: Fatal error: Port 8000 is already in use by another process

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.

http-proxy-middleware does not forward the full path

I am trying to configure BrowserSync to work in server mode and to proxy my API requests to the backend that runs on the same machine on a different port, using http-proxy-middleware. I use Gulp to launch BrowserSync.
BrowserSync runs on port 8081. My backend runs on 8080.
Here is how I create the proxy middleware :
var proxyApi = proxy('/api', {target : 'http://localhost:8080/api', logLevel : 'debug'});
And here is how I run BrowserSync from my Gulp task :
// Init BrowserSync with proxies as middleware and based on the dest dir
browserSync.init({
open: true,
port: config.proxyPort,
server: {
baseDir: config.destDir,
middleware: [proxyApi]
},
browser: "google chrome"
});
The output :
[HPM] Proxy created: /api -> http://localhost:8080/api
Everything looks good.
But When I hit e.g. http://localhost:8081/api/users, the output is :
[HPM] GET /api/users/123 -> http://localhost:8080/api
...And my client gets a 404 error because /api on its own does not match anything on the backend.
From what I understood from the doc and examples, the target should actually be http://localhost:8080/api/users/123
Why is the rest of the path (in this case /users/123) being left out ?
Using the following versions :
"gulp": "3.9.1",
"browser-sync": "2.16.0",
"http-proxy-middleware": "0.17.1",
The prependPath option is true by default. This option is provided by the underlying lib: http-proxy.
prependPath: true/false, Default: true - specify whether you want to
prepend the target's path to the proxy path
There are two ways to fix the issue:
1.) Change your target from 'http://localhost:8080/api' to 'http://localhost:8080'
var proxyApi = proxy('/api', {target: 'http://localhost:8080', logLevel: 'debug'});
2.) Alternatively you can set the option prependPath to false.
var proxyApi = proxy('/api', {target: 'http://localhost:8080/api', prependPath: false, logLevel: 'debug'});

grunt connect exits instead of serving local files

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

Why won't my grunt proxy work? - Grunt

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' }
}]

Categories

Resources