| 1 |
50428
|
argiro.kok
|
# Angular Universal & Anguar-CLI minimal starter
|
| 2 |
|
|
|
| 3 |
|
|
> This demo is built following the [Angular-CLI Wiki guide](https://github.com/angular/angular-cli/wiki/stories-universal-rendering)
|
| 4 |
|
|
|
| 5 |
|
|
We're utilizing packages from the [Angular Universal @nguniversal](https://github.com/angular/universal) repo, such as [ng-module-map-ngfactory-loader](https://github.com/angular/universal/tree/master/modules/module-map-ngfactory-loader) to enable Lazy Loading.
|
| 6 |
|
|
|
| 7 |
|
|
---
|
| 8 |
|
|
|
| 9 |
|
|
## Static or Dynamic
|
| 10 |
|
|
This repo demonstrates the use of 2 different forms of Server Side Rendering.
|
| 11 |
|
|
|
| 12 |
|
|
**Static** Also known as "prerendering"
|
| 13 |
|
|
* Happens at build time
|
| 14 |
|
|
* Renders your application and replaces the dist index.html with a version rendered at the route `/`.
|
| 15 |
|
|
|
| 16 |
|
|
**Dynamic**
|
| 17 |
|
|
* Happens at runtime
|
| 18 |
|
|
* Uses `ngExpressEngine` to render you application on the fly at the requested url.
|
| 19 |
|
|
|
| 20 |
|
|
---
|
| 21 |
|
|
|
| 22 |
|
|
## Installation
|
| 23 |
|
|
* `npm install` or `yarn`
|
| 24 |
|
|
|
| 25 |
|
|
---
|
| 26 |
|
|
|
| 27 |
|
|
## Development (Client-side only rendering)
|
| 28 |
|
|
* run `npm run start` which will start `ng serve` (project served at the standard: localhost:4200)
|
| 29 |
|
|
|
| 30 |
|
|
---
|
| 31 |
|
|
|
| 32 |
|
|
## Production
|
| 33 |
|
|
|
| 34 |
|
|
Depending on whether you're publishing dynamic or static prerendering, run the build command, and then serve up your dist folder assets.
|
| 35 |
|
|
|
| 36 |
|
|
> **NOTE**: To deploy your **Static** site to a static hosting platform you will have to deploy the *`dist/browser`* folder, rather than the usual *`dist`*
|
| 37 |
|
|
|
| 38 |
|
|
ie: `npm run build:dynamic` or `npm run build:static`. All of the files that need to be served will be found within the `/dist` folder.
|
| 39 |
|
|
|
| 40 |
|
|
|
| 41 |
|
|
|
| 42 |
|
|
---
|
| 43 |
|
|
|
| 44 |
|
|
## Testing Universal (dynamic or static) builds -Locally-
|
| 45 |
|
|
|
| 46 |
|
|
**Dynamic** : **`npm run start:dynamic`**
|
| 47 |
|
|
|
| 48 |
|
|
Compiles your application and spins up a Node Express to dynamically serve your Universal application on `http://localhost:4000`.
|
| 49 |
|
|
|
| 50 |
|
|
**Static** : **`npm run start:static`**
|
| 51 |
|
|
|
| 52 |
|
|
- Compiles your application and prerenders your applications files, spinning up a demo http-server so you can view it on `http://127.0.0.1:8080`
|
| 53 |
|
|
|