New Create React App-based template

jimmcslim commented 7 years ago

I'm wondering if it would be possible to integrate SpaServices' WebpackMiddleware with Facebook's Create React App in some useful way, especially to take advantage of CRA's scaffolding around unit testing. Thoughts?

SteveSandersonMS commented 7 years ago

If you could come up with a proposed design/implementation, we could definitely consider it. Otherwise it's not something we are directly planning, and have too many higher priorities for that to get done any time soon. Hope that's OK!

pkellner commented 7 years ago

I'd be interested in this also. Create-react-app is getting a lot of traction and I believe would help adoption of core in the react community. Especially around folks new to react and want to follow standards.

rosieks commented 7 years ago

@SteveSandersonMS - now when you are going to introduce support for angular-cli are you also going to reconsider this issue again and provide template that's based on create-react-app?

SteveSandersonMS commented 7 years ago

Yes. I don't know in detail how well it will fit but we can certainly consider it!

pkellner commented 7 years ago

... and an option to not have TypeScript included

thangchung commented 6 years ago

+1 for the React/Redux template that follows Create React App. Because it makes more standardized 👍

SteveSandersonMS commented 6 years ago

This work is now well underway in https://github.com/aspnet/templating/tree/feature/stevesa/new-spa-templates/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content

Based on the volume of community requests, the new React and React+Redux templates have a few major differences compared with the previous ones:

They are based around create-react-app (CRA). So there's no Webpack config, and everything that works in a standard CRA app will work the same here, since the ClientApp subdir literally is a CRA app.
The code language is JavaScript rather than TypeScript, because that's what standard CRA apps are.
Server-side prerendering is not on by default, because it isn't for standard CRA apps. Nor in fact does CRA even support building server-compatible bundles by default. However there are ways to do it (example) which you can put in an ASP.NET app and invoke on the server using NodeServices APIs. These all involve ejecting from CRA, but you can totally do that if you want.

SteveSandersonMS commented 6 years ago

How to try the new React / React+Redux templates

As mentioned earlier, we'll do an "official" preview release soon, hopefully in the next couple of weeks. In the meantime, here's an unofficial pre-preview release you can try out.

Make sure you have .NET Core 2.0.0+ SDK installed. Check this by running dotnet --version in a command prompt. Also you need Node.js installed (check by running node -v).
Download Microsoft.DotNet.Web.Spa.ProjectTemplates.2.0.0-preview0-t00572323b.nupkg
In your command prompt, run dotnet new --install <fullPathToThatNupkgFile>. For example, dotnet new --install c:\Users\yourname\Downloads\whatever.nupkg. Don't use a relative path unless you also prefix it with .\ or similar.
Now you can create projects with it:
- Run mkdir my-new-app
- Run cd my-new-app
- Run dotnet new react or dotnet new reactredux
- Verify you really have got the updated template output. If the generated project does not have a Views directory, and its Startup.cs contains a call to app.UseSpa, then you do have the new template.
- Run dotnet build (note: on the first run, this will do the NPM restore, which can take a few minutes)
- Set the environment variable ASPNETCORE_Environment to Development (e.g., set ASPNETCORE_Environment=Development in Windows (non-Powershell prompt) or export ASPNETCORE_Environment=Development on macOS/Linux)
- Run dotnet run
Optionally, if you're on Windows, you can open the generated .csproj in Visual Studio 2017 and run the project from there.

Note that these new SPA templates work by running the SPA framework's development server in the background (instead of Webpack dev middleware). So for the Angular template, it runs the Angular CLI server in the background, and for the React templates, it runs the dev server configured by create-react-app. If you run your app from a command prompt (i.e., not launching in IISExpress from VS), then you'll see it display the compilation progress.

Other features

There are various other things you can do:

