Beginning React+Redux template as a direct copy of the React one

2025-12-22 17:47:53 +00:00 · 2016-03-07 10:20:31 +00:00
parent 3ab3a1bf5f
commit ec9337754f
37 changed files with 4085 additions and 0 deletions
--- a/templates/ReactReduxSpa/.babelrc
+++ b/templates/ReactReduxSpa/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}
--- a/templates/ReactReduxSpa/.gitignore
+++ b/templates/ReactReduxSpa/.gitignore
@@ -0,0 +1,233 @@
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+
+# User-specific files
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+build/
+bld/
+[Bb]in/
+[Oo]bj/
+
+# Visual Studio 2015 cache/options directory
+.vs/
+/wwwroot/dist/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUNIT
+*.VisualState.xml
+TestResult.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# DNX
+project.lock.json
+artifacts/
+
+*_i.c
+*_p.c
+*_i.h
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# JustCode is a .NET coding add-in
+.JustCode
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# TODO: Comment the next line if you want to checkin your web deploy settings
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# NuGet Packages
+*.nupkg
+# The packages folder can be ignored because of Package Restore
+**/packages/*
+# except build/, which is used as an MSBuild target.
+!**/packages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/packages/repositories.config
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Microsoft Azure ApplicationInsights config file
+ApplicationInsights.config
+
+# Windows Store app package directory
+AppPackages/
+BundleArtifacts/
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.pfx
+*.publishsettings
+node_modules/
+orleans.codegen.cs
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+
+# SQL Server files
+*.mdf
+*.ldf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+
+# FAKE - F# Make
+.fake/
--- a/templates/ReactReduxSpa/ClientApp/boot.tsx
+++ b/templates/ReactReduxSpa/ClientApp/boot.tsx
@@ -0,0 +1,15 @@
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+import './css/site.css';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { browserHistory, Router } from 'react-router';
+import routes from './routes';
+
+// This code starts up the React app when it runs in a browser. It sets up the routing configuration
+// and injects the app into a DOM element.
+ReactDOM.render(
+    <Router history={ browserHistory } children={ routes } />,
+    document.getElementById('react-app')
+);
--- a/templates/ReactReduxSpa/ClientApp/components/Counter.tsx
+++ b/templates/ReactReduxSpa/ClientApp/components/Counter.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface CounterState {
+    currentCount: number;
+}
+
+export class Counter extends React.Component<any, CounterState> {
+    constructor() {
+        super();
+        this.state = { currentCount: 0 };
+    }
+
+    public render() {
+        return <div>
+            <h1>Counter</h1>
+
+            <p>This is a simple example of a React component.</p>
+
+            <p>Current count: <strong>{ this.state.currentCount }</strong></p>
+
+            <button onClick={ () => { this.incrementCounter() } }>Increment</button>
+        </div>;
+    }
+
+    incrementCounter() {
+        this.setState({
+            currentCount: this.state.currentCount + 1
+        });
+    }
+}
--- a/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx
+++ b/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+interface FetchDataExampleState {
+    forecasts: WeatherForecast[];
+    loading: boolean;
+}
+
+export class FetchData extends React.Component<any, FetchDataExampleState> {
+    constructor() {
+        super();
+        this.state = { forecasts: [], loading: true };
+
+        fetch('/api/SampleData/WeatherForecasts')
+            .then(response => response.json())
+            .then((data: WeatherForecast[]) => {
+                this.setState({ forecasts: data, loading: false });
+            });
+    }
+
+    public render() {
+        let contents = this.state.loading
+            ? <p><em>Loading...</em></p>
+            : FetchData.renderForecastsTable(this.state.forecasts);
+
+        return <div>
+            <h1>Weather forecast</h1>
+            <p>This component demonstrates fetching data from the server.</p>
+            { contents }
+            <p>For more sophisticated applications, consider an architecture such as Redux or Flux for managing state. You can generate an ASP.NET Core application with React and Redux using <code>dotnet new aspnet/spa/reactredux</code> instead of using this template.</p>
+        </div>;
+    }
+
+    private static renderForecastsTable(forecasts: WeatherForecast[]) {
+        return <table className='table'>
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Temp. (C)</th>
+                    <th>Temp. (F)</th>
+                    <th>Summary</th>
+                </tr>
+            </thead>
+            <tbody>
+            {forecasts.map(forecast =>
+                <tr key={ forecast.dateFormatted }>
+                    <td>{ forecast.dateFormatted }</td>
+                    <td>{ forecast.temperatureC }</td>
+                    <td>{ forecast.temperatureF }</td>
+                    <td>{ forecast.summary }</td>
+                </tr>
+            )}
+            </tbody>
+        </table>;
+    }
+}
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}
--- a/templates/ReactReduxSpa/ClientApp/components/Home.tsx
+++ b/templates/ReactReduxSpa/ClientApp/components/Home.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export class Home extends React.Component<any, void> {
+    public render() {
+        return <div>
+            <h1>Hello, world!</h1>
+            <p>Welcome to your new single-page application, built with:</p>
+            <ul>
+                <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
+                <li><a href='https://facebook.github.io/react/'>React</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
+                <li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
+                <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
+            </ul>
+            <p>To help you get started, we've also set up:</p>
+            <ul>
+                <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
+                <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
+                <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, rebuilt CSS and React components will be injected directly into your running application, preserving its live state.</li>
+                <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
+            </ul>
+            <h4>Going further</h4>
+            <p>
+                For larger applications, or for server-side prerendering (i.e., for <em>isomorphic</em> or <em>universal</em> applications), you should consider using a Flux/Redux-like architecture.
+                You can generate an ASP.NET Core application with React and Redux using <code>dotnet new aspnet/spa/reactredux</code> instead of using this template.
+            </p>
+        </div>;
+    }
+}
--- a/templates/ReactReduxSpa/ClientApp/components/Layout.tsx
+++ b/templates/ReactReduxSpa/ClientApp/components/Layout.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { NavMenu } from './NavMenu';
+
+export interface LayoutProps {
+    body: React.ReactElement<any>;
+}
+
+export class Layout extends React.Component<LayoutProps, void> {
+    public render() {
+        return <div className='container-fluid'>
+            <div className='row'>
+                <div className='col-sm-3'>
+                    <NavMenu />
+                </div>
+                <div className='col-sm-9'>
+                    { this.props.body }
+                </div>
+            </div>
+        </div>;
+    }
+}
--- a/templates/ReactReduxSpa/ClientApp/components/NavMenu.tsx
+++ b/templates/ReactReduxSpa/ClientApp/components/NavMenu.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Link } from 'react-router';
+
+export class NavMenu extends React.Component<any, void> {
+    public render() {
+        return <div className='main-nav'>
+                <div className='navbar navbar-inverse'>
+                <div className='navbar-header'>
+                    <button type='button' className='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
+                        <span className='sr-only'>Toggle navigation</span>
+                        <span className='icon-bar'></span>
+                        <span className='icon-bar'></span>
+                        <span className='icon-bar'></span>
+                    </button>
+                    <Link className='navbar-brand' to={ '/' }>WebApplicationBasic</Link>
+                </div>
+                <div className='clearfix'></div>
+                <div className='navbar-collapse collapse'>
+                    <ul className='nav navbar-nav'>
+                        <li>
+                            <Link to={ '/' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-home'></span> Home
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to={ '/counter' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-education'></span> Counter
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to={ '/fetchdata' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-th-list'></span> Fetch data
+                            </Link>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>;
+    }
+}
--- a/templates/ReactReduxSpa/ClientApp/css/site.css
+++ b/templates/ReactReduxSpa/ClientApp/css/site.css
@@ -0,0 +1,66 @@
+.main-nav li .glyphicon {
+    margin-right: 10px;
+}
+
+/* Highlighting rules for nav menu items */
+.main-nav li a.active,
+.main-nav li a.active:hover,
+.main-nav li a.active:focus {
+    background-color: #4189C7;
+    color: white;
+}
+
+/* Keep the nav menu independent of scrolling and on top of other items */
+.main-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+@media (max-width: 767px) {
+    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
+    body {
+        padding-top: 50px;
+    }
+}
+
+@media (min-width: 768px) {
+    /* On small screens, convert the nav menu to a vertical sidebar */
+    .main-nav {
+        height: 100%;
+        width: calc(25% - 20px);
+    }
+    .main-nav .navbar {
+        border-radius: 0px;
+        border-width: 0px;
+        height: 100%;
+    }
+    .main-nav .navbar-header {
+        float: none;
+    }
+    .main-nav .navbar-collapse {
+        border-top: 1px solid #444;
+        padding: 0px;
+    }
+    .main-nav .navbar ul {
+        float: none;
+    }
+    .main-nav .navbar li {
+        float: none;
+        font-size: 15px;
+        margin: 6px;
+    }
+    .main-nav .navbar li a {
+        padding: 10px 16px;
+        border-radius: 4px;
+    }
+    .main-nav .navbar a {
+        /* If a menu item's text is too long, truncate it */
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
--- a/templates/ReactReduxSpa/ClientApp/routes.tsx
+++ b/templates/ReactReduxSpa/ClientApp/routes.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Router, Route, HistoryBase } from 'react-router';
+import { Layout } from './components/Layout';
+import { Home } from './components/Home';
+import { FetchData } from './components/FetchData';
+import { Counter } from './components/Counter';
+
+export default <Route component={ Layout }>
+    <Route path='/' components={{ body: Home }} />
+    <Route path='/counter' components={{ body: Counter }} />
+    <Route path='/fetchdata' components={{ body: FetchData }} />
+</Route>;
--- a/templates/ReactReduxSpa/Controllers/HomeController.cs
+++ b/templates/ReactReduxSpa/Controllers/HomeController.cs
@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNet.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+
+        public IActionResult Error()
+        {
+            return View();
+        }
+    }
+}
--- a/templates/ReactReduxSpa/Controllers/SampleDataController.cs
+++ b/templates/ReactReduxSpa/Controllers/SampleDataController.cs
@@ -0,0 +1,44 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNet.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+    [Route("api/[controller]")]
+    public class SampleDataController : Controller
+    {
+        private static string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        [HttpGet, Route("[action]")]
+        public IEnumerable<WeatherForecast> WeatherForecasts()
+        {
+            var rng = new Random();
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            });
+        }
+
+        public class WeatherForecast
+        {
+            public string DateFormatted { get; set; }
+            public int TemperatureC { get; set; }
+            public string Summary { get; set; }
+
+            public int TemperatureF
+            {
+                get
+                {
+                    return 32 + (int)(this.TemperatureC / 0.5556);
+                }
+            }
+        }
+    }
+}
--- a/templates/ReactReduxSpa/Dockerfile
+++ b/templates/ReactReduxSpa/Dockerfile
@@ -0,0 +1,11 @@
+FROM microsoft/aspnet:1.0.0-rc1-update1
+
+RUN printf "deb http://ftp.us.debian.org/debian jessie main\n" >> /etc/apt/sources.list
+RUN apt-get -qq update && apt-get install -qqy sqlite3 libsqlite3-dev && rm -rf /var/lib/apt/lists/*
+
+COPY . /app
+WORKDIR /app
+RUN ["dnu", "restore"]
+
+EXPOSE 5000/tcp
+ENTRYPOINT ["dnx", "-p", "project.json", "web"]
--- a/templates/ReactReduxSpa/README.md
+++ b/templates/ReactReduxSpa/README.md
@@ -0,0 +1,40 @@
+# Welcome to ASP.NET 5
+
+We've made some big updates in this release, so it’s **important** that you spend a few minutes to learn what’s new.
+
+You've created a new ASP.NET 5 project. [Learn what's new](http://go.microsoft.com/fwlink/?LinkId=518016)
+
+## This application consists of:
+
+*   Sample pages using ASP.NET MVC 6
+*   [Gulp](http://go.microsoft.com/fwlink/?LinkId=518007) and [Bower](http://go.microsoft.com/fwlink/?LinkId=518004) for managing client-side libraries
+*   Theming using [Bootstrap](http://go.microsoft.com/fwlink/?LinkID=398939)
+
+## How to
+
+*   [Add a Controller and View](http://go.microsoft.com/fwlink/?LinkID=398600)
+*   [Add an appsetting in config and access it in app.](http://go.microsoft.com/fwlink/?LinkID=699562)
+*   [Manage User Secrets using Secret Manager.](http://go.microsoft.com/fwlink/?LinkId=699315)
+*   [Use logging to log a message.](http://go.microsoft.com/fwlink/?LinkId=699316)
+*   [Add packages using NuGet.](http://go.microsoft.com/fwlink/?LinkId=699317)
+*   [Add client packages using Bower.](http://go.microsoft.com/fwlink/?LinkId=699318)
+*   [Target development, staging or production environment.](http://go.microsoft.com/fwlink/?LinkId=699319)
+
+## Overview
+
+*   [Conceptual overview of what is ASP.NET 5](http://go.microsoft.com/fwlink/?LinkId=518008)
+*   [Fundamentals of ASP.NET 5 such as Startup and middleware.](http://go.microsoft.com/fwlink/?LinkId=699320)
+*   [Working with Data](http://go.microsoft.com/fwlink/?LinkId=398602)
+*   [Security](http://go.microsoft.com/fwlink/?LinkId=398603)
+*   [Client side development](http://go.microsoft.com/fwlink/?LinkID=699321)
+*   [Develop on different platforms](http://go.microsoft.com/fwlink/?LinkID=699322)
+*   [Read more on the documentation site](http://go.microsoft.com/fwlink/?LinkID=699323)
+
+## Run & Deploy
+
+*   [Run your app](http://go.microsoft.com/fwlink/?LinkID=517851)
+*   [Run your app on .NET Core](http://go.microsoft.com/fwlink/?LinkID=517852)
+*   [Run commands in your project.json](http://go.microsoft.com/fwlink/?LinkID=517853)
+*   [Publish to Microsoft Azure Web Apps](http://go.microsoft.com/fwlink/?LinkID=398609)
+
+We would love to hear your [feedback](http://go.microsoft.com/fwlink/?LinkId=518015)
--- a/templates/ReactReduxSpa/Startup.cs
+++ b/templates/ReactReduxSpa/Startup.cs
@@ -0,0 +1,81 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNet.Builder;
+using Microsoft.AspNet.Hosting;
+using Microsoft.AspNet.SpaServices.Webpack;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using Newtonsoft.Json.Serialization;
+
+namespace WebApplicationBasic
+{
+    public class Startup
+    {
+        public Startup(IHostingEnvironment env)
+        {
+            // Set up configuration sources.
+            var builder = new ConfigurationBuilder()
+                .AddJsonFile("appsettings.json")
+                .AddEnvironmentVariables();
+            Configuration = builder.Build();
+        }
+
+        public IConfigurationRoot Configuration { get; set; }
+
+        // This method gets called by the runtime. Use this method to add services to the container.
+        public void ConfigureServices(IServiceCollection services)
+        {
+            // Add framework services.
+            services.AddMvc().AddJsonOptions(options =>
+            {
+                options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
+            });
+        }
+
+        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
+        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
+        {
+            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
+            loggerFactory.AddDebug();
+
+            if (env.IsDevelopment())
+            {
+                app.UseDeveloperExceptionPage();
+            }
+            else
+            {
+                app.UseExceptionHandler("/Home/Error");
+            }
+
+            app.UseIISPlatformHandler();
+
+            if (env.IsDevelopment())
+            {
+                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
+                {
+                    HotModuleReplacement = true,
+                    ReactHotModuleReplacement = true
+                });
+            }
+
+            app.UseStaticFiles();
+
+            app.UseMvc(routes =>
+            {
+                routes.MapRoute(
+                    name: "default",
+                    template: "{controller=Home}/{action=Index}/{id?}");
+
+                routes.MapSpaFallbackRoute(
+                    name: "spa-fallback",
+                    defaults: new { controller = "Home", action = "Index" });
+            });
+        }
+
+        // Entry point for the application.
+        public static void Main(string[] args) => Microsoft.AspNet.Hosting.WebApplication.Run<Startup>(args);
+    }
+}
--- a/templates/ReactReduxSpa/Views/Home/Index.cshtml
+++ b/templates/ReactReduxSpa/Views/Home/Index.cshtml
@@ -0,0 +1,9 @@
+@{
+    ViewData["Title"] = "Home Page";
+}
+
+<div id="react-app">Loading...</div>
+
+@section scripts {
+    <script src="~/dist/main.js" asp-append-version="true"></script>
+}
--- a/templates/ReactReduxSpa/Views/Shared/Error.cshtml
+++ b/templates/ReactReduxSpa/Views/Shared/Error.cshtml
@@ -0,0 +1,6 @@
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
--- a/templates/ReactReduxSpa/Views/Shared/_Layout.cshtml
+++ b/templates/ReactReduxSpa/Views/Shared/_Layout.cshtml
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>@ViewData["Title"] - WebApplicationBasic</title>
+
+        <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
+        <environment names="Staging,Production">
+            <link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
+        </environment>
+    </head>
+    <body>
+        @RenderBody()
+
+        <script src="~/dist/vendor.js" asp-append-version="true"></script>
+        @RenderSection("scripts", required: false)
+    </body>
+</html>
--- a/templates/ReactReduxSpa/Views/_ViewImports.cshtml
+++ b/templates/ReactReduxSpa/Views/_ViewImports.cshtml
@@ -0,0 +1,3 @@
+@using WebApplicationBasic
+@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
+@addTagHelper "*, Microsoft.AspNet.SpaServices"
--- a/templates/ReactReduxSpa/Views/_ViewStart.cshtml
+++ b/templates/ReactReduxSpa/Views/_ViewStart.cshtml
@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}
--- a/templates/ReactReduxSpa/appsettings.json
+++ b/templates/ReactReduxSpa/appsettings.json
@@ -0,0 +1,10 @@
+{
+  "Logging": {
+    "IncludeScopes": false,
+    "LogLevel": {
+      "Default": "Verbose",
+      "System": "Information",
+      "Microsoft": "Information"
+    }
+  }
+}
--- a/templates/ReactReduxSpa/package.json
+++ b/templates/ReactReduxSpa/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "WebApplicationBasic",
+  "version": "0.0.0",
+  "devDependencies": {
+    "babel-loader": "^6.2.3",
+    "babel-plugin-react-transform": "^2.0.0",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "bootstrap": "^3.3.6",
+    "css-loader": "^0.23.1",
+    "express": "^4.13.4",
+    "extendify": "^1.0.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
+    "jquery": "^2.2.1",
+    "ntypescript": "^1.201602232306.1",
+    "react-transform-hmr": "^1.0.2",
+    "style-loader": "^0.13.0",
+    "ts-loader": "^0.8.1",
+    "typescript": "^1.8.2",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.12.14",
+    "webpack-dev-middleware": "^1.5.1",
+    "webpack-hot-middleware": "^2.7.1"
+  },
+  "dependencies": {
+    "babel-core": "^6.5.2",
+    "domain-task": "^1.0.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-router": "^2.0.0"
+  }
+}
--- a/templates/ReactReduxSpa/project.json
+++ b/templates/ReactReduxSpa/project.json
@@ -0,0 +1,54 @@
+{
+  "version": "1.0.0-*",
+  "compilationOptions": {
+    "emitEntryPoint": true
+  },
+  "tooling": {
+    "defaultNamespace": "WebApplicationBasic"
+  },
+
+  "dependencies": {
+    "Microsoft.AspNet.Diagnostics": "1.0.0-rc1-final",
+    "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
+    "Microsoft.AspNet.Mvc": "6.0.0-rc1-final",
+    "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final",
+    "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
+    "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",
+    "Microsoft.AspNet.Tooling.Razor": "1.0.0-rc1-final",
+    "Microsoft.Extensions.Configuration.FileProviderExtensions" : "1.0.0-rc1-final",
+    "Microsoft.Extensions.Configuration.Json": "1.0.0-rc1-final",
+    "Microsoft.Extensions.Logging": "1.0.0-rc1-final",
+    "Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",
+    "Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final",
+    "Microsoft.AspNet.ReactServices": "1.0.0-alpha7"
+  },
+
+  "commands": {
+    "web": "Microsoft.AspNet.Server.Kestrel"
+  },
+
+  "frameworks": {
+    "dnx451": {},
+    "dnxcore50": {}
+  },
+
+  "exclude": [
+    "wwwroot",
+    "node_modules",
+  ],
+  "publishExclude": [
+    "node_modules",
+    "**.xproj",
+    "**.user",
+    "**.vspscc"
+  ],
+  "scripts": {
+    "prepare": [
+      "npm install",
+      "webpack --config webpack.config.vendor.js"
+    ],
+    "prepublish": [
+      "webpack"
+    ]
+  }
+}
--- a/templates/ReactReduxSpa/tsconfig.json
+++ b/templates/ReactReduxSpa/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "es6",
+    "jsx": "preserve",
+    "sourceMap": true,
+    "skipDefaultLibCheck": true
+  },
+  "exclude": [
+      "node_modules"
+  ]
+}
--- a/templates/ReactReduxSpa/tsd.json
+++ b/templates/ReactReduxSpa/tsd.json
@@ -0,0 +1,24 @@
+{
+  "version": "v4",
+  "repo": "borisyankov/DefinitelyTyped",
+  "ref": "master",
+  "path": "typings",
+  "bundle": "typings/tsd.d.ts",
+  "installed": {
+    "react/react.d.ts": {
+      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
+    },
+    "react-router/react-router.d.ts": {
+      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
+    },
+    "react/react-dom.d.ts": {
+      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
+    },
+    "react-router/history.d.ts": {
+      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
+    },
+    "whatwg-fetch/whatwg-fetch.d.ts": {
+      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
+    }
+  }
+}
--- a/templates/ReactReduxSpa/typings/react-router/history.d.ts
+++ b/templates/ReactReduxSpa/typings/react-router/history.d.ts
@@ -0,0 +1,192 @@
+// Type definitions for history v1.13.1
+// Project: https://github.com/rackt/history
+// Definitions by: Sergey Buturlakin <http://github.com/sergey-buturlakin>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+
+declare namespace HistoryModule {
+
+    // types based on https://github.com/rackt/history/blob/master/docs/Terms.md
+
+    type Action = string
+
+    type BeforeUnloadHook = () => string | boolean
+
+    type CreateHistory<T> = (options?: HistoryOptions) => T
+
+    type CreateHistoryEnhancer<T, E> = (createHistory: CreateHistory<T>) => CreateHistory<T & E>
+
+    interface History {
+        listenBefore(hook: TransitionHook): Function
+        listen(listener: LocationListener): Function
+        transitionTo(location: Location): void
+        pushState(state: LocationState, path: Path): void
+        replaceState(state: LocationState, path: Path): void
+        push(path: Path): void
+        replace(path: Path): void
+        go(n: number): void
+        goBack(): void
+        goForward(): void
+        createKey(): LocationKey
+        createPath(path: Path): Path
+        createHref(path: Path): Href
+        createLocation(path?: Path, state?: LocationState, action?: Action, key?: LocationKey): Location
+
+        /** @deprecated use location.key to save state instead */
+        setState(state: LocationState): void
+        /** @deprecated use listenBefore instead */
+        registerTransitionHook(hook: TransitionHook): void
+        /** @deprecated use the callback returned from listenBefore instead */
+        unregisterTransitionHook(hook: TransitionHook): void
+    }
+
+    type HistoryOptions = Object
+
+    type Href = string
+
+    type Location = {
+        pathname: Pathname
+        search: QueryString
+        query: Query
+        state: LocationState
+        action: Action
+        key: LocationKey
+    }
+
+    type LocationKey = string
+
+    type LocationListener = (location: Location) => void
+
+    type LocationState = Object
+
+    type Path = string // Pathname + QueryString
+
+    type Pathname = string
+
+    type Query = Object
+
+    type QueryString = string
+
+    type TransitionHook = (location: Location, callback: Function) => any
+
+
+    interface HistoryBeforeUnload {
+        listenBeforeUnload(hook: BeforeUnloadHook): Function
+    }
+
+    interface HistoryQueries {
+        pushState(state: LocationState, pathname: Pathname | Path, query?: Query): void
+        replaceState(state: LocationState, pathname: Pathname | Path, query?: Query): void
+        createPath(path: Path, query?: Query): Path
+        createHref(path: Path, query?: Query): Href
+    }
+
+
+    // Global usage, without modules, needs the small trick, because lib.d.ts
+    // already has `history` and `History` global definitions:
+    // var createHistory = ((window as any).History as HistoryModule.Module).createHistory;
+    interface Module {
+        createHistory: CreateHistory<History>
+        createHashHistory: CreateHistory<History>
+        createMemoryHistory: CreateHistory<History>
+        createLocation(path?: Path, state?: LocationState, action?: Action, key?: LocationKey): Location
+        useBasename<T>(createHistory: CreateHistory<T>): CreateHistory<T>
+        useBeforeUnload<T>(createHistory: CreateHistory<T>): CreateHistory<T & HistoryBeforeUnload>
+        useQueries<T>(createHistory: CreateHistory<T>): CreateHistory<T & HistoryQueries>
+        actions: {
+            PUSH: string
+            REPLACE: string
+            POP: string
+        }
+    }
+
+}
+
+
+declare module "history/lib/createBrowserHistory" {
+
+    export default function createBrowserHistory(options?: HistoryModule.HistoryOptions): HistoryModule.History
+
+}
+
+
+declare module "history/lib/createHashHistory" {
+
+    export default function createHashHistory(options?: HistoryModule.HistoryOptions): HistoryModule.History
+
+}
+
+
+declare module "history/lib/createMemoryHistory" {
+
+    export default function createMemoryHistory(options?: HistoryModule.HistoryOptions): HistoryModule.History
+
+}
+
+
+declare module "history/lib/createLocation" {
+
+    export default function createLocation(path?: HistoryModule.Path, state?: HistoryModule.LocationState, action?: HistoryModule.Action, key?: HistoryModule.LocationKey): HistoryModule.Location
+
+}
+
+
+declare module "history/lib/useBasename" {
+
+    export default function useBasename<T>(createHistory: HistoryModule.CreateHistory<T>): HistoryModule.CreateHistory<T>
+
+}
+
+
+declare module "history/lib/useBeforeUnload" {
+
+    export default function useBeforeUnload<T>(createHistory: HistoryModule.CreateHistory<T>): HistoryModule.CreateHistory<T & HistoryModule.HistoryBeforeUnload>
+
+}
+
+
+declare module "history/lib/useQueries" {
+
+    export default function useQueries<T>(createHistory: HistoryModule.CreateHistory<T>): HistoryModule.CreateHistory<T & HistoryModule.HistoryQueries>
+
+}
+
+
+declare module "history/lib/actions" {
+
+    export const PUSH: string
+
+    export const REPLACE: string
+
+    export const POP: string
+
+    export default {
+        PUSH,
+        REPLACE,
+        POP
+    }
+
+}
+
+
+declare module "history" {
+
+    export { default as createHistory } from "history/lib/createBrowserHistory"
+
+    export { default as createHashHistory } from "history/lib/createHashHistory"
+
+    export { default as createMemoryHistory } from "history/lib/createMemoryHistory"
+
+    export { default as createLocation } from "history/lib/createLocation"
+
+    export { default as useBasename } from "history/lib/useBasename"
+
+    export { default as useBeforeUnload } from "history/lib/useBeforeUnload"
+
+    export { default as useQueries } from "history/lib/useQueries"
+
+    import * as Actions from "history/lib/actions"
+
+    export { Actions }
+
+}
--- a/templates/ReactReduxSpa/typings/react-router/react-router.d.ts
+++ b/templates/ReactReduxSpa/typings/react-router/react-router.d.ts
@@ -0,0 +1,474 @@
+// Type definitions for react-router v2.0.0-rc5
+// Project: https://github.com/rackt/react-router
+// Definitions by: Sergey Buturlakin <http://github.com/sergey-buturlakin>, Yuichi Murata <https://github.com/mrk21>, Václav Ostrožlík <https://github.com/vasek17>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+
+/// <reference path="../react/react.d.ts" />
+/// <reference path="./history.d.ts"/>
+
+
+declare namespace ReactRouter {
+
+    import React = __React
+
+    import H = HistoryModule
+
+    // types based on https://github.com/rackt/react-router/blob/master/docs/Glossary.md
+
+    type Component = React.ReactType
+
+    type EnterHook = (nextState: RouterState, replaceState: RedirectFunction, callback?: Function) => any
+
+    type LeaveHook = () => any
+
+    type Params = Object
+
+    type ParseQueryString = (queryString: H.QueryString) => H.Query
+
+    type RedirectFunction = (state: H.LocationState, pathname: H.Pathname | H.Path, query?: H.Query) => void
+
+    type RouteComponent = Component
+
+    // use the following interface in an app code to get access to route param values, history, location...
+    // interface MyComponentProps extends ReactRouter.RouteComponentProps<{}, { id: number }> {}
+    // somewhere in MyComponent
+    // ...
+    //   let id = this.props.routeParams.id
+    // ...
+    //   this.props.history. ...
+    // ...
+    interface RouteComponentProps<P, R> {
+        history?: History
+        location?: H.Location
+        params?: P
+        route?: PlainRoute
+        routeParams?: R
+        routes?: PlainRoute[]
+        children?: React.ReactElement<any>
+    }
+
+    type RouteComponents = { [key: string]: RouteComponent }
+
+    type RouteConfig = React.ReactNode | PlainRoute | PlainRoute[]
+
+    type RouteHook = (nextLocation?: H.Location) => any
+
+    type RoutePattern = string
+
+    type StringifyQuery = (queryObject: H.Query) => H.QueryString
+
+    type RouterListener = (error: Error, nextState: RouterState) => void
+
+    interface RouterState {
+        location: H.Location
+        routes: PlainRoute[]
+        params: Params
+        components: RouteComponent[]
+    }
+
+
+    interface HistoryBase extends H.History {
+        routes: PlainRoute[]
+        parseQueryString?: ParseQueryString
+        stringifyQuery?: StringifyQuery
+    }
+
+    type History = HistoryBase & H.HistoryQueries & HistoryRoutes
+    const browserHistory: History;
+    const hashHistory: History;
+
+    /* components */
+
+    interface RouterProps extends React.Props<Router> {
+        history?: H.History
+        routes?: RouteConfig // alias for children
+        createElement?: (component: RouteComponent, props: Object) => any
+        onError?: (error: any) => any
+        onUpdate?: () => any
+        parseQueryString?: ParseQueryString
+        stringifyQuery?: StringifyQuery
+    }
+    interface Router extends React.ComponentClass<RouterProps> {}
+    interface RouterElement extends React.ReactElement<RouterProps> {}
+    const Router: Router
+
+
+    interface LinkProps extends React.HTMLAttributes, React.Props<Link> {
+        activeStyle?: React.CSSProperties
+        activeClassName?: string
+        onlyActiveOnIndex?: boolean
+        to: RoutePattern
+        query?: H.Query
+        state?: H.LocationState
+    }
+    interface Link extends React.ComponentClass<LinkProps> {}
+    interface LinkElement extends React.ReactElement<LinkProps> {}
+    const Link: Link
+
+
+    const IndexLink: Link
+
+
+    interface RouterContextProps extends React.Props<RouterContext> {
+        history?: H.History
+        router: Router
+        createElement: (component: RouteComponent, props: Object) => any
+        location: H.Location
+        routes: RouteConfig
+        params: Params
+        components?: RouteComponent[]
+    }
+    interface RouterContext extends React.ComponentClass<RouterContextProps> {}
+    interface RouterContextElement extends React.ReactElement<RouterContextProps> {
+        history?: H.History
+        location: H.Location
+        router?: Router
+    }
+    const RouterContext: RouterContext
+
+
+    /* components (configuration) */
+
+    interface RouteProps extends React.Props<Route> {
+        path?: RoutePattern
+        component?: RouteComponent
+        components?: RouteComponents
+        getComponent?: (location: H.Location, cb: (error: any, component?: RouteComponent) => void) => void
+        getComponents?: (location: H.Location, cb: (error: any, components?: RouteComponents) => void) => void
+        onEnter?: EnterHook
+        onLeave?: LeaveHook
+        getIndexRoute?: (location: H.Location, cb: (error: any, indexRoute: RouteConfig) => void) => void
+        getChildRoutes?: (location: H.Location, cb: (error: any, childRoutes: RouteConfig) => void) => void
+    }
+    interface Route extends React.ComponentClass<RouteProps> {}
+    interface RouteElement extends React.ReactElement<RouteProps> {}
+    const Route: Route
+
+
+    interface PlainRoute {
+        path?: RoutePattern
+        component?: RouteComponent
+        components?: RouteComponents
+        getComponent?: (location: H.Location, cb: (error: any, component?: RouteComponent) => void) => void
+        getComponents?: (location: H.Location, cb: (error: any, components?: RouteComponents) => void) => void
+        onEnter?: EnterHook
+        onLeave?: LeaveHook
+        indexRoute?: PlainRoute
+        getIndexRoute?: (location: H.Location, cb: (error: any, indexRoute: RouteConfig) => void) => void
+        childRoutes?: PlainRoute[]
+        getChildRoutes?: (location: H.Location, cb: (error: any, childRoutes: RouteConfig) => void) => void
+    }
+
+
+    interface RedirectProps extends React.Props<Redirect> {
+        path?: RoutePattern
+        from?: RoutePattern // alias for path
+        to: RoutePattern
+        query?: H.Query
+        state?: H.LocationState
+    }
+    interface Redirect extends React.ComponentClass<RedirectProps> {}
+    interface RedirectElement extends React.ReactElement<RedirectProps> {}
+    const Redirect: Redirect
+
+
+    interface IndexRouteProps extends React.Props<IndexRoute> {
+        component?: RouteComponent
+        components?: RouteComponents
+        getComponent?: (location: H.Location, cb: (error: any, component?: RouteComponent) => void) => void
+        getComponents?: (location: H.Location, cb: (error: any, components?: RouteComponents) => void) => void
+        onEnter?: EnterHook
+        onLeave?: LeaveHook
+    }
+    interface IndexRoute extends React.ComponentClass<IndexRouteProps> {}
+    interface IndexRouteElement extends React.ReactElement<IndexRouteProps> {}
+    const IndexRoute: IndexRoute
+
+
+    interface IndexRedirectProps extends React.Props<IndexRedirect> {
+        to: RoutePattern
+        query?: H.Query
+        state?: H.LocationState
+    }
+    interface IndexRedirect extends React.ComponentClass<IndexRedirectProps> {}
+    interface IndexRedirectElement extends React.ReactElement<IndexRedirectProps> {}
+    const IndexRedirect: IndexRedirect
+
+
+    /* mixins */
+
+    interface HistoryMixin {
+        history: History
+    }
+    const History: React.Mixin<any, any>
+
+
+    interface LifecycleMixin {
+        routerWillLeave(nextLocation: H.Location): string | boolean
+    }
+    const Lifecycle: React.Mixin<any, any>
+
+
+    const RouteContext: React.Mixin<any, any>
+
+
+    /* utils */
+
+    interface HistoryRoutes {
+        listen(listener: RouterListener): Function
+        listenBeforeLeavingRoute(route: PlainRoute, hook: RouteHook): void
+        match(location: H.Location, callback: (error: any, nextState: RouterState, nextLocation: H.Location) => void): void
+        isActive(pathname: H.Pathname, query?: H.Query, indexOnly?: boolean): boolean
+    }
+
+    function useRoutes<T>(createHistory: HistoryModule.CreateHistory<T>): HistoryModule.CreateHistory<T & HistoryRoutes>
+
+
+    function createRoutes(routes: RouteConfig): PlainRoute[]
+
+
+    interface MatchArgs {
+        routes?: RouteConfig
+        history?: H.History
+        location?: H.Location
+        parseQueryString?: ParseQueryString
+        stringifyQuery?: StringifyQuery
+    }
+    interface MatchState extends RouterState {
+        history: History
+    }
+    function match(args: MatchArgs, cb: (error: any, nextLocation: H.Location, nextState: MatchState) => void): void
+
+}
+
+
+declare module "react-router/lib/Router" {
+
+    export default ReactRouter.Router
+
+}
+
+
+declare module "react-router/lib/Link" {
+
+    export default ReactRouter.Link
+
+}
+
+
+declare module "react-router/lib/IndexLink" {
+
+    export default ReactRouter.IndexLink
+
+}
+
+
+declare module "react-router/lib/IndexRedirect" {
+
+    export default ReactRouter.IndexRedirect
+
+}
+
+
+declare module "react-router/lib/IndexRoute" {
+
+    export default ReactRouter.IndexRoute
+
+}
+
+
+declare module "react-router/lib/Redirect" {
+
+    export default ReactRouter.Redirect
+
+}
+
+
+declare module "react-router/lib/Route" {
+
+    export default ReactRouter.Route
+
+}
+
+
+declare module "react-router/lib/History" {
+
+    export default ReactRouter.History
+
+}
+
+
+declare module "react-router/lib/Lifecycle" {
+
+    export default ReactRouter.Lifecycle
+
+}
+
+
+declare module "react-router/lib/RouteContext" {
+
+    export default ReactRouter.RouteContext
+
+}
+
+
+declare module "react-router/lib/useRoutes" {
+
+    export default ReactRouter.useRoutes
+
+}
+
+declare module "react-router/lib/PatternUtils" {
+
+	export function formatPattern(pattern: string, params: {}): string;
+
+}
+
+declare module "react-router/lib/RouteUtils" {
+
+    type E = __React.ReactElement<any>
+
+    export function isReactChildren(object: E | E[]): boolean
+
+    export function createRouteFromReactElement(element: E): ReactRouter.PlainRoute
+
+    export function createRoutesFromReactChildren(children: E | E[], parentRoute: ReactRouter.PlainRoute): ReactRouter.PlainRoute[]
+
+    export import createRoutes = ReactRouter.createRoutes
+
+}
+
+
+declare module "react-router/lib/RouterContext" {
+
+    export default ReactRouter.RouterContext
+
+}
+
+
+declare module "react-router/lib/PropTypes" {
+
+    import React = __React
+
+    export function falsy(props: any, propName: string, componentName: string): Error;
+
+    export const history: React.Requireable<any>
+
+    export const location: React.Requireable<any>
+
+    export const component: React.Requireable<any>
+
+    export const components: React.Requireable<any>
+
+    export const route: React.Requireable<any>
+
+    export const routes: React.Requireable<any>
+
+    export default {
+        falsy,
+        history,
+        location,
+        component,
+        components,
+        route
+    }
+
+}
+
+declare module "react-router/lib/browserHistory" {
+  export default ReactRouter.browserHistory;
+}
+
+declare module "react-router/lib/hashHistory" {
+  export default ReactRouter.hashHistory;
+}
+
+declare module "react-router/lib/match" {
+
+    export default ReactRouter.match
+
+}
+
+
+declare module "react-router" {
+
+    import Router from "react-router/lib/Router"
+
+    import Link from "react-router/lib/Link"
+
+    import IndexLink from "react-router/lib/IndexLink"
+
+    import IndexRedirect from "react-router/lib/IndexRedirect"
+
+    import IndexRoute from "react-router/lib/IndexRoute"
+
+    import Redirect from "react-router/lib/Redirect"
+
+    import Route from "react-router/lib/Route"
+
+    import History from "react-router/lib/History"
+
+    import Lifecycle from "react-router/lib/Lifecycle"
+
+    import RouteContext from "react-router/lib/RouteContext"
+
+    import browserHistory from "react-router/lib/browserHistory"
+
+    import hashHistory from "react-router/lib/hashHistory"
+
+    import useRoutes from "react-router/lib/useRoutes"
+
+    import { createRoutes } from "react-router/lib/RouteUtils"
+
+    import { formatPattern } from "react-router/lib/PatternUtils"
+
+    import RouterContext from "react-router/lib/RouterContext"
+
+    import PropTypes from "react-router/lib/PropTypes"
+
+    import match from "react-router/lib/match"
+
+    // PlainRoute is defined in the API documented at:
+    // https://github.com/rackt/react-router/blob/master/docs/API.md
+    // but not included in any of the .../lib modules above.
+    export type PlainRoute = ReactRouter.PlainRoute
+
+    // The following definitions are also very useful to export
+    // because by using these types lots of potential type errors
+    // can be exposed:
+    export type EnterHook = ReactRouter.EnterHook
+    export type LeaveHook = ReactRouter.LeaveHook
+    export type ParseQueryString = ReactRouter.ParseQueryString
+    export type RedirectFunction = ReactRouter.RedirectFunction
+    export type RouteComponentProps<P,R> = ReactRouter.RouteComponentProps<P,R>;
+    export type RouteHook = ReactRouter.RouteHook
+    export type StringifyQuery = ReactRouter.StringifyQuery
+    export type RouterListener = ReactRouter.RouterListener
+    export type RouterState = ReactRouter.RouterState
+    export type HistoryBase = ReactRouter.HistoryBase
+
+    export {
+        Router,
+        Link,
+        IndexLink,
+        IndexRedirect,
+        IndexRoute,
+        Redirect,
+        Route,
+        History,
+        browserHistory,
+        hashHistory,
+        Lifecycle,
+        RouteContext,
+        useRoutes,
+        createRoutes,
+        formatPattern,
+        RouterContext,
+        PropTypes,
+        match
+    }
+
+    export default Router
+
+}
--- a/templates/ReactReduxSpa/typings/react/react-dom.d.ts
+++ b/templates/ReactReduxSpa/typings/react/react-dom.d.ts
@@ -0,0 +1,66 @@
+// Type definitions for React v0.14 (react-dom)
+// Project: http://facebook.github.io/react/
+// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="react.d.ts" />
+
+declare namespace __React {
+    namespace __DOM {
+        function findDOMNode<E extends Element>(instance: ReactInstance): E;
+        function findDOMNode(instance: ReactInstance): Element;
+
+        function render<P>(
+            element: DOMElement<P>,
+            container: Element,
+            callback?: (element: Element) => any): Element;
+        function render<P, S>(
+            element: ClassicElement<P>,
+            container: Element,
+            callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
+        function render<P, S>(
+            element: ReactElement<P>,
+            container: Element,
+            callback?: (component: Component<P, S>) => any): Component<P, S>;
+
+        function unmountComponentAtNode(container: Element): boolean;
+
+        var version: string;
+
+        function unstable_batchedUpdates<A, B>(callback: (a: A, b: B) => any, a: A, b: B): void;
+        function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
+        function unstable_batchedUpdates(callback: () => any): void;
+
+        function unstable_renderSubtreeIntoContainer<P>(
+            parentComponent: Component<any, any>,
+            nextElement: DOMElement<P>,
+            container: Element,
+            callback?: (element: Element) => any): Element;
+        function unstable_renderSubtreeIntoContainer<P, S>(
+            parentComponent: Component<any, any>,
+            nextElement: ClassicElement<P>,
+            container: Element,
+            callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
+        function unstable_renderSubtreeIntoContainer<P, S>(
+            parentComponent: Component<any, any>,
+            nextElement: ReactElement<P>,
+            container: Element,
+            callback?: (component: Component<P, S>) => any): Component<P, S>;
+    }
+
+    namespace __DOMServer {
+        function renderToString(element: ReactElement<any>): string;
+        function renderToStaticMarkup(element: ReactElement<any>): string;
+        var version: string;
+    }
+}
+
+declare module "react-dom" {
+    import DOM = __React.__DOM;
+    export = DOM;
+}
+
+declare module "react-dom/server" {
+    import DOMServer = __React.__DOMServer;
+    export = DOMServer;
+}
--- a/templates/ReactReduxSpa/typings/react/react.d.ts
+++ b/templates/ReactReduxSpa/typings/react/react.d.ts
--- a/templates/ReactReduxSpa/typings/tsd.d.ts
+++ b/templates/ReactReduxSpa/typings/tsd.d.ts
@@ -0,0 +1,6 @@
+
+/// <reference path="react/react.d.ts" />
+/// <reference path="react-router/history.d.ts" />
+/// <reference path="react-router/react-router.d.ts" />
+/// <reference path="react/react-dom.d.ts" />
+/// <reference path="whatwg-fetch/whatwg-fetch.d.ts" />
--- a/templates/ReactReduxSpa/typings/whatwg-fetch/whatwg-fetch.d.ts
+++ b/templates/ReactReduxSpa/typings/whatwg-fetch/whatwg-fetch.d.ts
@@ -0,0 +1,85 @@
+// Type definitions for fetch API
+// Project: https://github.com/github/fetch
+// Definitions by: Ryan Graham <https://github.com/ryan-codingintrigue>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+declare class Request extends Body {
+	constructor(input: string|Request, init?:RequestInit);
+	method: string;
+	url: string;
+	headers: Headers;
+	context: string|RequestContext;
+	referrer: string;
+	mode: string|RequestMode;
+	credentials: string|RequestCredentials;
+	cache: string|RequestCache;
+}
+
+interface RequestInit {
+	method?: string;
+	headers?: HeaderInit|{ [index: string]: string };
+	body?: BodyInit;
+	mode?: string|RequestMode;
+	credentials?: string|RequestCredentials;
+	cache?: string|RequestCache;
+}
+
+declare enum RequestContext {
+	"audio", "beacon", "cspreport", "download", "embed", "eventsource", "favicon", "fetch",
+	"font", "form", "frame", "hyperlink", "iframe", "image", "imageset", "import",
+	"internal", "location", "manifest", "object", "ping", "plugin", "prefetch", "script",
+	"serviceworker", "sharedworker", "subresource", "style", "track", "video", "worker",
+	"xmlhttprequest", "xslt"
+}
+declare enum RequestMode { "same-origin", "no-cors", "cors" }
+declare enum RequestCredentials { "omit", "same-origin", "include" }
+declare enum RequestCache { "default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached" }
+
+declare class Headers {
+	append(name: string, value: string): void;
+	delete(name: string):void;
+	get(name: string): string;
+	getAll(name: string): Array<string>;
+	has(name: string): boolean;
+	set(name: string, value: string): void;
+}
+
+declare class Body {
+	bodyUsed: boolean;
+	arrayBuffer(): Promise<ArrayBuffer>;
+	blob(): Promise<Blob>;
+	formData(): Promise<FormData>;
+	json(): Promise<any>;
+	json<T>(): Promise<T>;
+	text(): Promise<string>;
+}
+declare class Response extends Body {
+	constructor(body?: BodyInit, init?: ResponseInit);
+	error(): Response;
+	redirect(url: string, status: number): Response;
+	type: string|ResponseType;
+	url: string;
+	status: number;
+	ok: boolean;
+	statusText: string;
+	headers: Headers;
+	clone(): Response;
+}
+
+declare enum ResponseType { "basic", "cors", "default", "error", "opaque" }
+
+interface ResponseInit {
+	status: number;
+	statusText?: string;
+	headers?: HeaderInit;
+}
+
+declare type HeaderInit = Headers|Array<string>;
+declare type BodyInit = Blob|FormData|string;
+declare type RequestInfo = Request|string;
+
+interface Window {
+	fetch(url: string|Request, init?: RequestInit): Promise<Response>;
+}
+
+declare var fetch: typeof window.fetch;
--- a/templates/ReactReduxSpa/webpack.config.dev.js
+++ b/templates/ReactReduxSpa/webpack.config.dev.js
@@ -0,0 +1,8 @@
+module.exports = {
+    devtool: 'inline-source-map',
+    module: {
+        loaders: [
+            { test: /\.css/, loader: 'style!css' }
+        ]
+    }
+};
--- a/templates/ReactReduxSpa/webpack.config.js
+++ b/templates/ReactReduxSpa/webpack.config.js
@@ -0,0 +1,32 @@
+var path = require('path');
+var webpack = require('webpack');
+var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
+var devConfig = require('./webpack.config.dev');
+var prodConfig = require('./webpack.config.prod');
+var isDevelopment = process.env.ASPNET_ENV === 'Development';
+
+module.exports = merge({
+    resolve: {
+        extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ]
+    },
+    module: {
+        loaders: [
+            { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'babel-loader' },
+            { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader' }
+        ]
+    },
+    entry: {
+        main: ['./ClientApp/boot.tsx'],
+    },
+    output: {
+        path: path.join(__dirname, 'wwwroot', 'dist'),
+        filename: '[name].js',
+        publicPath: '/dist/'
+    },
+    plugins: [
+        new webpack.DllReferencePlugin({
+            context: __dirname,
+            manifest: require('./wwwroot/dist/vendor-manifest.json')
+        })
+    ]
+}, isDevelopment ? devConfig : prodConfig);
--- a/templates/ReactReduxSpa/webpack.config.prod.js
+++ b/templates/ReactReduxSpa/webpack.config.prod.js
@@ -0,0 +1,16 @@
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var extractCSS = new ExtractTextPlugin('site.css');
+
+module.exports = {
+    module: {
+        loaders: [
+            { test: /\.css/, loader: extractCSS.extract(['css']) },
+        ]
+    },
+    plugins: [
+        extractCSS,
+        new webpack.optimize.OccurenceOrderPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
+    ]
+};
--- a/templates/ReactReduxSpa/webpack.config.vendor.js
+++ b/templates/ReactReduxSpa/webpack.config.vendor.js
@@ -0,0 +1,36 @@
+var path = require('path');
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var extractCSS = new ExtractTextPlugin('vendor.css');
+var isDevelopment = process.env.ASPNET_ENV === 'Development';
+
+module.exports = {
+    resolve: {
+        extensions: [ '', '.js' ]
+    },
+    module: {
+        loaders: [
+            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
+            { test: /\.css/, loader: extractCSS.extract(['css']) }
+        ]
+    },
+    entry: {
+        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'],
+    },
+    output: {
+        path: path.join(__dirname, 'wwwroot', 'dist'),
+        filename: '[name].js',
+        library: '[name]_[hash]',
+    },
+    plugins: [
+        extractCSS,
+        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
+        new webpack.optimize.OccurenceOrderPlugin(),
+        new webpack.DllPlugin({
+            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
+            name: '[name]_[hash]'
+        })
+    ].concat(isDevelopment ? [] : [
+        new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
+    ])
+};
--- a/templates/ReactReduxSpa/wwwroot/favicon.ico
+++ b/templates/ReactReduxSpa/wwwroot/favicon.ico
--- a/templates/ReactReduxSpa/wwwroot/web.config
+++ b/templates/ReactReduxSpa/wwwroot/web.config
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <system.webServer>
+    <handlers>
+      <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified"/>
+    </handlers>
+    <httpPlatform processPath="%DNX_PATH%" arguments="%DNX_ARGS%" stdoutLogEnabled="false"/>
+  </system.webServer>
+</configuration>