Updating create-react-app proxy settings from 1.x to 2.x - reactjs

I've picked up a legacy project, and have been asked to update the create-react-app package from 1.0.3 to the latest.
The problem is, the new proxy settings aren't working; requests that were previously going to my/resource.do are just returning index.html
As suggested in the docs (https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually), I took the 'proxy' object in package.json and converted it to instructions in a file called setupProxy.js. The new js file is definitely being read; I just can't get it to work.
Can anyone see where the mistake is here? This is exactly as specified in the docs, but for some reason requests that worked before are now failing.
Any help greatly appreciated
Before (in package.json)
"proxy": {
"/api": {
"target": "http://localhost:9000"
},
"/some/thing": {
"target": "https://example.org:8452/",
"secure": false,
"changeOrigin": true
},
"/some": {
"target": "https://example.org:7324",
"secure": false,
"changeOrigin": true
},
"/.*": {
"target": "https://example.org:8452/",
"secure": false,
"changeOrigin": true
}
}
After (in setupProxy.js):
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use('/api', proxy({ target: 'http://localhost:9000/' }))
app.use('/some/thing', proxy(
{
target: 'https://example.org:8452/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
app.use('/some', proxy(
{
target: 'https://example.org:7324/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
app.use(proxy('/.*',
{
target: 'example.org:8452/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
}

Related

Nx advanced reverse proxy configuration

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.

SSE doen't work with vue-cli devServer proxy

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

Unexpected token < SystemJS Production build

I am using AngularJS writen in typescript and SystemJS module builder.
My app's main file (app.ts) is located inside Scripts/App.
SytemJS production configuration from gulpfile.js:
gulp.task("deploy", ["ts", "vendorjs", "app-css"], function (done) {
return systemBuild("./Scripts/App/app", "./dist/js/main_" + build + ".min.js");
});
function systemBuild(sourcepath, targetPath, cb) {
var builder = new Builder();
// Collection bundling
builder.config({
defaultJSExtensions: true,
map: {
"ts": "node_modules/plugin-typescript/lib/plugin.js"
},
baseURL: "./Scripts",
transpiler: "ts",
typescriptOptions: {
module: "system",
target: "es5",
sourceMap: true,
inlineSourceMap: true,
inlineSources: true,
resolveTypings: true,
emitDecoratorMetadata: true,
noImplicitAny: true,
typeCheck: true, // also accepts "strict"
tsconfig: true // also accepts a path
},
packages: {
"app": {
defaultExtension: "ts"
}
}
});
return builder.buildStatic(sourcepath, targetPath, {
minify: true,
mangle: true,
sourceMaps: false,
sourceMapContents: false,
globalDefs: { DEBUG: false }
});
}
After running gulp default, I am getting 'Uncaught SyntaxError: Unexpected token <' error. Could anybody tell me what I am doing wrong?

webpack-dev-server proxy not working

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
},
}

JSHint unable to find/interpret .jshintrc file

I am using WebStorm IDE and created my angularJS project. I am also using grunt, and am using grunt-contrib-jshint. I had some options preconfigured in my .jshintrc file which were already in the angular-seed repository I used to create the project:
{
"strict": "global",
"node": true,
"globals": {
// Angular
"angular": false,
// Angular mocks
"module": false,
"inject": false,
// Jasmine
"jasmine": false,
"describe": false,
"beforeEach": false,
"afterEach": false,
"it": false,
"expect": false,
// Protractor
"browser": false,
"element": false,
"by": false
}
}
When I run grunt jshint on terminal, I get many errors, all of them related to the errors which arise when options are not set properly. However, when I copy these options and put them in my Gruntfile, everything works like a charm.
jshint: {
files: ['Gruntfile.js', 'app/**/*.js'],
options: {
// options here to override JSHint defaults
node: true,
globals: {
// Angular
angular: false,
// Angular mocks
module: false,
inject: false,
// Jasmine
jasmine: false,
describe: false,
beforeEach: false,
afterEach: false,
it: false,
expect: false,
// Protractor
browser: false,
element: false,
by: false
}
}
},
Basically, what I've understood is jshint is not reading options from the .jshintrc file. How do I solve this issue?
Set the option jshintrc for your jshint task to true.
If set to true, no config will be sent to JSHint and JSHint will search for .jshintrc files relative to the files being linted.

Resources