I have implemented the Routing in my React APP. Refresh was not working on my local machine then I Followed the below URL to fix that:
React-router urls don't work when refreshing or writing manually
I used below code:
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true
},
this code fix the things on my local machine, but when I moved my changes over the server(staging) it again start throwing me error. Then I tried number of things in devServer, but I am not able to find the exact that could solve my issues, I am new bee in ReactJs that's why I am facing this. I have tried below code as well:
devServer: {
inline: true,
port: 80,
hot: true, //Live-reload
inline: true,
//port: 3000, //Port Number
host: 'http://reachjsapp.com/', //Change to '0.0.0.0' for external facing server
proxy: {
'^\/fetchUser|editStaff': {
target: 'http://reachjsapp.com/',
rewrite: function (req) {
req.url = req.url.replace(/^\/api/, '');
}
}
},
historyApiFallback: true,
contentBase: './',
// hot: true,
}
and this as well
But no luck, Please help me.
I fixed it.. yeahhhhh
I have added the following lines in web.config file, and it works:
<system.webServer>
<httpErrors errorMode="Custom" existingResponse="Replace">
<remove statusCode="404" subStatusCode="-1" />
<error statusCode="404" path="/" responseMode="ExecuteURL" />
</httpErrors>
Happy Coding.. :)
Related
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 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'
},
The project is https://github.com/easychessanimations/htmltest .
I studied all the answers related to webpack dev server auto page reload.
When I do npm run start locally, it auto builds / reloads page on source change, so the dev server config must be right:
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 8080,
hot: true,
watchContentBase: true,
watchOptions: {
poll: true
},
},
When I do the same from the gitpod terminal, online, the page is auto rebuilt, but not auto reloaded ( no matter whether I open it in a gitpod window or in a full blown browser tab ). If I reload manually, the changes are reflected.
What extra config do I need to make it work under gitpod?
You can play around with it using this link ( of course first you need to authorize gitpod with your github account ):
https://gitpod.io/#https://github.com/easychessanimations/htmltest
in the gitpod terminal type:
npm install
npm run build
npm run start
Webpack HMR needs to be configured accordingly.
Adding the following three properties to the webpack.conf does the trick:
devServer: {
// make HMR work - start
host: '0.0.0.0',
disableHostCheck: true,
public: require('child_process').execSync('gp url 8080').toString().trim(),
// make HMR work - end
contentBase: path.join(__dirname, "dist"),
port: 8080,
hot: true,
watchContentBase: true,
watchOptions: {
poll: true
},
},
Here is a working snapshot:
https://gitpod.io/#snapshot/daa14130-2f44-430d-93ab-2d4ed980fc2c
I have my React webpack devserver set up like the following:
devServer: {
port: 3000,
historyApiFallback: true,
proxy: {
'/api': 'http://localhost:8080'
}
},
Now I also need to add disabledDotRule: true to the historyApiFallback.
Can someone help me to do that?
If I try just to change it to
historyApiFallback: {
disableDotRule: true,
},
I get the following ECONNREFUSED error:
Error occurred while trying to proxy request /api/.../ from localhost:3000 to http://localhost:8080
I guess the problem is that historyApiFallback: true is missing. How do I keep that while also adding disabledDotRule: true?
Apologies, I misunderstood your question.
Could you try the following things and see if any work:
(1) Replace "http:localhost:8080" with "http://[::1]:8080" like so:
proxy:{
"/api":"http://[::1]:8080"
}
(2) Run the API on a different port like 8081 and see if you get the same error
I'm running react with HMR using webpack. When a function is deleted in a server or used shared service is deleted, no errors are emitted, neither in the console nor on the terminal.
This error can not be seen even during the build process.
I've waisted at least a day trying to find a solution for it. Any help is appreciated.
thank you.
const DEV_SERVER = {
contentBase: PATHS.public,
hot: true,
open: true,
hotOnly: true,
historyApiFallback: true,
overlay: true,
port: 3000,
// stats: 'verbose',
// proxy: {
// '/api': 'http://localhost:8888'
// },
More Details
if i have user.service.ts imported in an index.ts file and use in all the other files, then i delete the user.service.ts file.
Expected Behaviour: An error with module not found.
Current Behaviour: Nothing is showing in the console or terminal.
React v 16.13
Webpack v 4.41
Check the source maps used, this worked for me:
devtool: 'cheap-module-source-map'
Did you try the error-overlay-webpack-plugin?
const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");
module.exports = {
plugins: [new ErrorOverlayPlugin()]
);
https://www.npmjs.com/package/error-overlay-webpack-plugin