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

Dynamic Assembly in C#

Static Assembly Vs Dynamic Assembly Static Assemblies are those assemblies which are stored on the disk permanently as a file or set of files. Since these assemblies are stored in the disk, those are only loaded when CLR requests.  These are the assemblies we are dealing with daily. Assemblies that I'm going to talk about today bit different. It completely opposite of the Static Assemblies. Those Assemblies are not stored on the disk before execution. When an application requires any type, which references from these assemblies, DOT NET will create these Assemblies at the runtime so that it will directly load into the memory. Why is it important ? Like I mentioned, this is not something we do very often. It is not all about how important it is. Personally, I think it is better to know this kind of hidden language features. More you play with this more you learn. I found cool stuff I can do with this. Hope it will be same for you as well. This is an old feature. How ...
Post a Comment
Read more

global.json file

  Symptoms Suddenly you get build errors in your build pipeline which perfectly builds in your local machine 🤔🤔🤔 Cause Most likely the root cause is .NET SDK versions. Your local machine builds on a different SDK and the pipeline builds on a different SDK. Resolution The ideal way of solving this is to force everyone to use one define .Net SDK. Regardless of whether it is a developer or CI pipeline. Simply to make this happen .NET  provides you a file called "global.json". The global.json file allows you to define which .NET SDK version is used when you run .NET CLI commands. Selecting the .NET SDK version is independent from specifying the runtime version a project targets. For information about specifying the runtime version instead of the SDK version, see Target frameworks . If you always want to use the latest SDK version that is installed on your machine, no global.json file is needed. Into the Depth The sample global.json file looks like the below, {    ...
Post a Comment
Read more