Creating a (.NET 6 based) website project with ASP.NET Core and React (TypeScript) in Visual Studio 2022? - reactjs

I have been trying to set up an ASP.NET Core + React (TypeScript) web app project in Visual Studio 2022, but couldn't succeed in doing so. There are no proper stacks/suites(?) in the Visual Studio 2022 create project dialog (File > New > Project...) that suit my needs.
I then tried what these docs say - and it works - but when I do the same for React TypeScript (i.e., using Standalone TypeScript React Template instead of Standalone JavaScript React Template) it doesn't work because this template doesn't have an Add integration for Empty ASP.NET Web API project. option in its setup (but the JavaScript template does).
How do I create an ASP.NET Core + React (TypeScript) project then?
I did see some modified and new files when the ASP.NET Core Web API integration option was enabled during the React.js (not TypeScript) setup. Can I copy those ASP.NET Core Web API integration files and their content, re-write the JavaScript files in TypeScript, and add those files (*.ts instead of *.js, etc.) in the TypeScript template? Or is there any other (official) method to properly set up an ASP.NET Core + React (TypeScript) project in Visual Studio 2022?

This is the guide do you need, just a consideration I changed this piece of code in aspnetcore-react.ts
fs.writeFileSync(
'.env.development.local',
`BROWSER=none
HTTPS=true
SSL_CRT_FILE=${certFilePath}
SSL_KEY_FILE=${keyFilePath}`,
);
BROWSER=none Start without opening url in the browser because should be opened by .NET proxy
HTTPS=true Dev server to serve pages over HTTPS. Uses the .NET self-signed certificate

Related

Integrate Asp.net MVC (.net framework 4.7) with ReactJS

The existing project is MVC with ExtJS. We want to migrate ExtJs to ReactJs alone instead of entire project.
I want to create react-app with existing Asp.net MVC.
I have tried to create using create-react-app or Vite.
But the idea to run Asp.net mvc with ReactJs is,
Build react app (will watch build folder)
The build output should target _layout.cshtml instead of index.html.
So that the built files will be included in _layout.cshtml and when we run the mvc application, the app will run without any issues.
Is there any idea to build without index.html and target _layout.cshtml?
Or
Is there any alter idea other than this?

Unable to resolve downloadable font errors in ReactJS front-end application built using Material UI deployed in Azure App Services ASP.NET V4.8

I have developed a ReactJS front-end project, built using Material UI. I have built it using npm run build command and deployed the application in Azure App Services ASP.NET V4.8 stack.
Everything looks fine but I'm getting a minor error. Downloadable font: download failed I can see these woff2 files in the artifacts and even in the App Service as well.
Any help in understanding this issue is much appreciated.

How to Debug Dotnet Backend + TSX Frontend?

My Problem:
I recently became the new Dev in a system which has a backend with Dotnet 3.1 and a Frontend of React, TypeScript and it is build with Yarn.
I can run the whole monster. For this, I first build the frontend, copy the created .js files to a static files folder in the backend, and run the Monster.dll.
How to debug the frontend? (I am afraid it relies on the backend being available.)
So far I tried to use Visual Studio but I'd try anything that is free and runs on Linux.
Seems you confused the front-end environment with the back-end.
Basically, your React front-end application runs on browsers whereas dotnetCore application runs on CoreCLR. Meaning that you can debug your React front-end application in browser's Developer Tools in a basic way.
Ensure that the build operation of your React front-end app generates source map (*.map) files. These files map your browser compatible js output files to the tsx / ts sources. Then you should be able to debug it on your browser's Developer Tool.

React in Visual Studio without ASP.NET Core

Can you use Visual Studio to launch React applications without ASP.NET Core?
The template in Visual Studio creates a React application hosted on top of ASP.NET Core, but I have no need for ASP.NET and just want a pure React application.
But when the React application is a ASP.NET Core project then Visual Studio lets me run the project and it opens the project in the web browser for me.
But when the React application is standalone by itself without ASP.NET Core then Visual Studio does not show any run button.
Open the React application folder with Visual Studio.
Open Package Manager Console and navigate to the project's root folder.
Type npm start or yarn start according to your project's structure
or
You can use a Visual Studio plugin like NPM Task Runner

how to use raw react app in vs for mac

I'd like to integrate/use an aspnet core 2 mvc app with react built using the react CLI "create-react-app".
I'd prefer to avoid all the boilerplate provide by SPA template.
Could you please me help to figure out all the steps required to integrate for. ex. gulp to code against the app created with the CLI in VS editor and see the result when I launch the website from VS and see the change while the website is running?

Resources