Merge branch 'rel/2.0.0-templates' into dev

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-prerendering/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-prerendering",
-  "version": "2.0.6",
+  "version": "3.0.1",
   "description": "Helpers for server-side rendering of JavaScript applications in ASP.NET Core projects. Works in conjunction with the Microsoft.AspNetCore.SpaServices NuGet package.",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "url": "https://github.com/aspnet/JavaScriptServices.git"
   },
   "dependencies": {
-    "domain-task": "^2.0.2"
+    "domain-task": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^6.0.42",

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-prerendering/src/Prerendering.ts

@@ -26,6 +26,7 @@ export function createServerRenderer(bootFunc: BootFunc): RenderToStringFunc {
             domainTasks: domainTaskCompletionPromise,
             data: customDataParameter
         };
+        const absoluteBaseUrl = params.origin + params.baseUrl; // Should be same value as page's <base href>
 
         // Open a new domain that can track all the async tasks involved in the app's execution
         domainTaskRun(/* code to run */ () => {
@@ -35,7 +36,7 @@ export function createServerRenderer(bootFunc: BootFunc): RenderToStringFunc {
             bindPromiseContinuationsToDomain(domainTaskCompletionPromise, domain['active']);
 
             // Make the base URL available to the 'domain-tasks/fetch' helper within this execution context
-            domainTaskBaseUrl(absoluteRequestUrl);
+            domainTaskBaseUrl(absoluteBaseUrl);
 
             // Begin rendering, and apply a timeout
             const bootFuncPromise = bootFunc(params);

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-webpack-react",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "description": "Helpers for using Webpack with React in ASP.NET Core projects. Works in conjunction with the Microsoft.AspNetCore.SpaServices NuGet package.",
   "main": "index.js",
   "scripts": {

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-webpack",
-  "version": "1.0.29",
+  "version": "2.0.0",
   "description": "Helpers for using Webpack in ASP.NET Core projects. Works in conjunction with the Microsoft.AspNetCore.SpaServices NuGet package.",
   "main": "index.js",
   "scripts": {

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts

@@ -108,7 +108,7 @@ function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configurati
     const compiler = webpack(webpackConfig);
     app.use(require('webpack-dev-middleware')(compiler, {
         noInfo: true,
-        publicPath: webpackConfig.output.publicPath,
+        publicPath: ensureLeadingSlash(webpackConfig.output.publicPath),
         watchOptions: webpackConfig.watchOptions
     }));
 
@@ -195,6 +195,14 @@ function copyRecursiveToRealFsSync(from: typeof fs, rootDir: string, exclude: Re
     });
 }
 
+function ensureLeadingSlash(value: string) {
+    if (value !== null && value.substring(0, 1) !== '/') {
+        value = '/' + value;
+    }
+
+    return value;
+}
+
 function pathJoinSafe(rootPath: string, filePath: string) {
     // On Windows, MemoryFileSystem's readdirSync output produces directory entries like 'C:'
     // which then trigger errors if you call statSync for them. Avoid this by detecting drive
@@ -257,22 +265,32 @@ export function createWebpackDevServer(callback: CreateDevServerCallback, option
                     if (!publicPath) {
                         throw new Error('To use the Webpack dev server, you must specify a value for \'publicPath\' on the \'output\' section of your webpack config (for any configuration that targets browsers)');
                     }
-                    normalizedPublicPaths.push(removeTrailingSlash(publicPath));
+                    const publicPathNoTrailingSlash = removeTrailingSlash(publicPath);
+                    normalizedPublicPaths.push(publicPathNoTrailingSlash);
 
-                    // Newer versions of Microsoft.AspNetCore.SpaServices will explicitly pass an HMR endpoint URL
+                    // This is the URL the client will connect to, except that since it's a relative URL
-                    // (because it's relative to the app's URL space root, which the client doesn't otherwise know).
+                    // (no leading slash), Webpack will resolve it against the runtime <base href> URL
-                    // For back-compatibility, fall back on connecting directly to the underlying HMR server (though
+                    // plus it also adds the publicPath
-                    // that won't work if the app is hosted on HTTPS because of the mixed-content rule, and we can't
+                    const hmrClientEndpoint = removeLeadingSlash(options.hotModuleReplacementEndpointUrl);
-                    // run the HMR server itself on HTTPS because in general it has no valid cert).
+
-                    const hmrClientEndpoint = options.hotModuleReplacementEndpointUrl   // The URL that we'll proxy (e.g., /__asp_webpack_hmr)
+                    // This is the URL inside the Webpack middleware Node server that we'll proxy to.
-                        || `http://localhost:${listener.address().port}/__webpack_hmr`; // Fall back on absolute URL to bypass proxying
+                    // We have to prefix with the public path because Webpack will add the publicPath
-                    const hmrServerEndpoint = options.hotModuleReplacementEndpointUrl
+                    // when it resolves hmrClientEndpoint as a relative URL.
-                        || '/__webpack_hmr';                                            // URL is relative to webpack dev server root
+                    const hmrServerEndpoint = ensureLeadingSlash(publicPathNoTrailingSlash + options.hotModuleReplacementEndpointUrl);
 
                     // We always overwrite the 'path' option as it needs to match what the .NET side is expecting
                     const hmrClientOptions = options.suppliedOptions.HotModuleReplacementClientOptions || <StringMap<string>>{};
                     hmrClientOptions['path'] = hmrClientEndpoint;
 
+                    const dynamicPublicPathKey = 'dynamicPublicPath';
+                    if (!(dynamicPublicPathKey in hmrClientOptions)) {
+                        // dynamicPublicPath default to true, so we can work with nonempty pathbases (virtual directories)
+                        hmrClientOptions[dynamicPublicPathKey] = true;
+                    } else {
+                        // ... but you can set it to any other value explicitly if you want (e.g., false)
+                        hmrClientOptions[dynamicPublicPathKey] = JSON.parse(hmrClientOptions[dynamicPublicPathKey]);
+                    }
+
                     attachWebpackDevMiddleware(app, webpackConfig, enableHotModuleReplacement, enableReactHotModuleReplacement, hmrClientOptions, hmrServerEndpoint);
                 }
             });
@@ -292,6 +310,14 @@ export function createWebpackDevServer(callback: CreateDevServerCallback, option
     });
 }
 
+function removeLeadingSlash(str: string) {
+    if (str.indexOf('/') === 0) {
+        str = str.substring(1);
+    }
+
+    return str;
+}
+
 function removeTrailingSlash(str: string) {
     if (str.lastIndexOf('/') === str.length - 1) {
         str = str.substring(0, str.length - 1);

templates/AngularSpa/ClientApp/app/app.module.browser.ts

@@ -10,12 +10,12 @@ import { AppComponent } from './components/app/app.component';
         AppModuleShared
     ],
     providers: [
-        { provide: 'ORIGIN_URL', useFactory: getOriginUrl }
+        { provide: 'BASE_URL', useFactory: getBaseUrl }
     ]
 })
 export class AppModule {
 }
 