If you publish the application (e.g., dotnet publish -c Release, or use VS's "Publish" UI) then it will internally build a production-ready version of the client app too, so you'll be serving fully optimised code.
If you open a command prompt in the ClientApp subdirectory, you can run whatever commands are applicable to your SPA framework. For example, for React/ReactRedux you can run npm test etc.
- If you want to install additional NPM packages, you must do that inside the ClientApp subdirectory, not at the ASP.NET project root, because the entire client-side app exists in ClientApp.
- If you want to keep the SPA development server running independently of the ASP.NET host app (e.g., so that when you make C# code changes, it doesn't also reset the Angular/React dev server and force a SPA rebuild), then you can manually launch the SPA dev server yourself (e.g., cd ClientApp then run npm start), and change your Startup.cs so that instead of calling spa.UseReactDevelopmentServer, you instead call spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); (update the port number as appropriate). Then you won't need to wait for the React app to rebuild each time you restart the ASP.NET app.
- If you want to "eject" from having a server backend, you can simply move the ClientApp subdirectory out of the project to another location. Then you can run things like npm start and it will be a pure SPA with no ASP.NET.

Reverting to the previous template

If you want to go back to the existing RTM SPA template, then you can delete the directory .templateengine which is at the root of your user directory. For example, on Windows, that might be at c:\Users\yourname\.templateengine. Then next time you run dotnet new it will reset the templates to the default ones shipped in the SDK.

Feedback

If you discover any glaring bugs, please let us know. Equally important, if you don't discover any bugs and in fact it appears to work nicely, then please post to say that too, as it gives us extra confidence to ship this soon.

tpetrina commented 6 years ago

Are there any benefits of using the old template, but upgrading to the most recent version of javascriptservices? The old system had server side prerendering and typescript configured. Or is the trend to move away from any predefined configuration on your end?

SteveSandersonMS commented 6 years ago

@tpetrina There isn't a newer version of the NodeServices/SpaServices package since 2.0.0 (or at least, the minor patch released don't contain any new functionality), so upgrading those packages alone won't change anything. If you want the major new stuff, you'll need to use the new template.

tpetrina commented 6 years ago

Thanks. I'll wait for the new version for Node/SpaServices to see what else is new.

waynebrantley commented 6 years ago

Using Create React App for the basis of the SPA is a nice idea. However, it seems we have gone backwards. The previous SPA templates you had supported TypeScript and SSR out of the box. We lost both with this 'new way' for your templates.

Is there any compromise here?

SteveSandersonMS commented 6 years ago

@waynebrantley The new create-react-app-based template follows on from the community feedback we've received. Most people wanted their projects to be as standard as possible, which is what this now gives.

That said, the existing APIs still continue to be supported and are not deprecated! You can certainly continue to do SSR for React projects by setting them up similarly to how the older template did, or of course set up a Webpack build config that compiles TypeScript. We're just not planning to ship and support a further template that does that in additional to the CRA-based one.

SteveSandersonMS commented 6 years ago

Since the preview1 build of the new CRA-based template has now shipped (and is in the dev branch so it will certainly ship in future releases such as for .NET SDK 2.1+ too), it's a good time to mark this as closed. If anyone discovers any issues with the new template, please let us know by posting a separate issue. Thanks!

russfrisch commented 6 years ago

@SteveSandersonMS Is there a new nuget package I should be installing rather then the preview0 one you linked a few comments up on Nov 27th? When I try to install that by running dotnet new --install I get the following output:

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates.2.0.0-preview0-t00572323b.nupkg 
Getting ready...
  Restoring packages for /Users/russ/.templateengine/dotnetcli/v2.1.3/scratch/restore.csproj...
/Users/russ/.templateengine/dotnetcli/v2.1.3/scratch/restore.csproj : error NU1101: Unable to find package Microsoft.DotNet.Web.Spa.ProjectTemplates.2.0.0-preview0-t00572323b.nupkg. No packages exist with this id in source(s): /usr/local/share/dotnet/sdk/NuGetFallbackFolder, nuget.org
  Generating MSBuild file /Users/russ/.templateengine/dotnetcli/v2.1.3/scratch/obj/restore.csproj.nuget.g.props.
  Generating MSBuild file /Users/russ/.templateengine/dotnetcli/v2.1.3/scratch/obj/restore.csproj.nuget.g.targets.
  Restore failed in 1.36 sec for /Users/russ/.templateengine/dotnetcli/v2.1.3/scratch/restore.csproj.

Templates                                         Short Name       Language          Tags               
--------------------------------------------------------------------------------------------------------
Console Application                               console          [C#], F#, VB      Common/Console     
Class library                                     classlib         [C#], F#, VB      Common/Library     
Unit Test Project                                 mstest           [C#], F#, VB      Test/MSTest        
xUnit Test Project                                xunit            [C#], F#, VB      Test/xUnit         
ASP.NET Core Empty                                web              [C#], F#          Web/Empty          
ASP.NET Core Web App (Model-View-Controller)      mvc              [C#], F#          Web/MVC            
ASP.NET Core Web App                              razor            [C#]              Web/MVC/Razor Pages
ASP.NET Core with Angular                         angular          [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        
ASP.NET Core Web API                              webapi           [C#], F#          Web/WebAPI         
global.json file                                  globaljson                         Config             
NuGet Config                                      nugetconfig                        Config             
Web Config                                        webconfig                          Config             
Solution File                                     sln                                Solution           
Razor Page                                        page                               Web/ASP.NET        
MVC ViewImports                                   viewimports                        Web/ASP.NET        
MVC ViewStart                                     viewstart                          Web/ASP.NET        

Examples:
    dotnet new mvc --auth Individual
    dotnet new sln
    dotnet new --help

I'm on OSX with the following .netcore versions installed:

dotnet --info 
.NET Command Line Tools (2.1.3)

Product Information:
 Version:            2.1.3
 Commit SHA-1 hash:  a0ca411ca5

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  10.13
 OS Platform: Darwin
 RID:         osx.10.12-x64
 Base Path:   /usr/local/share/dotnet/sdk/2.1.3/

Microsoft .NET Core Shared Framework Host

  Version  : 2.0.4
  Build    : 7f262f453d8c8479b9af91d34c013b3aa05bc1ff

After installing the preview0 pkg, when I create a new project with dotnet new react, I get a project that appears to be generated from the the new template, but the created project fails to compile as it's missing references the SPA package.

Any guidance would be much appreciated, I'm just learning React and eager to try out the create-react-app support!

russfrisch commented 6 years ago

@SteveSandersonMS Nevermind! I now understand why you stressed to use the FULL PATH NAME. running dotnet new --install <full/path/to/pkg> worked!

I also found a more recent version here if anyone else finds this thread:

https://www.nuget.org/api/v2/package/Microsoft.DotNet.Web.Spa.ProjectTemplates/2.0.0-rc1-final

alexbenitez commented 6 years ago

@SteveSandersonMS is there any way (now or in the future) to pass CRA parameters when creating a new React application.... something similar to this:

dotnet new react  --scripts-version=react-scripts-ts

This way we could have a Typescript template without ejecting the project.

SteveSandersonMS commented 6 years ago

Unfortunately that would involve implementing the templates and project creation system in a completely different way. We'd have to run some arbitrary code inside dotnet new to download the CRA tooling and execute it, instead of having the template output built into our template package. Then we'd have to run some kind of patching logic to manipulate the CRA output to add anything ASP.NET Core-specific. It's not really the way dotnet new is meant to work.

aspnet / JavaScriptServices