Wednesday, February 15, 2017

Creating a MVC ASP.NET Core Application Powered by React

Recently I have started to explore React and this morning, I saw this blog post Building Single Page Applications on ASP.NET Core with JavaScriptServices published on .NET Web Development and Tools Blog. And when I started to read this post, I got quite surprised and amazed.

Basically the summary is with the latest version of .NET Core SDK, you can use following templates to create a project using dotnet new.
image
dotnet new --list
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.
image
dotnet  and Node version
And I have installed Single Page Application (SPA) templates as per the original blog post.
Now let’s start some React time.
image
dotnet new react
Once the project is created, let’s see what dotnet exactly has created for us.
image
Project Structure
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”.

image
Server Side Dependencies
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.
image
Use of Webpack Dev Server
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.
dotnet restore
npm install
Finally it’s the command of joy.
dotnet run
image
dotnet run
Let’s navigate to http://localhost:5000 from the browser.
image
MVC ASP.NET Core with React
Isn’t it marvelous!

Happy Coding.

Regards,
Jaliya