Migrating a react application to an Nx integrated workspace, and having an issue with advanced proxy configuration.
I understand that for a simple proxy...
Specify the proxy.conf.json file
"serve": {
"executor": "#nrwl/webpack:dev-server",
"defaultConfiguration": "development",
"options": {
"verbose": true,
"buildTarget": "ydsca:build",
"hmr": true,
**"proxyConfig": "apps/ydsca/proxy.conf.json",**
"ssl": true,
"sslKey": "certs/localhost.key.pem",
"sslCert": "certs/localhost.crt.pem"
},
Implement the proxy.conf.json file, e.g....
{
"/caconnect/common/*": {
"target": "https://127.0.0.1:9443",
"secure": false,
"logLevel": "debug"
}
}
This works without any issues, however, the current React application uses "http-proxy-middleware" and a more advanced setupProxy.js file (wildcard matching such as "/**/common/" for any patch that contains /common/):
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
[
'/**/common/',
'/**/commonClassic/',
'/**/ydscaCommon/',
'/ymca',
'/staff'
],
createProxyMiddleware({
//Must use 127.0.0.1 as for some reason, localhost stopped working in node versions > 16
target: 'https://127.0.0.1:9443',
//Necessary for https with self signed certificates
secure: false,
changeOrigin: false,
//Additional logging stuff!
onProxyReq: function onProxyReq(proxyReq, req, res) {
// Log outbound request to remote target
console.log('--> ', req.method, req.path, '->', proxyReq.baseUrl + proxyReq.path);
},
onError: function onError(err, req, res) {
console.error(err);
res.status(500);
res.json({error: 'Error when connecting to remote server.'});
},
//logLevel: 'debug'
})
);
};
How can the same advanced proxying be configured in Nx?
Tried changing proxyConfig": "apps/ydsca/proxy.conf.json" to proxyConfig": "apps/ydsca/setupProxy.js", but it doesn't seem to like javascript files for proxy configuration!
Any suggestions?
Thank you.
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 am trying to proxy requests with craco config. however the proxy seems to be ignored. Why is it not working?
I have a create-react-app project that I started using:
npx create-react-app check-proxy-config --template typescript
and I've added craco to it:
npm i -D #craco/craco
In addition I defined a proxy in craco.config.cjs file:
module.exports = {
webpack: {
devServer: {
logLevel: "debug",
proxy: {
"/api": {
target: "https://<any Domain whatsoever>",
logLevel: "debug",
secure: true, // false
changeOrigin: true, //false
bypass: function(req, res, options) {
console.debug("bypass");
},
onProxyReq: function(proxyReq, req, res) {
console.debug(`Proxying request: ${req.originalUrl} => ${proxyReq.path}`);
}
}
}
},
The request I'm sending from the browser is:
http://localhost:3000/api/something
None of the console.debug statements is printed. Why? how can I make the proxy work?
The configuration worked after checking in the backend server i was able to ensure there was no issue with the config, hoewever the "on" methods (i.e. onProxyReq, etc) are not being called
I recently move from vue-cli 4.5.x to 5.0.x.
Since this upgrade it seems Server Sent Events (SSE) doesn't work any more with the WebPack Dev Server.
(I'm currently using vue-sse)
Note in production it works perfectly.
My devServer config looks like :
devServer: {
proxy: {
"/api": {
target: "http://localhost:8080",
ws: true,
changeOrigin: true,
},
},
},
It seems possible workarounds are :
Disable compression in the webpack devserver config.
Send Content-Type: no-transform in the response header.
(source : https://composed.blog/sse-webpack-dev-server)
I didn't test the 2. way but the 1. works for me.
devServer: {
proxy: {
"/api": {
target: "http://localhost:8080",
ws: true,
changeOrigin: true,
},
},
// To disable compression :
compress: false
},
If this doesn't help maybe you face this similar issue : https://forum.vuejs.org/t/server-sent-events-are-not-working-with-vue-cli-devserver-proxy-and-node-16-0/125450
I have ejected react scripts, and I have the following in my setupProxy.js.
module.exports = function(app) {
app.use(
proxy({
changeOrigin: true,
logLevel: "debug",
onProxyReq: function onProxyReq(proxyReq, req, res) {
console.log(
chalk.red(
'Request'
)
);
},
onError(err, req, res) {
console.log(err);
},
secure: false,
target: "http://www.google.com"
})
I would expect the above to proxy, and log every request going out from the react app, but this is not the case. Is there a config that I need to add in Webpack ?
Thank you
My app uses a Python backend so when I'm running locally I need to proxy my requests to a different port than what Webpack is running on.
I've tried several different ways of making this work:
devServer: {
contentBase: outDir,
proxy: [
{
path: "**",
target: "http://localhost:8000",
secure: false,
bypass: function(req, res, options) {
if(req.url === '' || req.url === '/') {
res.statusCode = 302;
res.setHeader('Location', '/a/');
return '/a/';
}
var frontend = new RegExp("^\/$^|\/a\/index\.html|^\/a\/|^\/a$|^\/styleguide");
if (frontend.test(req.url)) return req.url;
}
}
],
// serve index.html for all 404 (required for push-state)
historyApiFallback: true,
},
And this:
proxy: [{
context: '/',
target: 'http://localhost:8000',
}],
Both of those will at least show a message similar to this when it starts up: [HPM] Proxy created: ** -> http://localhost:8000. When I look at the docs and do something like this, it doesn't work either (I don't even get a message about the proxy running):
proxy: {
"/": "http://localhost:8000"
}
Is there something obvious I'm doing wrong? I'be been trying every combination that I can think of to make it work.
Try to add changeOrigin: true. Don't forget to change API pattern.
proxy: {
'/api/**': {
target: 'http://localhost:8000',
secure: false,
changeOrigin: true
},
}