How can I download create-react-native-app files manually? - reactjs

I trying to create a react native project, but always it gives me an download error (the create-react-native-app is installed), I try:
create-react-native-app Test
But always in the file ngrok-2.3.0.tgz I get an error. I downloaded the file manually, but I don't know where it goes, I try to put in AppData/Local/Temp (shown in the error text), but when running the command again, it overwrite the file and try to download it over again. Where are the react-native files to which I can put ngrok-2.3.0.tgz manually?

The registry had some issues a few days ago resulting in the same error.
Take a look https://github.com/npm/npm/issues/19816
You can also try doing things with yarn
Offline packages can be done with yarn link ngrok which will indicate yarn/npm to get the local copy of ngrok.

Related

Could not find GeneratedMSBuildEditorConfig.editorconfig during React Native for Windows setup

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.

How to run the NPM RUN BUILD

I have for now 7 days tried to build my ReactJs project but it never works.
quick update,
I can do npm run build like every 50-100th time i run it, I just have to be keep running the command and waiting for it to succeed .
When I do NPM RUN BUILD in vscode I always get the error
(copy plugin) Error: EBUSY: resource busy or locked, copyfile
'L:\react\Greta100Weeks\greta100weeks\notistack\src\index.d.ts' ->
'L:\react\Greta100Weeks\greta100weeks\notistack\dist\index.d.ts'
I tested to build on different locations to rule out that the folder or file was locked. I turn of MacAfee LiveSafe background scanning virus. I don't have any Drive syncing locking folders
I use the Windows 10 Resource Monitor to see if the notistack folder and the files are locked by some process and they are not, it's super strange. I have no backup process on that folder, Mcafee LiveSafe is turned of also
I notice that npm run build works like every 20-30 times i run the command . When I restart computer it worked one time also. It's like something is polling locking the files randomly
Another thing I can see is that the error say that the file "index.d.ts" can't be copied. I then open the notistack\dist\ folder and see a "index.d.ts" file and when I open the file in notepad++ I see this: just a bunch of NULNULNULL..........
Here I try running npm run build on a fresh fork of the notistack in the cmd window
I did what you did. Cloned repo of Notistack. did npm i and then npm run build. it worked for me.
From your screenshot, i tried to match it with mine. i found that probably you haven't installed node modules at proper place. when you clone the repo. it already creates a notistack folder on top of where it is located on your computer.
The differnce i found is, both your paths should partially match till notistack folder. In your ss, JSON is written at perfect place, but typescript path is different from mine.
so from your screenshot, i think you should try doing npm i at
L:\react\Greta100Weeks\greta100weeks\notistack
I hope it makes sense !

React server on browser is not auto-refreshing

I was following this react course from YouTube.
I installed the create-react-app successfully and also ran the localhost server successfully on my browser afternpm start.
But the problem is that whenever I make a change in the component and save, I have to keep refreshing the browser by myself (browser is not refreshing automatically on save). But the browser of the teacher in that video refreshes automatically.
Please help me. Am I doing something wrong? or what should I do?
I think the best option is to use: npx create-react-app your-app-name when creating your apps so you can always have the most updated version. As per the docs: https://reactjs.org/docs/create-a-new-react-app.html
The best option would be to create your project in a C-drive ( any directory/folder in C drive), where your node packages were installed during the first setup of the node. I had a similar issue when my project was in D-Drive's Directory but switching to C Drive's Directory "C:\Users\USERNAME\Documents\ReactProjects\frontend\src" fixed my issue.
There might be different reasons why this is happening. Try one of the following solutions:
1 --> Increase the maximum number of allowed watchers in your linux environment. This is a known issue when running webpack inside of a VM like WSL2, as it happens when you execute npm start. To do so, issue the following commands in your terminal:
sudo nano /proc/sys/fs/inotify/max_user_watches
Replace the number you see with 1048576 and save the file. Then type exit and relaunch the terminal. Try npm start inside of your project folder again.
2 --> If the above didn't work, try setting the CHOKIDAR_USEPOLLING=true environment variable in your linux environment, which will reflect on your react development environment. Normally you would put this in a .env file inside of your project folder, but adding the variable to your .bashrc file will make it work with any React project you are working on. If you are only experimenting with React for now, I would recommend this solution. This change is unfortunately necessary when working inside of a virtual machine like WSL. Add the line export CHOKIDAR_USEPOLLING=true at the end of your .bashrc file. To edit your .bashrc file:
sudo nano ~/.bashrc
Then save the file and exit/relaunch your terminal. Try npm start inside of your project folder again. Hopefully this should fix it.

