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!)
- If TypeScript is so great, how come all notable ReactJS projects use Babel?
- Why isn't typescript used more in the react community?
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.