I just started learning about React.js and I have been noticing in my developer window (F12) some spamming errors.
These were all the steps I did:
Open Visual Studio 2019
Create a project ASP.NET Core with React.js
Choose .Net Core 5.0
Left the option "Configure for HTTPS"
I pressed Play after the project finished loading
Clicked the F12 key and I noticed the errors popping up in the Console
I have gone through a lot of forums where people have posted about this issue but all of them have to do with people setting up their own "WebSocket Handlers". These people are actively working with web socket code. I haven't even learned web sockets yet. I found one website that remarked that I didn't have my script debugging enabled. So I did that but I still see the same error.
I notice in the error log that it points to WebSocketClient.js, line 16. But all that is located in ClientApp->node_modules and I have nothing to do with that directory or anything to do with those files.
My question is this: is the error happening because my visual studio project is not configured properly? If so, how do I fix my project in order to correct this issue? Many thanks in advance.
It's an issue with cra5 aka react-scripts v5:
To solve you need to add a .env file in the same folder where package.json is present.
In .env file put WDS_SOCKET_PORT=0, '0' means that it will dynamically pick whatever port on which local server is running.
Also need to add/uncomment the middleware UseReactDevelopmentServer in Startup.cs file. So it can be used as proxy to node dev server as v5 not using react-web-utils directly.
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
Related
I am working on a React app that's running on AWS Amplify. My React app is using the react-router-dom library to route to different components. After running amplify publish in the CLI, at the root of the app (obktraining.com) everything is fine in the browser, I can also route to other components in the app just fine as well. But when I refresh my browser while I am on a route (obktraining.com/menu), I get an Access Denied error message.
I have found other posts about similar issues regarding rewrites and redirects in Amplify, but the solutions given do not work for me.
Here is an image of the error:
My Amplify app rewrites & redirects :
Again, the error only displays when I refresh on a route (obktraining.com/menu or obktraining.com/drinks) not on obktraining.com. Is the issue being caused by the react-router-dom library or is it an issue with Amplify settings? I am not sure where to go from here.
I have been facing the same error since days.The error is being caused by the amplify settings. The solution is simple,
Edit your Rewrites and redirects by adding a new rule.
source address = </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
target address = /index.html
status = 200 (Rewrite)
Country code can be left blank
Save and try refreshing your app again. It should probably work.
use this for reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Then you can just put in (as Dhruv Godambe posted above)
</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
as the Source address and
/index.html as your target address
You can navigate to 'rewrites and redirects' in your app from AWS Amplify console and click on edit and select open text editor, and add this piece of code in your array(if present) else put the array braces around it.
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
Reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Reference:
https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html
I have faced the same problem.
I was using Manual Zip File (Compressed) download (wrong).
Here is how to deploy manually correctely:
Run this command
npm run build
Now a build folder will be created.
2. Compress the content of this folder
Not the content of the whole project.
You chnage directory to the build folder and Compress the content in side.
3. Upload that compressed file Inside the build directory
Now this should work just fine.
:)
The correct rule should be like this:
Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Status: 200
I was getting the an Access Denied error message too. The error went away when I followed the documentation described in the answer above, but then I got the white screen problem described above too.
Reviewing the steps I noticed the auto-complete for the "Destination Address" listed in the "Rewrites and redirects" settings was /. When I tried using / as the "Destination Address" instead of /index.html I no longer got the white screen and got the expected page content.
Sharing what I found in case this helps others who are seeing a white screen after fixing the error with the rewrite rule described in the answers above. (Note as of Nov 2022 the "Rewrites and redirects" setting page uses the wording "Target Address" instead of "Destination Address".)
I have faced the same problem. I was zipping build folder, but not the contents within the zip folder.
Here is how I fixed it:
Run build command
npm run build
Now a build folder will be created inside your project directory.
Open build folder.
Compress the contents of build folder, and not build folder.
Now upload this new zip created from sub files and folders from build folder.
App will run fine on AWS Amplify.
I got the same error,
I zipped the build folder first then uploaded it and got that error,
but when I just uploaded the folder without zipping it, it worked fine !! weird!!
in my application I used the port 8080
I have created a project with MVC and Angular.js
My app works fine from visual studio.
But when I Publish it in IIS i get error messages in console saying there are some issues in angular.min.js file.
Console error is : Unknown provider: nProvider <- n
I have tried to publish code both in debug and release modes. Nothing is working.
It is working fine from the visual studio.
[
I faced a similar problem and found that when I try to access the angular.min.js directly in the browser file then it was giving an error,
base_url/node_modules/angular/angular.min.js
HTTP Error 404.8 - Not Found
The "request filtering module" is a feature in IIS 7 and above. When IIS rejects a request based on this feature, the error code logged is 404.8. This feature allows you to define which segments are "Servable".
If this is the error you are facing then follow these steps to resolve it.
Open the IIS Manager on your Windows server.
Click the website on which you need to modify your settings.
Double click "Request Filtering" from the IIS section and go to the "Hidden Segments" tab.
Check whether the folder containing (node_modules) angular.min.js which you are trying to access is under the "Hidden Segments".
If it is present, right-click the particular folder and then remove it.
I am in the process of deploying a dynamic, React.js app to Heroku and wanted to test it out by using 'heroku local' to see if it works before pushing it to Heroku. Everything seemed to be working fine with the server - my database console.log message logs to the terminal signifying everything is going well - but when I try to access the website which is on localhost:5000, I get an error message of 'Cannot GET /' and the console prints a message saying , 'Failed to load resource: the server responded with a status of 404 (Not Found)'. My React.js files are all within the build folder which in conjunction with all of the other files, were pushed to git and commited, but for some reason my files are not showing up. I would greatly appreciate if someone could help me determine what went wrong. Sorry if my question is a little vague; please let me know if I can clarify something in better detail as I am fairly new to programming.
I've added a proxy to one of my package.json files to help with url routing; possibly this could be causing the issue?
Also, if it helps at all, a photo of my folders within Visual Studio code are listed below:
I'm trying to push my Angular.js SPA to an IIS7 server but having issues. The application appears to load halfway (as my views and templates are loaded fine), but then stops functioning like so:
As you can see there is no errors in the console...and just for good measure I checked Fiddler which also is having no problems:
The SPA works completely fine on my local web server and only seems to have issues when pushed to IIS. Any thoughts would be greatly appreciated!
EDIT:
Looks like the problem was with angular-csp.css not being properly included when running grunt build -- this was resolved by adding the following to my project's bower.json file:
"overrides": {
"angular": {
"main": [
"angular.js",
"angular-csp.css"
]
}
}
Have you checked the Mime Types on your IIS server? If IIS doesn't know about a particular file type it will often just ignore it.
Also check that you have CORS enabled if you are requesting data from a host other than the one you are deploying to.
Finally, check that you have correctly configured IIS to work with HTML5mode (if you have it enabled. See How to: Configure your server to work with html5Mode
Alright after coming at this with a fresh mind it appears you are correct--everything is working proplery--except my ng-show directives.
Obviously this is because angular-csp.css was not included when running "grunt build."
Since it's not in the angular bower.json main section, I needed to add the following to my projects bower.json:
"overrides": { "angular": { "main": ["angular.js", angular-csp.css"] } }
which fixed the problem.
I am trying to follow the tutorial on creating a MEAN app on scotch.io.
I am using the WebStorm IDE and after completely following through I am stuck with a problem that seems to emerge from WebStorm. If I click on the "Open in Chrome"-Button in the IDE I am referred to:
localhost:63342/scotch_mean_tutorial/views/index.html
However, the actual port that I specified in my server.js is 8080 file:
// listen (start app with node server.js) ======================
app.listen(8080);
console.log("App listening on port 8080");
I have built a node API and it works when I go to:
http://localhost:8080/api/todos
However, clicking on the "Open in Chrome" through my WebStorm IDE uses a different port (i.e. 63342) and thus I am left with the following error:
GET http://localhost:63342/api/todos 404 (Not Found)
I am not sure how to resolve this? Any ideas?
You need to create a javascript debug run configuration with the correct URL (http://localhost:8080/api/todos) and use this configuration to open your URL in browser. Another option: specify this URL in Live Edit/Browser tab of node.js run configuration you use to run your server.js and tick 'after launch' checkbox to automatically start the browser with this URL on server start.
In Webstorm 9, you can configure the port for debugging apps. In Preferences:
Build, Execution, Deployment > Debugger > Built-in Server Port