Umbraco Package (ImageProcessor) Crashing site

So I tried to install a package called 'Image Processor' to our Umbraco build which I later found was incompatible. How do I manually remove this package from the build? I've tried removing all mention of 'ImageProcessor' from the Web.config, packages.config etc still no cigar.
This is the error we're getting.
Check in the /bin/ folder for the Image Processor DLL file. If this file is present, I believe that the application is trying to load it. However, this file requires something from Umbraco.Core which isn't there, so it crashes.
If you find the DLL, try deleting it and reloading the application.
Also, I assume you installed this package through Umbraco. In the future I would recommend using NuGet to install packages, as it allows you to add, update and remove packages without running the application (so if you were to get an error like this again, you would be able to easily uninstall the package).

How can I use Angular 2 with NetBeans?

I have tried every tutorial I could find to try to make a HTML/JS project with Angular 2 working on NetBeans, but none have worked. Maybe is my npm that is bugged (search, for example, doesn't work).
The node_modules folder that is created with npm install is grey on NetBeans and have some errors in some files (I don't know if this is normal). Any .js I try to import from node_modules folder gives the error Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined.
Does anyone have any idea what could I be doing wrong? Or does anyone knows any tutorial that have the code to download so I can compare with what I'm doing and see what is the correct? Every tutorial I have found doesn't have any code to download, just some pieces of codes in the page for explanation.
Sory if this isn't a good question, but I have been trying to make this work since yesterday without success and I'm completely out of idea.
First I recommend to upgrade to the last version of NodeJS and NPM, to minimize the errors in your node_modules folder
Install the Everlaw's Typescript plugin from https://github.com/Everlaw/nbts/releases . If you are using Netbeans 8.1 I think you can install it directly from the Plugins installer. I'm using NetBeans 8.2 and there is no problems installing the plugin manually.
Then on NetBeans go to Tools -> Options -> HTML/JS -> Node.js and write the right Node and NPM Paths and Sources, I would recommend check-on the three check-boxes in that panel.
For a quick start try the QuickStart demo from the angular.io page, it is not necessary make any change in the package.json.
The first time I tried to debug an Angular 2 application I put the index.html file directly in the project folder in order to do not make any changes in the index.html script sources nor change the project files structure but you need to change some properties of the project:
In the project window right click the project and select properties.
In sources change the Site Root Folder using the Browse button and select the project folder (You can ignore the warning that appears).
In Run select Run As: Web Application.
I recommend select Browser: Chrome with NetBeans Connector
Using the Browse button go to the project folder and select index.html as your Start File.
Select Web Server: Embedded Lightweight.
And finally in Web Root write /Your_Project_Folder
run npm install from NetBeans
Click the run button and your web application must open in chrome, if you edit your html or typescript files and save them you could see the changes in the browser in real time without re-debuggind your application and can use the Browser DOM window to explore your elements created from Angular 2.
You still see some errors in your files because NetBeans is not fully compatible with the HTML Angularized syntax. But it runs flawlessly.
You can also run the start script directly from Netbeans to run your project using lite-Server.
Screenshot NetBeans - Angular 2
I would recommend you to install the angular cli: npm install -g angular-cli#webpack
Fore more infos regarding this tool, take a look here: https://cli.angular.io/
Then create a new Angular2 app with ng new <app-name>
This will create a complete and working Angular2 application in the current folder.
cd <app-name> and start the app with ng serve.
Check your new created app in your browser on localhost:4200.
If this works, you can try to get started with your NetBeans! :)

Resources