ASP.NET Core 2 React.js Template with ES6 (not TypeScript)
Tags: dotnet, react, aspnet, template
Published: 2018-04-03 00:59:34

---
title: ASP.NET Core 2 React.js Template with ES6 (not TypeScript)
published: true
description: Sick of TypeScript ASP.NET Core 2 React.js template? Say no more.
tags: dotnet, react, asp.net, template
---

I created a Nuget package for `dotnet new` template.

## Why?

I don't know why but [dotnet CLI](https://docs.microsoft.com/en-us/dotnet/core/tools/?tabs=netcore2x) 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?](https://discuss.reactjs.org/t/if-typescript-is-so-great-how-come-all-notable-reactjs-projects-use-babel/4887)
- [Why isn't typescript used more in the react community?](https://www.reddit.com/r/reactjs/comments/7yxecm/why_isnt_typescript_used_more_in_the_react/)


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](https://www.nuget.org/packages/ReactES6.Web/) (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,

```bash
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.

```bash
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`
```bash
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
```bash
cd NewSite.Web
```
Then restore .NET Core packages and install NPM packages
```bash
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`.
```bash
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](https://i.imgur.com/Rbo51jW.gif)


### Source Code
It's available on GitHub ([dance2die/ReactES6.Web](https://github.com/dance2die/ReactES6.Web)) with MIT license.