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.
Top comments (9)
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.
You're welcome Stephen.
But I haven't been able to keep it up to date 😅 and the project's in a graveyard... 🧟♂️
Oh that's too bad haha, what's out of date about it?
I haven't updated React & .NET Core versions and they are out of date 😢
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
reactreduxtemplate from .net Core...there's no TypeScript to be found...although it does include jQuery and Bootstrap, which is annoying.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.
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 👇
TypeScript Progression Ladder
Remo H. Jansen
From your GitHub page, it seems like you have a .NET background, as well. I'd love to read/see if you would share what you've learned & learning 🤜.
Wait...ASP...and command line? We live in strange and interesting times!
Interesting in a good way 😀
I was shocked to find out
dotnet newcan create a project from a template.