Skip to main content

ASP.NET Core 3.1 - Setting up React app with Typescript


With the release of .NET Core 3.1, I have decided to migrate one of my .NET core 2.1 solutions which contain ASP.NET core API project, React Web project (ASP.NET core project with react typescript template) and .NET Core Library project. 

So I started the migration with the Library and API projects. Based on my experience, I think it was not a smooth migration due to the vast number of breaking changes but I managed to up and run both projects.

Lastly, I have started to migrate the React ASP.NET core project. It was chaotic but I managed to up and run the project. Thought it worked I got some issues here and there so I decided not to continue with the same project rather create a new ASP.NET Core 3.1 React TypeScript template project.

When you are going to create a new project, Visual Studio provided you a list of templates where you can pick desired


Even though we have a project template for ASP.NET Core with React JS, there is no direct project template for ASP.NET Core with React TypeScript. 

This blog post instructs you on how to create an ASP.NET Core with React TypeScript project.

Create an ASP.NET Core with React JS

If you already have a solution, right-click on it and click Add -> New Project...
else File -> New -> Project...

It will open the "Create a new project" window where you can select the desired project template. 


Select the ASP.NET Core Web Application template and click Next.

Select .Net Core and ASP.NET Core 3.1 as the versions and pick React.js as the template.


Then click Create.

Give a name to your project and pick a location.


If you expand the newly created project. You will be able to see the structure of the ClientApp folder which consists of the public folder, src folder and package.json file.


Without changing anything you can run and see the output of the default template.

 The next thing is to create a react app with the TypeScript template. To create that you have to install create-react-app globally via

npm install -g create-react-app
Use below commands to create a react app with the TypeScript template

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript
Once you create the app. Navigate to the location and see the structure of the project folder.

It is almost similar to the folder structure in ASP.NET Core Web - React JS Application -> ClientApp folder structure.

The final step is to copy all the content in the create-react-app folder and replace the ClientApp folder



You can see the tscofig.json file is included in the ClientApp folder.

If you run the application now you can see a running React typescript application instead of React js.

May the force be with you!

Labels:

Comments

Post a Comment

Popular Posts

SSAS: The Sort Order Specified For Distinct Count Records Is Incorrect.

Symptoms During a processing time of a cube that contains a distinct count measure, the process fails with the following error message: The sort order specified for distinct count records is incorrect Cause This is most likely caused by different sort order used on the data warehouse data set and the analysis service database data set. Resolution Modify the sort order of the data warehouse data set so that it will match with the analysis service database data set. Into the Depth  Navigate to the analysis database and start to process the desired database. When the processing begins, the Process progress window will pop up. Wait till the process gets failed. After the process failed, find the failing measure group and expand to the last node where you can see an SQL query. Double click on the query and view the details. This query gives you the exact order by the column which caused you this trouble.  Execute the query using the data warehouse datab...
Post a Comment
Read more

Satellite Assembly in C#

Satellite Assemblies Resource files in Dot Net Resource files are typically used to store any resources in your Dot Net application. Resource file allows you to store images, icons, audio, files, strings and other types of resources. Of cause it is not mandatory to keep them inside a resource file. But when it comes to localization it is recommended to work with the resource file. localization Which means based on the user's language and culture change the application and the resources. How to archive localization with resources? Seems to be an impossible task. But to make the impossible possible, Dot Net provides you a special assembly called "Satellite Assembly" Satellite assemblies are assemblies that containing resources specific to a given language and culture. Using satellite assemblies, you can place the resources for different languages in different assemblies, and the correct assembly is loaded into memory only if the user selects to view the ...
Post a Comment
Read more