Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 1cf8a81

Browse files
CaerusKaruThomasBurleson
authored andcommitted
docs: add Universal app changes to documentation
* Add details about building the Universal app to the Wiki * Add README files to the server and Bidi directories to explain their purposes * Remove unused `@angular/tsc-wrapped` * Add Universal app serve task
1 parent 816f1e6 commit 1cf8a81

File tree

8 files changed

+112
-69
lines changed

8 files changed

+112
-69
lines changed

docs/documentation/Developer-Setup.md

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
* To build the library, run `npm run lib:build`
1414
* To build and serve the demo-app, run `npm run demo:serve`
15+
* To build and serve the Universal app, run `npm run universal:serve`
1516

1617
## Integration within your project
1718

docs/documentation/Live-Demos.md

+11
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,14 @@ responsive demos:
1818
```
1919
npm run demo:serve
2020
```
21+
22+
23+
### Universal (SSR) Demos
24+
25+
A small-scale application that demonstrates how to use Flex Layout on the server. This site is not
26+
available publically, but can be run with the following command:
27+
28+
`npm run universal:serve`
29+
30+
**Note**: This server, unlike the demo-app, does **not** live reload. In order to incorporate build
31+
changes into the universal-app, it will need to be re-built/re-served each time.

package-lock.json

+58-66
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"lib:lint": "gulp lint",
1919
"lib:test": "gulp test",
2020
"lib:test:ssr": "gulp test:ssr",
21-
"universal:build": "gulp ci:prerender"
21+
"universal:build": "gulp ci:prerender",
22+
"universal:serve": "gulp universal:serve"
2223
},
2324
"version": "2.0.0-beta.12",
2425
"license": "MIT",
@@ -47,7 +48,6 @@
4748
"@angular/platform-browser-dynamic": "~5.2.0",
4849
"@angular/platform-server": "~5.2.0",
4950
"@angular/router": "~5.2.0",
50-
"@angular/tsc-wrapped": "^4.4.6",
5151
"@google-cloud/storage": "^1.4.0",
5252
"@types/chalk": "^0.4.31",
5353
"@types/fs-extra": "^4.0.5",

src/apps/universal-app/package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/lib/bidi/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
This directory contains a mirror of the Angular CDK `BidiModule`. It is included in this package to
2+
avoid a direct dependency on `@angular/cdk`, which may be a burden to users.
3+
4+
This package may/may not be removed in upcoming releases, so users are encouraged not to depend on it
5+
explicitly. If there are any issues encountered with the `BidiModule`, please file them in the
6+
Angular Material [repo](https://github.com/angular/material2/issues).

src/lib/server/README.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
This entrypoint consolidates the logic for running Flex Layout on the server. Because it uses Node.js
2+
APIs, it must be segmented into the server bundle. This also helps avoid including server code in the
3+
browser bundle.
4+
5+
The main export for this entrypoint, the `FlexLayoutServerModule`, can be imported into a server module
6+
file, e.g. `app.server.module.ts` as follows:
7+
8+
```typescript
9+
import {NgModule} from '@angular/core';
10+
import {FlexLayoutServerModule} from '@angular/flex-layout/server';
11+
12+
@NgModule(({
13+
imports: [
14+
... other imports here
15+
FlexLayoutServerModule,
16+
]
17+
}))
18+
export class AppServerModule {}
19+
```
20+
21+
This module, in addition to handling all of the style processing/rendering before the Angular app is
22+
bootstrapped on the server, also substitutes the version of `MatchMedia` with a server-compatible
23+
implementation called `ServerMatchMedia`.

tools/gulp/tasks/universal.ts

+10
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ const distDir = join(outputDir, 'releases', 'flex-layout');
88
const tarBall = join(distDir, `angular-flex-layout-${projectVersion}.tgz`);
99
const appDir = join(packagesDir, 'apps', 'universal-app');
1010

11+
task('universal:serve', sequenceTask(
12+
'prerender',
13+
'prerender:run:server'
14+
));
15+
1116
task('prerender', sequenceTask(
1217
'prerender:pre',
1318
'prerender:build',
@@ -40,6 +45,11 @@ task('prerender:webpack', execTask(
4045
{cwd: appDir}
4146
));
4247

48+
task('prerender:run:server', execTask(
49+
'node', ['dist/server.js'],
50+
{cwd: appDir, failOnStderr: true}
51+
));
52+
4353
task('prerender:clean', sequenceTask('prerender:clear:deps', 'prerender:clear:dist'));
4454

4555
task('prerender:clear:deps', [], execTask(

0 commit comments

Comments
 (0)