Sung M. Kim

Posted on Apr 3, 2018

ASP.NET Core 2 React.js Template with ES6 (not TypeScript)

#dotnet #react #aspnet #template

I created a Nuget package for dotnet new template.

Why?

I don't know why but dotnet CLI has SPA templates for ASP.NET Core 2 React.js that creates a page with TypeScript.

I see many benefits with TypeScript coming from C# background.
But sometimes it's just an overkill.
Refer to these posts (⚠️ warning. Long threads!)

As a newcomer to ASP.NET Core, I just didn't want to deal with TypeScript so I created a new template, ASP.NET Core with React.js with ES6 (with short name reactes6).

I will show you how to install and run the nuget package.

TL;DR

dotnet new -i ReactES6.Web
dotnet new reactes6 -n NewSite.Web
cd NewSite.Web
dotnet restore && npm install
dotnet run
code .

How to Install & Run

From command line,

dotnet new -i ReactES6.Web

And you will see a new template named ASP.NET Core with React.js with ES6 (with shortname reactes6) would appear.

dance2die@CC C:\misc\sources\throwaway\coretemplates\fromnuget                                                                            
> dotnet new -i ReactES6.Web                                                                                                              
Getting ready...                                                                                                                          
  ...

Templates                                         Short Name       Language          Tags                                                 
--------------------------------------------------------------------------------------------------------                                  
Console Application                               console          [C#], F#, VB      Common/Console                                       
...      
ASP.NET Core with React.js with ES6               reactes6         [C#]              Web/MVC/SPA                                          
...                                  
ASP.NET Core with React.js                        react            [C#]              Web/MVC/SPA                                          
ASP.NET Core with React.js and Redux              reactredux       [C#]              Web/MVC/SPA                                          
...                          
MVC ViewStart                                     viewstart                          Web/ASP.NET

Create a new website using the template reactes6

dance2die@CC C:\misc\sources\throwaway\coretemplates\fromnuget
> dotnet new reactes6 -n NewSite.Web
The template "ASP.NET Core with React.js with ES6" was created successfully.

Go to the new website directory

cd NewSite.Web

Then restore .NET Core packages and install NPM packages

dance2die@CC C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web
> dotnet restore && npm install
  Restoring packages for C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web\NewSite.Web.csproj...
  Restore completed in 140.27 ms for C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web\NewSite.Web.csproj.
  Generating MSBuild file C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web\obj\NewSite.Web.csproj.nuget.g.props.
  Generating MSBuild file C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web\obj\NewSite.Web.csproj.nuget.g.targets.
  Restore completed in 6.11 sec for C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web\NewSite.Web.csproj.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 611 packages from 525 contributors in 95.097s

Start the project with dotnet run.

dance2die@CC C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web
> dotnet run
Using launch settings from C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web\Properties\launchSettings.json...
info: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[0]
      User profile is available. Using 'C:\Users\dance2die\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
Hosting environment: Development
Content root path: C:\misc\sources\throwaway\coretemplates\fromnuget\NewSite.Web
Now listening on: http://localhost:60672
Application started. Press Ctrl+C to shut down.

Open an editor of your choice (I am using VS Code below).
And play around with HMR (Hot Module Replacement) like a boss 😎.

Source Code

It's available on GitHub (dance2die/ReactES6.Web) with MIT license.

Top comments (9)

Stephen Chiang • Mar 16 '19

Cool, I love working with TypeScript in Angular. But I'm also not going to go out of my way to add it.

I'll give this a try as I need to do this exact stack for an upcoming project. Thanks for making this.

Sung M. Kim • Mar 17 '19

You're welcome Stephen.

But I haven't been able to keep it up to date 😅 and the project's in a graveyard... 🧟‍♂️

Stephen Chiang • Mar 17 '19 • Edited

Oh that's too bad haha, what's out of date about it?

Sung M. Kim • Mar 17 '19

I haven't updated React & .NET Core versions and they are out of date 😢

Stephen Chiang • Mar 17 '19 • Edited

Ah but that's not too hard to do for the user after initial setup 😉

Edit
Actually...based on what I can tell from installing the latest version of the reactredux template from .net Core...there's no TypeScript to be found...although it does include jQuery and Bootstrap, which is annoying.

Tommy • Oct 15 '18

I believe you may have some mis-information. As a long time user of babel and a early typescript supporter it is my experience that configuring ts is much much less difficult and less a pain then babel. Now with every single editor I am familiar with shipping with first class ts support just a 5 line tsconfig.json file is enough for a common config. tsc -p tsconfig.json. JavaScript is a extremely messy world of code compared to other languages and in my experience ts helps with this. Having a type system ensures possibility of a bug-riddled code base is massively reduced right from first debug session since it helps to author more scalable and clear code as you type it since we developers are all human and tend to make simple mistakes often. Babel has been dead to me the past few years since adopting ts.

Sung M. Kim • Oct 15 '18 • Edited

Thank you, Tommy for sharing your experience.

I can see the benefit of TypeScript and only recently started seeing the benefit that comes with it.

From what I've read, TypeScript is a superset of JavaScript so I thought I could've simply wrote React components the same way you do with vanilla JavaScript but didn't go well, mostly because I was too lazy 😓 to learn at the time.

I decided to learn TypeScript to use for React ever since I found this sw-yx/react-typescript-cheatsheet & a nice curated TypeScript learning site 👇