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
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?
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.
I successfully configured ASP.NET5 with Webpack4 to use HMR previously. Now, I tried to upgrade all to new versions and I couldn't make the HMR work at all.
The problem is: when I start (debug) the ASP.NET web app it shows me a '/ not found' page. It looks like the UseProxyToSpaDevelopmentServer redirects all requests to the Webpack DevServer which has no index.html at all because I just want to use it to provide HMR functionality for the ASP.NET site.
Here are all version changes:
net5.0 > net6.0
webpack: v4.43.0 > v5.64.4
webpack-cli v3.3.12 > v4.9.1
webpack-dev-server v3.11.0 > v4.6.0
The ASP.NET code is the same:
app.UseSpa(spa =>
{
spa.UseProxyToSpaDevelopmentServer("http://localhost:8888");
});
The ASP.NET web site url is: https://localhost:44331
The DevServer configuration changed because there are lot of changes between v3 and v4 (https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md).
This is the previous (which was working) devServer config:
devServer: {
compress: true,
contentBase: false,
hot: true,
port: 8888,
public: 'https://localhost:44331',
publicPath: '/dist', //this is a subfolder under the wwwroot
serveIndex: false,
},
This is the new (which is not working) devServer config:
devServer: {
hot: true,
port: 8888,
host: 'localhost',
client: {
webSocketURL: 'https://localhost:44331', //V3: devServer.public
},
devMiddleware: {
publicPath: '/dist', //V3: devServer.publicPath
},
static: false //V3 ?
}
I'm not sure about the 'static' property (the contentBase was false previously) but I don't really think that can cause the problem.
Try this I think?
devMiddleware: {
index: false, // If false (but not undefined), the server will not respond to requests to the root URL.
publicPath: '/dist'
},
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)
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
},
}