Fix templates directory structure to produce correct nupkg output

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/redux/ClientApp/components/Counter.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { ApplicationState }  from '../store';
+import * as CounterStore from '../store/Counter';
+import * as WeatherForecasts from '../store/WeatherForecasts';
+
+type CounterProps =
+    CounterStore.CounterState
+    & typeof CounterStore.actionCreators
+    & RouteComponentProps<{}>;
+
+class Counter extends React.Component<CounterProps, {}> {
+    public render() {
+        return <div>
+            <h1>Counter</h1>
+
+            <p>This is a simple example of a React component.</p>
+
+            <p>Current count: <strong>{ this.props.count }</strong></p>
+
+            <button onClick={ () => { this.props.increment() } }>Increment</button>
+        </div>;
+    }
+}
+
+// Wire up the React component to the Redux store
+export default connect(
+    (state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
+    CounterStore.actionCreators                 // Selects which action creators are merged into the component's props
+)(Counter) as typeof Counter;

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/redux/ClientApp/components/FetchData.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { ApplicationState }  from '../store';
+import * as WeatherForecastsState from '../store/WeatherForecasts';
+
+// At runtime, Redux will merge together...
+type WeatherForecastProps =
+    WeatherForecastsState.WeatherForecastsState        // ... state we've requested from the Redux store
+    & typeof WeatherForecastsState.actionCreators      // ... plus action creators we've requested
+    & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters
+
+class FetchData extends React.Component<WeatherForecastProps, {}> {
+    componentWillMount() {
+        // This method runs when the component is first added to the page
+        let startDateIndex = parseInt(this.props.match.params.startDateIndex) || 0;
+        this.props.requestWeatherForecasts(startDateIndex);
+    }
+
+    componentWillReceiveProps(nextProps: WeatherForecastProps) {
+        // This method runs when incoming props (e.g., route params) change
+        let startDateIndex = parseInt(nextProps.match.params.startDateIndex) || 0;
+        this.props.requestWeatherForecasts(startDateIndex);
+    }
+
+    public render() {
+        return <div>
+            <h1>Weather forecast</h1>
+            <p>This component demonstrates fetching data from the server and working with URL parameters.</p>
+            { this.renderForecastsTable() }
+            { this.renderPagination() }
+        </div>;
+    }
+
+    private renderForecastsTable() {
+        return <table className='table'>
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Temp. (C)</th>
+                    <th>Temp. (F)</th>
+                    <th>Summary</th>
+                </tr>
+            </thead>
+            <tbody>
+            {this.props.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>;
+    }
+
+    private renderPagination() {
+        let prevStartDateIndex = (this.props.startDateIndex || 0) - 5;
+        let nextStartDateIndex = (this.props.startDateIndex || 0) + 5;
+
+        return <p className='clearfix text-center'>
+            <Link className='btn btn-default pull-left' to={ `/fetchdata/${ prevStartDateIndex }` }>Previous</Link>
+            <Link className='btn btn-default pull-right' to={ `/fetchdata/${ nextStartDateIndex }` }>Next</Link>
+            { this.props.isLoading ? <span>Loading...</span> : [] }
+        </p>;
+    }
+}
+
+export default connect(
+    (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
+    WeatherForecastsState.actionCreators                 // Selects which action creators are merged into the component's props
+)(FetchData) as typeof FetchData;

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/redux/ClientApp/components/Home.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+export default class Home extends React.Component<RouteComponentProps<{}>, {}> {
+    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>, <a href='http://redux.js.org'>Redux</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 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>
+                <li><strong>Server-side prerendering</strong>. To optimize startup time, your React application is first rendered on the server. The initial HTML and state is then transferred to the browser, where client-side code picks up where the server left off.</li>
+            </ul>
+        </div>;
+    }
+}

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/redux/ClientApp/components/Layout.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { NavMenu } from './NavMenu';
+
+export class Layout extends React.Component<{}, {}> {
+    public render() {
+        return <div className='container-fluid'>
+            <div className='row'>
+                <div className='col-sm-3'>
+                    <NavMenu />
+                </div>
+                <div className='col-sm-9'>
+                    { this.props.children }
+                </div>
+            </div>
+        </div>;
+    }
+}

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/redux/ClientApp/components/NavMenu.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { NavLink, Link } from 'react-router-dom';
+
+export class NavMenu extends React.Component<{}, {}> {
+    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={ '/' }>ReactReduxSpa</Link>
+                </div>
+                <div className='clearfix'></div>
+                <div className='navbar-collapse collapse'>
+                    <ul className='nav navbar-nav'>
+                        <li>
+                            <NavLink exact to={ '/' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-home'></span> Home
+                            </NavLink>
+                        </li>
+                        <li>
+                            <NavLink to={ '/counter' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-education'></span> Counter
+                            </NavLink>
+                        </li>
+                        <li>
+                            <NavLink to={ '/fetchdata' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-th-list'></span> Fetch data
+                            </NavLink>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>;
+    }
+}