Basically the summary is with the latest version of .NET Core SDK, you can use following templates to create a project using dotnet new.
While there are a lot of information about all of this in above mentioned post, in this post, I am going to explore the React project template. (Not React with Redux, at least not on this post). Of course, to start exploring , first you need to create it.
I have the latest .NET Core SDK and Node installed.
|dotnet and Node version|
Now let’s start some React time.
Once the project is created, let’s see what dotnet exactly has created for us.
You can see that basically the structure is more or less the same to web application projects created using Visual Studio.
In addition you have webpack, babel and TypeScript configuration files (if you haven’t worked with webpack, and babel before, may be you can read this previous post of mine: Getting Started with React, Babel and Webpack). And of course there is a Dockerfile as well.
Your familiar files which bootstraps ASP.NET Core and MVC (Program.cs, Startup.cs, Controllers and Views folders etc.) are there. React components are placed inside ClientApp folder.
While all the client side dependencies are listed in package.json, server side dependencies are listed in the .csproj it self (you can find more information about the project.json to .csproj migration in this previous post of mine: Where is project.json in Default .NET Core Application Templates in Visual Studio 2017). On the server side dependencies, one of the important thing to note is, reference to “Microsoft.AspNetCore.SpaServices”.
If you open up Startup.cs, inside Configure method which configures the HTTP request pipeline, while the environment is Development, we are using the Webpack Dev Server along with it’s HMR (Hot Module Replacement) feature.
This is made all possible by using “Microsoft.AspNetCore.SpaServices” package. And that is a very handy thing when it comes to development, you don’t have to refresh the page after making client side code changes.
So now let’s run the application and see what happens. Open up a command prompt inside the project folder and run the following commands to restore/install server side and client side packages.
Finally it’s the command of joy.
Let’s navigate to http://localhost:5000 from the browser.