I'm making a React application and I'm currently using Visual Studio to run the program and VSCode to edit the code.
When I used to save changes on VSCode, it automatically refreshed the browser with the changes I did. But recently it stopped working and now I have to make a manual reload (F5).
Here's what I've tried so far without success:
Updated both programs to their latest version.
Deleting the file and downloading it again from Gitlab.
In Visual Studio: Tools > Options > Environment > Documents cheked the boxes to detect changes outside enviroment.
Delete and generate again the .vs folder
Tried on a different browser
Tried making changes in Visual Studio
And so on ...
I tried with a similar app I built and that one was working fine and using the same properties.
There's currently two of us working on the project, but this issue only happens to me.
I recommend running the React from VSCode, using npm start / yarn start from command line in the directory.
Try changing something and see if the browser automatically reloads.
Related
I am trying to set up my first React Native for Windows project. I followed the steps in this document to install React Native for Windows. I navigated to the location I wanted my new project to be and then used the command
npx react-native init ProjectName
Then I navigated to the new folder ProjectName and used the command
npx react-native-windows-init --language cs --overwrite
After all that finished, I located the Visual Studio solution found inside ProjectName/windows and opened it in Visual Studio 2022. I set it to Debug x64 and tried to run the solution. However, I got the following error:
Could not find a part of the path '[PATH]\ProjectName\node_modules\react-native-windows\Microsoft.ReactNative.Managed.CodeGen\build\x64\Debug\Microsoft.ReactNative.Managed.CodeGen\netcoreapp3.1\win-x64\Microsoft.ReactNative.Managed.CodeGen.GeneratedMSBuildEditorConfig.editorconfig'.
I checked the location indicated, and the .editorconfig file is there, so I don't know why it can't find it, much less what the file is or why it is needed. I ran a search on the project folder and the only reference to this file I could find was in an FileListAbsolute.txt file, so I don't even know where Visual Studio is getting a reference to it. If I do a clean and rebuild on the solution, the build finishes successfully. But if I try to build the solution following that rebuild, or if I simply try to run the solution (regardless of whether I cleaned the solution first), I always get the above error. I've tried searching online for the error, but nothing I find ever has anything to do with my problem.
Why am I getting this error, and how do I resolve it?
I had the same issue and I think, this has to do with VS 2022 only supporting .NET v6+.
So I reinstalled VS 2019, opened the solution in there, set it to x64 and it rebuilt just fine.
Then I could start the project with yarn windows or react-native run-windows respectively.
i'm trying to create typescript app in Visual Studio 2022. I'm choosing "React standalone template" that uses typescript. After choosing it - console that install all the files needed appear.
After what i see empty project:
Empty Project
If i press on button "Show all files" i can see files related to Typescript project:
Hidden files
But when i try to include them to project - nothing happens though and they still look like hidden files (but i can see that files are added in csproj file). When i do "npm start" - project load localhost site correctly. Is there any way to include those files to see them in a correct way included to my project?
I tried resetting Visual studio settings, installed Typescript SDK Kit, reloaded project and VS, reloaded my PC, deleted project and created new one instead. Node.js and NPM are installed on my PC. What else can be the issue? I've found youtube video about Angular standalone template in VS and everything seems to be added to project by default, so i believe this is not expected behaviour that files are unloaded on my environment
I have a Visual Studio project with a simple React ClientApp that I'm using for testing. The client app was working well until suddenly it wasn't. (It may have broken when I added a static wwwroot folder to the project, but that has since been removed--I was testing with a different React App at the time so I wasn't paying much attention to whether my admin utility app was still working.)
Now for the life of me I can't get webpack-dev-server to serve the React app. I've tried:
/invalidate,
npm build
Changing the ports the server is running on
Hitting it from a different browsers.
npm cache clean --force
Reverting back to a much earlier version of the project when this front end was definitely working
Strangely enough if I run npm start directly in the ClientApp folder the app runs fine. For workflow reasons, and for reasons of just wanting to understand how this works, I'd like to keep using the VS launched version.
The symptom is that it simply displays the Index.html page and does not load the app. In Chrome it keeps failing to load 0.chunk.js with error ERR_HTTP2_PROTOCOL_ERROR. In Firefox this there are no errors loading this file, but only the index.html file displays.
I can navigate to /webpack-dev-server and everything looks good. I can click through to all of the individual files from there.
Any ideas for how to diagnose this would be fantastic!
FWIW - if anyone runs into this issue, the solution was to simply update Microsoft.AspNetCore.SpaServices.Extensions to the latest version (in this case 5.0+).
I started a new developer role a few days ago and made some environmental changes to adapt for work. Since then, my hot reload/fast refresh has just stopped working entirely. Changes don't show up even if I refresh the page manually. Only shows changes when I stop the dev server and restart it with 'npm run dev'. The triangle indicator at the bottom right should be active, showing active reload of the window (this no longer shows up consistently either, and if it does the page gets reloaded, but alas the proposed changes aren't visible)
Context:
It has this effect on all NextJS and react applications of mine. Even running a basic project template off the NextJS examples page shows no hot reload working.
I researched this issue and it seems wrong imports (e.g. importing components using lowercase or files in the pages directory being capitalized) can cause this, but I combed through the code and can't spot any issues (of course, I could be missing it but my codebase is over 300 files).
Service workers in the background can cause issues, but I cleared my browser of all of them to be sure and it still doesn't fix it.
I installed ngrok for tunneling for work purposes and docker-compose to handle the work dev. environment.
Made sure I'm using the latest Next version. Even deleted node_modules and ran npm install. Deleted .next and the out folder and still no luck.
Anybody have any ideas or clues to what I should try next? Is it related to the stuff I installed for work? Something related to VS code or WSL2? Seems so puzzling it kind of just happened overnight. Thanks for any insight or advice!
System information
OS: Windows (WSL2 virtualization for VS code)
Browser: Chrome
Version of Next.js: 10.0.3
Version of Node.js: 14.8.0
Deployment: npm run dev for development work; amplify publish for AWS hosting
The problem is with WSL2. I use WSL2 inside VS Code; which is a big performance upgrade in the Linux environment. The problem is WSL2 is actually in a 'virtualization' and thus cannot send information from VS Code AND the browser (localhost:3000) at the same time.
It's a big issue they are working on and there is no fix yet for it. That's why fast refresh doesn't work because localhost is not receiving the changes being made. Either proxy through or revert back to WSL1 https://github.com/microsoft/WSL/issues/4769
Solution provide by OP on question section
Add a .env file or a .env.local file to your root and put this line on it:
WATCHPACK_POLLING=true
Now, restart your server.
Thanks I encounter the same issue with WSL2. I just switch to windows terminal and it works.
If you run Poweshell as administrator and run
wsl.exe -l -v
This will give you th eversion of wsl your distros run on.
I am personally using Ubuntu, and this is the output
Ubuntu Running 2
docker-desktop Stopped 2
docker-desktop-data Stopped 2
To switch to wsl 1,
Run
wsl.exe --set-version Ubuntu 1
and if you wanna switch back,
run,
wsl.exe --set-version Ubuntu 2.
This worked for me.
In my react projects, I just add in my .env file at the root project folder the values
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
and it works! enjoy!
The problem is with WSL2. I use WSL2 inside VS Code. But React JS and Next JS projects don't auto-reload. So, add a .env or .env.local (recommended) file to your root and put these lines on it:
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true
Now, restart your server.
My friend developed a basic Registration page using Angular.js and bootstrap in Visual studio. He sent me the 'log' folder which contains all the dependencies and files related to the project.
I don't have visual studio and want to work on the project without the use of visual studio.
When I try to Open up the 'index.html' page, its showing everything except the registration form itself.
How do I run the page without using Visual Studio?
You don't need Visual studio to run an Angular app. It's all Javascript and you can run it locally. What I suspect is that your code requires a local server running. If I am correct, then your question is really, how do I get a localserver running?
It's been answered before here: How to create a localhost server to run an AngularJS project
Long and short, install node.
Then
Install: npm install -g http-server
Then
run http-server -o
Check console for errors. Check if angular and other files are loaded.