Skip to content

Commit 4106a89

Browse files
Broccofilipesilva
authored andcommitted
docs: Add app shell story.
1 parent 18de4f4 commit 4106a89

File tree

2 files changed

+55
-0
lines changed

2 files changed

+55
-0
lines changed

docs/documentation/stories.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
# Stories describing how to do more with the CLI
44

55
- [1.0 Update](stories/1.0-update)
6+
- [App Shell](stories/app-shell)
67
- [Asset Configuration](stories/asset-configuration)
78
- [Autocompletion](stories/autocompletion)
89
- [Configure Hot Module Replacement](stories/configure-hmr)
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!-- Links in /docs/documentation should NOT have \`.md\` at the end, because they end up in our wiki at release. -->
2+
3+
# App shell
4+
5+
App shell is a way to render a portion of your application via a route at build time. This gives users a meaningful first paint of your application because the browser does not need to initialize any JavaScript, just rendering the HTML.
6+
7+
## Steps
8+
9+
### Step 1: Prepare the application
10+
11+
An application must be set up with routing. This can be accomplished by running:
12+
```
13+
ng new my-app --routing
14+
```
15+
Or if you have an existing application you can manually add routing by including the RouterModule and defining a `<router-outlet>` within your app.
16+
17+
18+
### Step 2: Create the app shell
19+
```
20+
ng generate app-shell --client-project my-app --universal-project server-app
21+
```
22+
`my-app` is the name of your client application
23+
`server-app` is the name of the universal (or server) application
24+
25+
After running this command you will notice that the `angular.json` configuration file has been updated. Two new targets were added (and a few other changes):
26+
```
27+
"server": {
28+
"builder": "@angular-devkit/build-angular:server",
29+
"options": {
30+
"outputPath": "dist/my-app-server",
31+
"main": "src/main.server.ts",
32+
"tsConfig": "src/tsconfig.server.json"
33+
}
34+
},
35+
"app-shell": {
36+
"builder": "@angular-devkit/build-angular:app-shell",
37+
"options": {
38+
"browserTarget": "my-app:build",
39+
"serverTarget": "my-app:server",
40+
"route": "shell"
41+
}
42+
}
43+
```
44+
45+
### Step 3: Verify the app is built with the shell content
46+
47+
build with the app shell target
48+
```
49+
ng run my-app:app-shell
50+
```
51+
52+
Verify the build output
53+
Open dist/app-shell/index.html
54+
look for text "app-shell works!" which verifies that the app shell route was rendered as part of the output

0 commit comments

Comments
 (0)