diff --git a/src/Microsoft.AspNetCore.SpaServices/README.md b/src/Microsoft.AspNetCore.SpaServices/README.md index 5afc9a6..634d9b3 100644 --- a/src/Microsoft.AspNetCore.SpaServices/README.md +++ b/src/Microsoft.AspNetCore.SpaServices/README.md @@ -48,11 +48,14 @@ Instead, what `SpaServices` offers is ASP.NET Core APIs that know how to invoke ### 1. Enable the asp-prerender-* tag helpers -Make sure you've installed the `Microsoft.AspNetCore.SpaServices` NuGet package and the `aspnet-prerendering` NPM package. Together these contain the server-side and client-side library code you'll need. +Make sure you've installed into your project: -Now go to your `Views/_ViewImports.cshtml` file, and add the following line: + * The `Microsoft.AspNetCore.SpaServices` NuGet package, version 1.1.0-* or later + * The `aspnet-prerendering` NPM package, version 2.0.1 or later - @addTagHelper *, Microsoft.AspNetCore.SpaServices +Together these contain the server-side and client-side library code you'll need. Now go to your `Views/_ViewImports.cshtml` file, and add the following line: + + @addTagHelper "*, Microsoft.AspNetCore.SpaServices" ### 2. Use asp-prerender-* in a view @@ -67,7 +70,9 @@ If you run your application now, and browse to whatever page renders the view yo 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: ```javascript -module.exports = function(params) { +var prerendering = require('aspnet-prerendering'); + +module.exports = prerendering.createServerRenderer(function(params) { return new Promise(function (resolve, reject) { var result = '
Current time in Node is: ' + new Date() + '
' @@ -76,7 +81,7 @@ module.exports = function(params) { resolve({ html: result }); }); -}; +}); ``` If you try running your app now, you should see the HTML snippet generated by your JavaScript getting injected into your page. @@ -98,7 +103,9 @@ For example, in your `cshtml`, Now in your JavaScript prerendering function, you can access this data by reading `params.data`, e.g.: ```javascript -module.exports = function(params) { +var prerendering = require('aspnet-prerendering'); + +module.exports = prerendering.createServerRenderer(function(params) { return new Promise(function (resolve, reject) { var result = 'Is gold user: ' + params.data.isGoldUser + '
' @@ -106,7 +113,7 @@ module.exports = function(params) { resolve({ html: result }); }); -}; +}); ``` Notice that the property names are received in JavaScript-style casing (e.g., `isGoldUser`) even though they were sent in C#-style casing (e.g., `IsGoldUser`). This is because of how the JSON serialization is configured by default. @@ -182,7 +189,9 @@ If you don't already have a `tsconfig.json` file at the root of your project, ad 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: ```javascript -export default function (params: any): Promise<{ html: string}> { +import { createServerRenderer } from 'aspnet-prerendering'; + +export default createServerRenderer(params => { return new Promise((resolve, reject) => { const html = `