Make templates work with nonempty baseUrls (e.g., IIS virtual directories)

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/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]',
         },