-export function getOriginUrl() { 
+export function getBaseUrl() {
-    return location.origin; 
+    return document.getElementsByTagName('base')[0].href;
 }

templates/AngularSpa/ClientApp/app/components/fetchdata/fetchdata.component.ts

@@ -8,8 +8,8 @@ import { Http } from '@angular/http';
 export class FetchDataComponent {
     public forecasts: WeatherForecast[];
 
-    constructor(http: Http, @Inject('ORIGIN_URL') originUrl: string) {
+    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
-        http.get(originUrl + '/api/SampleData/WeatherForecasts').subscribe(result => {
+        http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
             this.forecasts = result.json() as WeatherForecast[];
         }, error => console.error(error));
     }

templates/AngularSpa/ClientApp/boot.server.ts

@@ -1,6 +1,7 @@
 import 'reflect-metadata';
 import 'zone.js';
 import 'rxjs/add/operator/first';
+import { APP_BASE_HREF } from '@angular/common';
 import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/core';
 import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
 import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
@@ -11,7 +12,8 @@ enableProdMode();
 export default createServerRenderer(params => {
     const providers = [
         { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
-        { provide: 'ORIGIN_URL', useValue: params.origin }
+        { provide: APP_BASE_HREF, useValue: params.baseUrl },
+        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
     ];
 
     return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {

templates/AngularSpa/npm-shrinkwrap.json

@@ -274,14 +274,14 @@
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.9.1.tgz"
     },
     "aspnet-prerendering": {
-      "version": "2.0.6",
+      "version": "3.0.1",
-      "from": "aspnet-prerendering@>=2.0.5 <3.0.0",
+      "from": "aspnet-prerendering@3.0.1",
-      "resolved": "https://registry.npmjs.org/aspnet-prerendering/-/aspnet-prerendering-2.0.6.tgz"
+      "resolved": "https://registry.npmjs.org/aspnet-prerendering/-/aspnet-prerendering-3.0.1.tgz"
     },
     "aspnet-webpack": {
-      "version": "1.0.29",
+      "version": "2.0.0",
-      "from": "aspnet-webpack@>=1.0.29 <2.0.0",
+      "from": "aspnet-webpack@2.0.0",
-      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-1.0.29.tgz"
+      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-2.0.0.tgz"
     },
     "assert": {
       "version": "1.4.1",
@@ -932,9 +932,9 @@
       "resolved": "https://registry.npmjs.org/domain-context/-/domain-context-0.5.1.tgz"
     },
     "domain-task": {
-      "version": "2.0.3",
+      "version": "3.0.3",
-      "from": "domain-task@>=2.0.2 <3.0.0",
+      "from": "domain-task@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/domain-task/-/domain-task-2.0.3.tgz"
+      "resolved": "https://registry.npmjs.org/domain-task/-/domain-task-3.0.3.tgz"
     },
     "ee-first": {
       "version": "1.1.1",

templates/AngularSpa/package.json

@@ -20,8 +20,8 @@
     "@ngtools/webpack": "1.5.0",
     "@types/node": "8.0.8",
     "angular2-template-loader": "0.6.2",
-    "aspnet-prerendering": "^2.0.5",
+    "aspnet-prerendering": "^3.0.1",
-    "aspnet-webpack": "^1.0.29",
+    "aspnet-webpack": "^2.0.0",
     "awesome-typescript-loader": "3.2.1",
     "bootstrap": "3.3.7",
     "css": "2.2.1",

templates/AngularSpa/webpack.config.js

@@ -13,7 +13,7 @@ module.exports = (env) => {
         resolve: { extensions: [ '.js', '.ts' ] },
         output: {
             filename: '[name].js',
-            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
+            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
         },
         module: {
             rules: [

templates/AngularSpa/webpack.config.vendor.js

@@ -36,7 +36,7 @@ module.exports = (env) => {
             ]
         },
         output: {
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js',
             library: '[name]_[hash]'
         },

templates/AureliaSpa/ClientApp/app/components/fetchdata/fetchdata.ts

@@ -6,7 +6,7 @@ export class Fetchdata {
     public forecasts: WeatherForecast[];
 
     constructor(http: HttpClient) {
-        http.fetch('/api/SampleData/WeatherForecasts')
+        http.fetch('api/SampleData/WeatherForecasts')
             .then(result => result.json() as Promise<WeatherForecast[]>)
             .then(data => {
                 this.forecasts = data;

templates/AureliaSpa/ClientApp/boot.ts

@@ -1,5 +1,6 @@
 import 'isomorphic-fetch';
 import { Aurelia, PLATFORM } from 'aurelia-framework';
+import { HttpClient } from 'aurelia-fetch-client';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap';
 declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build
@@ -11,5 +12,10 @@ export function configure(aurelia: Aurelia) {
         aurelia.use.developmentLogging();
     }
 
+    new HttpClient().configure(config => {
+        const baseUrl = document.getElementsByTagName('base')[0].href;
+        config.withBaseUrl(baseUrl);
+    });
+
     aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
 }

templates/AureliaSpa/npm-shrinkwrap.json

@@ -113,9 +113,9 @@
       "dev": true
     },
     "aspnet-webpack": {
-      "version": "1.0.29",
+      "version": "2.0.0",
-      "from": "aspnet-webpack@>=1.0.28 <2.0.0",
+      "from": "aspnet-webpack@2.0.0",
-      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-1.0.29.tgz",
+      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-2.0.0.tgz",
       "dev": true
     },
     "assert": {

templates/AureliaSpa/package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@types/node": "^7.0.12",
-    "aspnet-webpack": "^1.0.28",
+    "aspnet-webpack": "^2.0.0",
     "aurelia-webpack-plugin": "^2.0.0-rc.2",
     "css-loader": "^0.28.0",
     "extract-text-webpack-plugin": "^2.1.0",

templates/AureliaSpa/webpack.config.js

@@ -14,7 +14,7 @@ module.exports = (env) => {
         },
         output: {
             path: path.resolve(bundleOutputDir),
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js'
         },
         module: {

templates/AureliaSpa/webpack.config.vendor.js

@@ -38,7 +38,7 @@ module.exports = ({ prod } = {}) => {
         },
         output: {
             path: path.join(__dirname, 'wwwroot', 'dist'),
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js',
             library: '[name]_[hash]',
         },

templates/KnockoutSpa/ClientApp/boot.ts

@@ -4,12 +4,14 @@ import * as ko from 'knockout';
 import './webpack-component-loader';
 import AppRootComponent from './components/app-root/app-root';
 const createHistory = require('history').createBrowserHistory;
+const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
+const basename = baseUrl.substring(0, baseUrl.length - 1); // History component needs no trailing slash
 
 // Load and register the <app-root> component
 ko.components.register('app-root', AppRootComponent);
 
 // Tell Knockout to start up an instance of your application
-ko.applyBindings({ history: createHistory() });
+ko.applyBindings({ history: createHistory({ basename }), basename });
 
 // Basic hot reloading support. Automatically reloads and restarts the Knockout app each time
 // you modify source files. This will not preserve any application state other than the URL.

templates/KnockoutSpa/ClientApp/components/app-root/app-root.html

@@ -1,7 +1,7 @@
 <div class='container-fluid'>
     <div class='row'>
         <div class='col-sm-3'>
-            <nav-menu params='route: route'></nav-menu>
+            <nav-menu params='router: router'></nav-menu>
         </div>
         <div class='col-sm-9' data-bind='component: { name: route().page, params: route }'></div>
     </div>

templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts

@@ -12,12 +12,12 @@ const routes: Route[] = [
 
 class AppRootViewModel {
     public route: KnockoutObservable<Route>;
-    private _router: Router;
+    public router: Router;
 
-    constructor(params: { history: History.History }) {
+    constructor(params: { history: History.History, basename: string }) {
         // Activate the client-side router
-        this._router = new Router(params.history, routes)
+        this.router = new Router(params.history, routes, params.basename);
-        this.route = this._router.currentRoute;
+        this.route = this.router.currentRoute;
 
         // Load and register all the KO components needed to handle the routes
         // The optional 'bundle-loader?lazy!' prefix is a Webpack feature that causes the referenced modules
@@ -32,7 +32,7 @@ class AppRootViewModel {
     // To support hot module replacement, this method unregisters the router and KO components.
     // In production scenarios where hot module replacement is disabled, this would not be invoked.
     public dispose() {
-        this._router.dispose();
+        this.router.dispose();
 
         // TODO: Need a better API for this
         Object.getOwnPropertyNames((<any>ko).components._allRegisteredComponents).forEach(componentName => {

templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts

@@ -12,7 +12,7 @@ class FetchDataViewModel {
     public forecasts = ko.observableArray<WeatherForecast>();
 
     constructor() {
-        fetch('/api/SampleData/WeatherForecasts')
+        fetch('api/SampleData/WeatherForecasts')
             .then(response => response.json() as Promise<WeatherForecast[]>)
             .then(data => {
                 this.forecasts(data);

templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.html

@@ -13,17 +13,17 @@
         <div class='navbar-collapse collapse'>
             <ul class='nav navbar-nav'>
                 <li>
-                    <a href='/' data-bind='css: { active: route().page === "home-page" }'>
+                    <a data-bind='attr: { href: router.link("/") }, css: { active: route().page === "home-page" }'>
                         <span class='glyphicon glyphicon-home'></span> Home
                     </a>
                 </li>
                 <li>
-                    <a href='/counter' data-bind='css: { active: route().page === "counter-example" }'>
+                    <a data-bind='attr: { href: router.link("/counter") }, css: { active: route().page === "counter-example" }'>
                         <span class='glyphicon glyphicon-education'></span> Counter
                     </a>
                 </li>
                 <li>
-                    <a href='/fetch-data' data-bind='css: { active: route().page === "fetch-data" }'>
+                    <a data-bind='attr: { href: router.link("/fetch-data") }, css: { active: route().page === "fetch-data" }'>
                         <span class='glyphicon glyphicon-th-list'></span> Fetch data
                     </a>
                 </li>

templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.ts

@@ -1,18 +1,20 @@
 import * as ko from 'knockout';
-import { Route } from '../../router';
+import { Route, Router } from '../../router';
 
 interface NavMenuParams {
-    route: KnockoutObservable<Route>;
+    router: Router;
 }
 
 class NavMenuViewModel {
+    public router: Router;
     public route: KnockoutObservable<Route>;
 
     constructor(params: NavMenuParams) {
         // This viewmodel doesn't do anything except pass through the 'route' parameter to the view.
         // You could remove this viewmodel entirely, and define 'nav-menu' as a template-only component.
         // But in most apps, you'll want some viewmodel logic to determine what navigation options appear.
-        this.route = params.route;
+        this.router = params.router;
+        this.route = this.router.currentRoute;
     }
 }
 

templates/KnockoutSpa/ClientApp/router.ts

@@ -16,7 +16,7 @@ export class Router {
     private disposeHistory: () => void;
     private clickEventListener: EventListener;
 
-    constructor(history: History.History, routes: Route[]) {
+    constructor(private history: History.History, routes: Route[], basename: string) {
         // Reset and configure Crossroads so it matches routes and updates this.currentRoute
         crossroads.removeAllRoutes();
         crossroads.resetState();
@@ -33,8 +33,9 @@ export class Router {
             let target: any = evt.currentTarget;
             if (target && target.tagName === 'A') {
                 let href = target.getAttribute('href');
-                if (href && href.charAt(0) == '/') {
+                if (href && href.indexOf(basename + '/') === 0) {
-                    history.push(href);
+                    const hrefAfterBasename = href.substring(basename.length);
+                    history.push(hrefAfterBasename);
                     evt.preventDefault();
                 }
             }
@@ -46,6 +47,10 @@ export class Router {
         crossroads.parse((history as any).location.pathname);
     }
 
+    public link(url: string): string {
+        return this.history.createHref({ pathname: url });
+    }
+
     public dispose() {
         this.disposeHistory();
         $(document).off('click', 'a', this.clickEventListener);

templates/KnockoutSpa/Views/Home/Index.cshtml

@@ -2,7 +2,7 @@
     ViewData["Title"] = "Home Page";
 }
 
-<app-root params="history: history"></app-root>
+<app-root params="history: history, basename: basename"></app-root>
 
 @section scripts {
     <script src="~/dist/main.js" asp-append-version="true"></script>

templates/KnockoutSpa/npm-shrinkwrap.json

@@ -167,9 +167,9 @@
       "dev": true
     },
     "aspnet-webpack": {
-      "version": "1.0.29",
+      "version": "2.0.0",
-      "from": "aspnet-webpack@>=1.0.27 <2.0.0",
+      "from": "aspnet-webpack@2.0.0",
-      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-1.0.29.tgz",
+      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-2.0.0.tgz",
       "dev": true
     },
     "assert": {

templates/KnockoutSpa/package.json

@@ -12,7 +12,7 @@
     "@types/react-router": "^2.0.37",
     "@types/requirejs": "^2.1.26",
     "@types/signals": "0.0.16",
-    "aspnet-webpack": "^1.0.27",
+    "aspnet-webpack": "^2.0.0",
     "awesome-typescript-loader": "^3.0.0",
     "bootstrap": "^3.3.6",
     "bundle-loader": "^0.5.4",

templates/KnockoutSpa/webpack.config.js

@@ -13,7 +13,7 @@ module.exports = (env) => {
         output: {
             path: path.join(__dirname, bundleOutputDir),
             filename: '[name].js',
-            publicPath: '/dist/'
+            publicPath: 'dist/'
         },
         module: {
             rules: [

templates/KnockoutSpa/webpack.config.vendor.js

@@ -21,7 +21,7 @@ module.exports = (env) => {
         },
         output: {
             path: path.join(__dirname, 'wwwroot', 'dist'),
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js',
             library: '[name]_[hash]',
         },

templates/ReactReduxSpa/ClientApp/boot-client.tsx

@@ -12,7 +12,8 @@ import * as RoutesModule from './routes';
 let routes = RoutesModule.routes;
 
 // Create browser history to use in the Redux store
-const history = createBrowserHistory();
+const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
+const history = createBrowserHistory({ basename: baseUrl });
 
 // Get the application-wide store instance, prepopulating with state from the server where available.
 const initialState = (window as any).initialReduxState as ApplicationState;

templates/ReactReduxSpa/ClientApp/boot-server.tsx

@@ -12,15 +12,17 @@ export default createServerRenderer(params => {
     return new Promise<RenderResult>((resolve, reject) => {
         // Prepare Redux store with in-memory history, and dispatch a navigation event
         // corresponding to the incoming URL
+        const basename = params.baseUrl.substring(0, params.baseUrl.length - 1); // Remove trailing slash
+        const urlAfterBasename = params.url.substring(basename.length);
         const store = configureStore(createMemoryHistory());
-        store.dispatch(replace(params.location));
+        store.dispatch(replace(urlAfterBasename));
 
         // Prepare an instance of the application and perform an inital render that will
         // cause any async tasks (e.g., data access) to begin
         const routerContext: any = {};
         const app = (
             <Provider store={ store }>
-                <StaticRouter context={ routerContext } location={ params.location.path } children={ routes } />
+                <StaticRouter basename={ basename } context={ routerContext } location={ params.location.path } children={ routes } />
             </Provider>
         );
         renderToString(app);

templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts

@@ -45,7 +45,7 @@ export const actionCreators = {
     requestWeatherForecasts: (startDateIndex: number): AppThunkAction<KnownAction> => (dispatch, getState) => {
         // Only load data if it's something we don't already have (and are not already loading)
         if (startDateIndex !== getState().weatherForecasts.startDateIndex) {
-            let fetchTask = fetch(`/api/SampleData/WeatherForecasts?startDateIndex=${ startDateIndex }`)
+            let fetchTask = fetch(`api/SampleData/WeatherForecasts?startDateIndex=${ startDateIndex }`)
                 .then(response => response.json() as Promise<WeatherForecast[]>)
                 .then(data => {
                     dispatch({ type: 'RECEIVE_WEATHER_FORECASTS', startDateIndex: startDateIndex, forecasts: data });

templates/ReactReduxSpa/npm-shrinkwrap.json

@@ -170,26 +170,19 @@
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.9.1.tgz"
     },
     "aspnet-prerendering": {
-      "version": "2.0.6",
+      "version": "3.0.1",
-      "from": "aspnet-prerendering@>=2.0.5 <3.0.0",
+      "from": "aspnet-prerendering@3.0.1",
-      "resolved": "https://registry.npmjs.org/aspnet-prerendering/-/aspnet-prerendering-2.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/aspnet-prerendering/-/aspnet-prerendering-3.0.1.tgz"
-      "dependencies": {
-        "domain-task": {
-          "version": "2.0.3",
-          "from": "domain-task@>=2.0.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/domain-task/-/domain-task-2.0.3.tgz"
-        }
-      }
     },
     "aspnet-webpack": {
-      "version": "1.0.29",
+      "version": "2.0.0",
-      "from": "aspnet-webpack@>=1.0.29 <2.0.0",
+      "from": "aspnet-webpack@2.0.0",
-      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-1.0.29.tgz"
+      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-2.0.0.tgz"
     },
     "aspnet-webpack-react": {
-      "version": "3.0.0-beta.1",
+      "version": "3.0.0",
-      "from": "aspnet-webpack-react@>=3.0.0-beta <4.0.0",
+      "from": "aspnet-webpack-react@3.0.0",
-      "resolved": "https://registry.npmjs.org/aspnet-webpack-react/-/aspnet-webpack-react-3.0.0-beta.1.tgz"
+      "resolved": "https://registry.npmjs.org/aspnet-webpack-react/-/aspnet-webpack-react-3.0.0.tgz"
     },
     "assert": {
       "version": "1.4.1",

templates/ReactReduxSpa/package.json

@@ -12,9 +12,9 @@
     "@types/react-router-redux": "5.0.3",
     "@types/webpack": "2.2.15",
     "@types/webpack-env": "1.13.0",
-    "aspnet-prerendering": "^2.0.5",
+    "aspnet-prerendering": "^3.0.1",
-    "aspnet-webpack": "^1.0.29",
+    "aspnet-webpack": "^2.0.0",
-    "aspnet-webpack-react": "^3.0.0-beta",
+    "aspnet-webpack-react": "^3.0.0",
     "awesome-typescript-loader": "3.2.1",
     "bootstrap": "3.3.7",
     "css-loader": "0.28.4",

templates/ReactReduxSpa/webpack.config.js

@@ -13,7 +13,7 @@ module.exports = (env) => {
         resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
         output: {
             filename: '[name].js',
-            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
+            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
         },
         module: {
             rules: [

templates/ReactReduxSpa/webpack.config.vendor.js

@@ -33,7 +33,7 @@ module.exports = (env) => {
             ],
         },
         output: {
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js',
             library: '[name]_[hash]',
         },

templates/ReactSpa/ClientApp/boot.tsx

@@ -10,9 +10,10 @@ let routes = RoutesModule.routes;
 function renderApp() {
     // 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.
+    const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
     ReactDOM.render(
         <AppContainer>
-            <BrowserRouter children={ routes } />
+            <BrowserRouter children={ routes } basename={ baseUrl } />
         </AppContainer>,
         document.getElementById('react-app')
     );

templates/ReactSpa/ClientApp/components/FetchData.tsx

@@ -11,7 +11,7 @@ export class FetchData extends React.Component<{}, FetchDataExampleState> {
         super();
         this.state = { forecasts: [], loading: true };
 
-        fetch('/api/SampleData/WeatherForecasts')
+        fetch('api/SampleData/WeatherForecasts')
             .then(response => response.json() as Promise<WeatherForecast[]>)
             .then(data => {
                 this.setState({ forecasts: data, loading: false });

templates/ReactSpa/npm-shrinkwrap.json

@@ -155,15 +155,15 @@
       "dev": true
     },
     "aspnet-webpack": {
-      "version": "1.0.29",
+      "version": "2.0.0",
-      "from": "aspnet-webpack@>=1.0.29 <2.0.0",
+      "from": "aspnet-webpack@2.0.0",
-      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-1.0.29.tgz",
+      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-2.0.0.tgz",
       "dev": true
     },
     "aspnet-webpack-react": {
-      "version": "3.0.0-beta.1",
+      "version": "3.0.0",
-      "from": "aspnet-webpack-react@>=3.0.0-beta <4.0.0",
+      "from": "aspnet-webpack-react@3.0.0",
-      "resolved": "https://registry.npmjs.org/aspnet-webpack-react/-/aspnet-webpack-react-3.0.0-beta.1.tgz",
+      "resolved": "https://registry.npmjs.org/aspnet-webpack-react/-/aspnet-webpack-react-3.0.0.tgz",
       "dev": true
     },
     "assert": {

templates/ReactSpa/package.json

@@ -8,8 +8,8 @@
     "@types/react-dom": "15.5.1",
     "@types/react-router": "4.0.12",
     "@types/webpack-env": "1.13.0",
-    "aspnet-webpack": "^1.0.29",
+    "aspnet-webpack": "^2.0.0",
-    "aspnet-webpack-react": "^3.0.0-beta",
+    "aspnet-webpack-react": "^3.0.0",
     "awesome-typescript-loader": "3.2.1",
     "bootstrap": "3.3.7",
     "css-loader": "0.28.4",

templates/ReactSpa/webpack.config.js

@@ -13,7 +13,7 @@ module.exports = (env) => {
         output: {
             path: path.join(__dirname, bundleOutputDir),
             filename: '[name].js',
-            publicPath: '/dist/'
+            publicPath: 'dist/'
         },
         module: {
             rules: [

templates/ReactSpa/webpack.config.vendor.js

@@ -21,7 +21,7 @@ module.exports = (env) => {
         },
         output: {
             path: path.join(__dirname, 'wwwroot', 'dist'),
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js',
             library: '[name]_[hash]',
         },

templates/VueSpa/ClientApp/components/fetchdata/fetchdata.ts

@@ -13,7 +13,7 @@ export default class FetchDataComponent extends Vue {
     forecasts: WeatherForecast[] = [];
 
     mounted() {
-        fetch('/api/SampleData/WeatherForecasts')
+        fetch('api/SampleData/WeatherForecasts')
             .then(response => response.json() as Promise<WeatherForecast[]>)
             .then(data => {
                 this.forecasts = data;

templates/VueSpa/npm-shrinkwrap.json

@@ -119,9 +119,9 @@
       "dev": true
     },
     "aspnet-webpack": {
-      "version": "1.0.29",
+      "version": "2.0.0",
-      "from": "aspnet-webpack@>=1.0.27 <2.0.0",
+      "from": "aspnet-webpack@2.0.0",
-      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-1.0.29.tgz",
+      "resolved": "https://registry.npmjs.org/aspnet-webpack/-/aspnet-webpack-2.0.0.tgz",
       "dev": true
     },
     "assert": {

templates/VueSpa/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "devDependencies": {
     "@types/requirejs": "^2.1.28",
-    "aspnet-webpack": "^1.0.27",
+    "aspnet-webpack": "^2.0.0",
     "awesome-typescript-loader": "^3.0.0",
     "bootstrap": "^3.3.6",
     "css-loader": "^0.25.0",

templates/VueSpa/webpack.config.js

@@ -23,7 +23,7 @@ module.exports = (env) => {
         output: {
             path: path.join(__dirname, bundleOutputDir),
             filename: '[name].js',
-            publicPath: '/dist/'
+            publicPath: 'dist/'
         },
         plugins: [
             new CheckerPlugin(),

templates/VueSpa/webpack.config.vendor.js

@@ -28,7 +28,7 @@ module.exports = (env) => {
         },
         output: { 
             path: path.join(__dirname, 'wwwroot', 'dist'),
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js',
             library: '[name]_[hash]'
         },