A starting point for building isomorphic React applications with ASP.NET Core, leveraging existing techniques.
Clone or download
Latest commit a605a40 May 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
resources Adding a thumbnail. Mar 21, 2016
src/ReactBoilerplate Updated to .NET Core 2.0 May 11, 2018
.gitignore Renamed the react project to "ReactBoilerplate". This will make it ea… Jun 17, 2016
LICENSE Initial commit Feb 20, 2016
README.md Updated to .NET Core 2.0 May 11, 2018
ReactBoilerplate.sln Updated to .NET Core 2.0 May 11, 2018

README.md

react-aspnet-boilerplate

A starting point for building universal/isomorphic React applications with ASP.NET Core 1, leveraging existing front-end approaches. Uses the JavaScriptViewEngine.

Goals

  1. Minimize .NET's usage - It's only usage should be for building REST endpoints (WebApi) and providing the initial state (pure POCO). No razor syntax anywhere.
  2. Isomorphic/universal rendering
  3. Client and server should render using the same source files (javascript)
  4. Out-of-the-box login/register/manage functionality - Use the branch empty-template if you wish to have a vanilla React application.

This approach is great for front-end developers because it gives them complete control to build their app as they like. No .NET crutches (bundling/razor). No opinions. No gotchas. Just another typical React client-side application, but with the initial state provided by ASP.NET for each URL.

Getting started

The best way to get started with this project is to use the Yeoman generator.

npm install -g yo
npm install -g generator-react-aspnet-boilerplate

Then generate your new project:

yo react-aspnet-boilerplate

You can also generate a clean template (no authentication/account management) with another generator:

yo react-aspnet-boilerplate:empty-template

After you have your new project generated, let's run that app!

cd src/ReactBoilerplate
npm install
gulp
dotnet restore
# The following two lines are only for the 'master' branch, which has a database backend (user management).
# They are not needed when using 'empty-template'.
dotnet ef migrations add initial
dotnet ef database update
dotnet run

Some of the branches in this repo that are maintained:

  • master - This is the main branch. It has all the stuff required to get you started, including membership, external logins (OAuth) and account management. This is the default branch used with the Yeoman generator.
  • empty-template - This branch for people that want an empty template with the absolute minimum recommend boilerplate for any ASP.NET React application.

The interesting parts

  • client.js and server.js - The entry point for the client-side/server-side applications.
  • Html.js and App.js - These files essentially represent the "React" version of MVC Razor's "_Layout.cshtml".
  • Controllers - The endpoints for a each initial GET request, and each client-side network request.

What is next?

I will be adding features to this project as time goes on to help me get started with new React projects in .NET. So, expect some more things. I am also open to contributions or recommendations.

I took a lot of things from react-redux-universal-hot-example, but not everything. As time goes on, expect to see more of the same patterns/technologies/techniques copied over.