github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-23 01:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update prerendering docs to account for aspnet-prerendering 2.0.0 and the new createServerRenderer API. Fixes #479

Browse Source
This commit is contained in:
SteveSandersonMS
2016-12-01 14:41:48 +00:00
parent dc130adc91
commit 2b2465ad2e
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/Microsoft.AspNetCore.SpaServices/README.md
View File

@@ -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 ### 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 ### 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: 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 ```javascript
module.exports = function(params) { var prerendering = require('aspnet-prerendering');
module.exports = prerendering.createServerRenderer(function(params) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var result = '<h1>Hello world!</h1>' var result = '<h1>Hello world!</h1>'
+ '<p>Current time in Node is: ' + new Date() + '</p>' + '<p>Current time in Node is: ' + new Date() + '</p>'
@@ -76,7 +81,7 @@ module.exports = function(params) {
resolve({ html: result }); 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. 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.: Now in your JavaScript prerendering function, you can access this data by reading `params.data`, e.g.:
```javascript ```javascript
module.exports = function(params) { var prerendering = require('aspnet-prerendering');
module.exports = prerendering.createServerRenderer(function(params) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var result = '<h1>Hello world!</h1>' var result = '<h1>Hello world!</h1>'
+ '<p>Is gold user: ' + params.data.isGoldUser + '</p>' + '<p>Is gold user: ' + params.data.isGoldUser + '</p>'
@@ -106,7 +113,7 @@ module.exports = function(params) {
resolve({ html: result }); 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. 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: 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 ```javascript
export default function (params: any): Promise<{ html: string}> { import { createServerRenderer } from 'aspnet-prerendering';
export default createServerRenderer(params => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const html = ` const html = `
<h1>Hello world!</h1> <h1>Hello world!</h1>
@@ -192,7 +201,7 @@ export default function (params: any): Promise<{ html: string}> {
resolve({ html }); resolve({ html });
}); });
} });
``` ```
Finally, run `webpack` on the command line to build `ClientApp/dist/main-server.js`. Then you can tell `SpaServices` to use that file for server-side prerendering. In your MVC view where you use `aspnet-prerender-module`, update the attribute value: Finally, run `webpack` on the command line to build `ClientApp/dist/main-server.js`. Then you can tell `SpaServices` to use that file for server-side prerendering. In your MVC view where you use `aspnet-prerender-module`, update the attribute value: