This package enables:

* [**Webpack middleware**](#webpack-dev-middleware) so that, during development, any webpack-build resources will be generated on demand, without you having to run webpack manually or compile files to disk

* [**Hot module replacement**](#webpack-hot-module-replacement) so that, during development, your code and markup changes will be sent to your browser and updated in the running application, without even needing to reload the page

* [**Routing helpers**](#routing-helper-mapspafallbackroute) for integrating server-side routing with client-side routing

Create a JavaScript file at the path matching the `asp-prerender-module` value you specified above. In this example, that means creating a folder called `ClientApp` at the root of your project, and creating a file inside it called `boot-server.js`. Try putting the following into it:

module.exports = function(params) {

return new Promise(function (resolve, reject) {

var result = '<h1>Hello world!</h1>'

If you want to pass some contextual data from your server-side code to your client-side code (for example, to avoid having to load the same data you just loaded on the server again on the client), you can supply a `globals` object alongside the initial `html`, e.g.:

When the `aspnet-prerender-*` tag helper emits this result into the document, as well as injecting the `html` string, it will also emit code that populates `window.albumsList` and `window.userData` with JSON-serialized copies of the objects you passed.

Next, create a file `webpack.config.js` at the root of your project, containing:

module.exports = {

resolve: { extensions: [ '', '.js', '.ts' ] },

module: {

Now you can delete `ClientApp/boot-server.js`, and in its place, create `ClientApp/boot-server.ts`, containing the TypeScript equivalent of what you had before:

export default function (params: any): Promise<{ html: string}> {

return new Promise((resolve, reject) => {

const html = `

Let's say you want to write a React component in ES2015 code. You might install the NPM modules `react react-dom babel-loader babel-preset-react babel-preset-es2015`, and then prepare Webpack to build `.jsx` files by creating `webpack.config.js` in your project root, containing:

var path = require('path');

module.exports = {

You will also need a `.babelrc` file in your project root, containing:

{

"presets": ["es2015", "react"]

}

This is enough to be able to build ES2015 `.jsx` files via Webpack. Now you could implement a simple React component, for example the following at `ClientApp/react-app.jsx`:

import * as React from 'react';

export class HelloMessage extends React.Component

... and the following code to run it in a browser at `ClientApp/boot-client.jsx`:

import * as React from 'react';

import * as ReactDOM from 'react-dom';

import { HelloMessage } from './react-app';

ReactDOM.render(<HelloMessage message="World" />, document.getElementById('my-spa'));

You can now run your React code on the client by adding the following to one of your MVC views:

<div id="my-spa"></div>

<script src="/dist/main.js"></script>

Now you have React code being built using Webpack, you can enable server-side prerendering using the `aspnet-prerender-*` tag helpers as follows:

... along with the following boot module at `ClientApp/boot-server.jsx`:

import * as React from 'react';

import { renderToString } from 'react-dom/server';

import { HelloMessage } from './react-app';

After installing the `Microsoft.AspNetCore.SpaServices` NuGet package and the `aspnet-webpack` NPM package, go to your `Startup.cs` file, and **before your call to `UseStaticFiles`**, add the following:

if (env.IsDevelopment()) {

app.UseWebpackDevMiddleware();

}

You will also need to edit your webpack configuration at `webpack.config.js`. Since `UseWebpackDevMiddleware` needs to know which incoming requests to intercept, specify a `publicPath` value on your `output`, for example:

module.exports = {

// ... rest of your webpack config is here ...

At the top of your `Startup.cs` file, add the following namespace reference:

using Microsoft.AspNetCore.SpaServices.Webpack;

Now amend your call to `UseWebpackDevMiddleware` as follows:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {

HotModuleReplacement = true

});

Also, to work around a temporary issue in `SpaServices`, you must ensure that your Webpack config includes a `plugins` array, even if it's empty. For example, in `webpack.config.js`:

module.exports = {

// ... rest of your webpack config is here ...

Webpack has built-in support for updating React components in place. To enable this, amend your `UseWebpackDevMiddleware` call further as follows:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {

HotModuleReplacement = true,

ReactHotModuleReplacement = true

To help distinguish between these cases, the `Microsoft.AspNetCore.SpaServices` NuGet package includes a routing helper, `MapSpaFallbackRoute`. For example, in your `Startup.cs` file's `Configure` method, you might add:

app.UseStaticFiles();

app.UseMvc(routes =>

Any requests that do appear to be for static files (i.e., those that end with filename extensions), will *not* be handled by `MapSpaFallbackRoute`, and so will end up as 404s.

This is not a perfect solution to the problem of identifying 404s, because for example `MapSpaFallbackRoute` will not match requests for `/users/albert.einstein`, because it appears to contain a filename extension (`.einstein`). If you need your SPA to handle routes like that, then don't use `MapSpaFallbackRoute` - just use a regular MVC catch-all route. But then beware that requests for unknown static files will result in your client-side app being rendered.