Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markpieszak/ngatl-universal-workshop
https://github.com/markpieszak/ngatl-universal-workshop
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/markpieszak/ngatl-universal-workshop
- Owner: MarkPieszak
- Created: 2018-01-30T20:04:04.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-31T07:58:55.000Z (almost 7 years ago)
- Last Synced: 2024-10-12T12:23:30.875Z (3 months ago)
- Language: TypeScript
- Size: 421 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgAtlanta 2018 - Angular Universal Workshop [](https://github.com/angular/universal)
> Server-Side Rendering for Angular
A minimal Angular starter for Universal JavaScript using TypeScript and Webpack
> If you're looking for the Angular Universal repo go to [**angular/universal**](https://github.com/angular/universal)
[](https://heroku.com/deploy)
## Getting Started
> This demo is built with the [Angular-CLI Wiki guide](https://github.com/angular/angular-cli/wiki/stories-universal-rendering)
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.
---
### Build Time Prerender(prerender) Vs. Server Side Rendering(ssr)
This repo demonstrates the use of 2 different forms of Server Side Rendering.
**Prerender(prerender)**
* Happens at build time
* Renders your application and replaces the dist index.html with a version rendered at the route `/`.
**Server-Side Rendering(ssr)**
* Happens at runtime
* Uses `ngExpressEngine` to render you application on the fly at the requested url.
---
### Installation
* `npm install` or `yarn`
### Development (Client-side only rendering)
* run `npm run start` which will start `ng serve`
### Production (also for testing SSR/Pre-rendering locally)
**`npm run build:ssr && npm run serve:ssr`** - Compiles your application and spins up a Node Express to serve your Universal application on `http://localhost:4000`.
**`npm run build:prerender && npm run serve:prerender`** - Compiles your application and prerenders your applications files, spinning up a demo http-server so you can view it on `http://localhost:8080`
**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`
## Universal "Gotchas"
> When building Universal components in Angular there are a few things to keep in mind.
- For the server bundle you may need to include your 3rd party module into `nodeExternals` whitelist
- **`window`**, **`document`**, **`navigator`**, and other browser types - _do not exist on the server_ - so using them, or any library that uses them (jQuery for example) will not work. You do have some options, if you truly need some of this functionality:
- If you need to use them, consider limiting them to only your client and wrapping them situationally. You can use the Object injected using the PLATFORM_ID token to check whether the current platform is browser or server.
```typescript
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
// Client only code.
...
}
if (isPlatformServer(this.platformId)) {
// Server only code.
...
}
}
```
- Try to *limit or* **avoid** using **`setTimeout`**. It will slow down the server-side rendering process. Make sure to remove them [`ngOnDestroy`](https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html) in Components.
- Also for RxJs timeouts, make sure to _cancel_ their stream on success, for they can slow down rendering as well.
- **Don't manipulate the nativeElement directly**. Use the _Renderer2_ from ["@angular/core"](https://angular.io/api/core/Renderer2). We do this to ensure that in any environment we're able to change our view.
```typescript
constructor(element: ElementRef, renderer: Renderer2) {
this.renderer.setStyle(element.nativeElement, 'font-size', 'x-large');
}
```
- The application runs XHR requests on the server & once again on the Client-side (when the application bootstraps)
- Use a cache that's transferred from server to client (TODO: Point to the example)
- Know the difference between attributes and properties in relation to the DOM.
- Keep your directives stateless as much as possible. For stateful directives, you may need to provide an attribute that reflects the corresponding property with an initial string value such as url in img tag. For our native element the src attribute is reflected as the src property of the element type HTMLImageElement.
# License
[](/LICENSE)