You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/Microsoft.AspNetCore.SpaServices/README.md
+18-11Lines changed: 18 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,8 +5,8 @@ If you're building an ASP.NET Core application, and want to use Angular 2, React
5
5
This package enables:
6
6
7
7
*[**Server-side prerendering**](#server-side-prerendering) for *universal* (a.k.a. *isomorphic*) applications, where your Angular 2 / React / etc. components are first rendered on the server, and then transferred to the client where execution continues
8
-
*[**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
9
-
*[**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
8
+
*[**Webpack middleware**](#webpack-dev-middleware) so that, during development, any webpack-built resources will be generated on demand, without you having to run webpack manually or compile files to disk
9
+
*[**Hot module replacement**](#webpack-hot-module-replacement) so that, during development, your code and markup changes will be pushed to your browser and updated in the running application automatically, without even needing to reload the page
10
10
*[**Routing helpers**](#routing-helper-mapspafallbackroute) for integrating server-side routing with client-side routing
11
11
12
12
Behind the scenes, it uses the [`Microsoft.AspNetCore.NodeServices`](https://github.com/aspnet/JavaScriptServices/tree/master/src/Microsoft.AspNetCore.NodeServices) package as a fast and robust way to invoke Node.js-hosted code from ASP.NET Core at runtime.
@@ -23,8 +23,13 @@ Behind the scenes, it uses the [`Microsoft.AspNetCore.NodeServices`](https://git
23
23
* Add `Microsoft.AspNetCore.SpaServices` to the dependencies list in your `project.json` file
24
24
* Run `dotnet restore` (or if you use Visual Studio, just wait a moment - it will restore dependencies automatically)
25
25
* Install supporting NPM packages for the features you'll be using:
26
-
* If you'll be using server-side prerendering, install `aspnet-prerendering`, plus `aspnet-webpack` if your SPA will be build using webpack (e.g., run `npm install --save aspnet-prerendering aspnet-webpack`)
27
-
* If you'll be using webpack dev middleware, install `aspnet-webpack` (e.g., run `npm install --save aspnet-webpack`)
26
+
* For **server-side prerendering**, install `aspnet-prerendering`
27
+
* For **server-side prerendering with Webpack build support**, also install `aspnet-webpack`
28
+
* For **webpack dev middleware**, install `aspnet-webpack`
29
+
* For **webpack dev middleware with hot module replacement**, also install `webpack-hot-middleware`
30
+
* For **webpack dev middleware with React hot module replacement**, also install `aspnet-webpack-react`
31
+
32
+
For example, run `npm install --save aspnet-prerendering aspnet-webpack` to install `aspnet-prerendering` and `aspnet-webpack`.
28
33
29
34
30
35
### Creating entirely new projects
@@ -78,7 +83,7 @@ As you can see, your JavaScript code receives context information (such as the U
78
83
79
84
**Passing data from server-side to client-side code**
80
85
81
-
Ifyou 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.:
86
+
If, as well as returning HTML, you also want to pass some contextual data from your server-side code to your client-side code, you can supply a `globals` object alongside the initial `html`, e.g.:
82
87
83
88
```javascript
84
89
resolve({
@@ -92,6 +97,8 @@ resolve({
92
97
93
98
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.
94
99
100
+
This can be useful if, for example, you want to avoid loading the same data twice (once on the server and once on the client).
101
+
95
102
### 4. Enabling webpack build tooling
96
103
97
104
Of course, rather than writing your `boot-server` module and your entire SPA in plain ES5 JavaScript, it's quite likely that you'll want to write your client-side code in TypeScript or at least ES2015 code. To enable this, you can either:
@@ -161,17 +168,17 @@ Webpack is a broad and powerful tool and can do far more than just invoke the Ty
161
168
162
169
### 5(a). Prerendering Angular 2 components
163
170
164
-
If you're building an Angular 2 application, you can run your components in the server inside your `boot-server.ts` file so they will be injected into the resulting web page.
171
+
If you're building an Angular 2 application, you can run your components on the server inside your `boot-server.ts` file so they will be injected into the resulting web page.
165
172
166
-
First install the NPM package `angular2-universal` - this contains infrastructure for executing Angular 2 components on the server:
173
+
First install the NPM package `angular2-universal` - this contains infrastructure for executing Angular 2 components inside Node.js:
167
174
168
175
```
169
176
npm install --save angular2-universal
170
177
```
171
178
172
-
Now you can use the [`angular2-universal` APIs](https://github.com/angular/universal) from your `boot-server.ts` TypeScript module to execute your Angular 2 component on the server. The code needed for this is fairly complex, but is necessary because Angular 2 supports so many different ways of being configured, and you need to provide wiring for whatever combination of DI modules you're using.
179
+
Now you can use the [`angular2-universal` APIs](https://github.com/angular/universal) from your `boot-server.ts` TypeScript module to execute your Angular 2 component on the server. The code needed for this is fairly complex, but that's unavoidable because Angular 2 supports so many different ways of being configured, and you need to provide wiring for whatever combination of DI modules you're using.
173
180
174
-
You can find an example `boot-server.ts` that renders arbitrary Angular 2 components [here](https://github.com/aspnet/JavaScriptServices/blob/master/templates/Angular2Spa/ClientApp/boot-server.ts). If you use this with your own application, remember to reference any other DI services that your Angular 2 component depends on.
181
+
You can find an example `boot-server.ts` that renders arbitrary Angular 2 components [here](https://github.com/aspnet/JavaScriptServices/blob/master/templates/Angular2Spa/ClientApp/boot-server.ts). If you use this with your own application, you might need to edit the `serverBindings` array to reference any other DI services that your Angular 2 component depends on.
175
182
176
183
The easiest way to get started with Angular 2 server-side rendering on ASP.NET Core is to use the [aspnetcore-spa generator](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/), which creates a ready-made working starting point.
177
184
@@ -318,7 +325,7 @@ module.exports = {
318
325
319
326
Now, assuming you're running in [development mode](https://docs.asp.net/en/latest/fundamentals/environments.html), any requests for files under `/dist` will be intercepted and served using Webpack dev middleware.
320
327
321
-
**This is for development time only, not for production use (hence the `app.IsDevelopment()` check in the code above).** While you could technically remove that check and serve your content in production through the webpack middleware, it's hard to think of a good reason for doing so. For best performance, it makes sense to prebuild your client-side resources so they can be served directly from disk with no build middleware. If you use the [aspnetcore-spa generator](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/), you'll get a site that produces optimised static builds for production, while also supporting webpack dev middleware at development time.
328
+
**This is for development time only, not for production use (hence the `env.IsDevelopment()` check in the code above).** While you could technically remove that check and serve your content in production through the webpack middleware, it's hard to think of a good reason for doing so. For best performance, it makes sense to prebuild your client-side resources so they can be served directly from disk with no build middleware. If you use the [aspnetcore-spa generator](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/), you'll get a site that produces optimised static builds for production, while also supporting webpack dev middleware at development time.
322
329
323
330
## Webpack Hot Module Replacement
324
331
@@ -393,7 +400,7 @@ Now if you edit any React component (e.g., in `.jsx` or `.tsx` files), the updat
393
400
394
401
#### Enabling hot replacement for other module types
395
402
396
-
Webpack has built-in HMR support for various types of module, such as styles, and React components as described above. But to support HMR for other code modules, you need to add a small block of code that describes how to update the running application.
403
+
Webpack has built-in HMR support for various types of module, such as styles and React components as described above. But to support HMR for other code modules, you need to add a small block of code that calls `module.hot.accept` to receive the updated module and update the running application.
397
404
398
405
This is [documented in detail on the Webpack site](https://webpack.github.io/docs/hot-module-replacement.html). Or to get a working HMR-enabled ASP.NET Core site with Angular 2, React, React+Redux, or Knockout, you can use the [aspnetcore-spa generator](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/).
0 commit comments