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

Sung M. Kim - Apr 3 '18 - - Dev Community

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 ๐Ÿ˜Ž.

HMR demo

Source Code

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player