Empty visual studio react typescript template - reactjs

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

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.

MSIX Include Additional Required Files

I have a simple WinForms app that I'm trying to package with MSIX. The app itself requires additional files that when I build the MSIX App Project doesn't copy/include.
Specifically this LIBVLC folder that gets included during the WinForms app build itself.
If I manually copy that folder over into the AppX build folder, everything works. Obviously I'm trying to automate including that folder.
Folder manually copied over in screenshot below:
How can I accomplish this? GitHub minimal repo:
https://github.com/aherrick/MSIXWinFormsLIBVLC
I suspect that this line is your issue : https://github.com/aherrick/MSIXWinFormsLIBVLC/blob/0e717828a16e796a7a27e415cf45d33a50327da9/MSIXWinFormsLIBVLC.AppPackage/MSIXWinFormsLIBVLC.AppPackage.wapproj#L80
The nuget package isn't really well understood by the build tools as those are native files that we collect "before build". It seems to cause issues when a project references a project that references the nuget package, and the usual workaround is to reference the nuget package directly in the topmost project.
Is it possible to reference a nuget package in a .wapproj ?
If it isn't, that's an issue for this repository https://code.videolan.org/videolan/libvlc-nuget/ . Contributions welcome

Visual Studio 2019: Browser not reloading after save

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.

Failed to decode downloaded font (Semantic UI React) on production build

I am developing a project with frontend on ReactJS and backend on Java (Spark framework). To build server with frontend, I build the frontend using yarn build and then, using Maven, copy contents of build folder to src/main/resourses/public folder, from which Spark serves all static files. Recently, I moved to CRA and since then all icons disappeared on production build.
When I run the project on webpack-dev-server, everything works fine. All icons are loaded as you can see below:
But when I build production version of the frontend and copy it to the public folder, I get an this error:
The same fragment on production build:
My thoughts are that either icon fonts are copied incorrectly at some point, or the server cannot properly load the fonts, which is less probable as they were loaded earlier when I did not use CRA.
Also, it seems that fonts do exist in the website, because they appear as Sources in Chrome Dev Tools. However, as I said they might be loaded improperly.
P.S. I'm using the following versions of Semantic UI. I generated semantic folder in src directory using npm i semantic-ui.
semantic-ui: ^2.4.2;
semantic-ui-react: ^0.85.0
I found an issue. The problem was that after I built the frontend, Maven incorrectly copied the production build to the public folder
The solution was found here

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