Skip to content

Commit afbddfe

Browse files
Broccofilipesilva
authored andcommitted
docs(@angular/cli): document serving the app from disk
Closes angular#4290 Close angular#5308
1 parent 2828ab4 commit afbddfe

File tree

3 files changed

+28
-1
lines changed

3 files changed

+28
-1
lines changed

docs/documentation/serve.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,7 @@ All the build Options are available in serve below are the additional options.
2424

2525
`--ssl-cert` SSL certificate to use for serving HTTPS.
2626

27-
`--ssl-key` SSL key to use for serving HTTPS.
27+
`--ssl-key` SSL key to use for serving HTTPS.
28+
29+
## Note
30+
When running `ng serve`, the compiled output is served from memory, not from disk. This means that the application being served is not located on disk in the `dist` folder.

docs/documentation/stories.md

+1
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,4 @@
2020
- [Routing](stories/routing)
2121
- [3rd Party Lib](stories/third-party-lib)
2222
- [Corporate Proxy](stories/using-corporate-proxy)
23+
- [Serve from Disk](stories/disk-serve)
+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Serve from Disk
2+
3+
The CLI supports running a live browser reload experience to users by running `ng serve`. This will compile the application upon file saves and reload the browser with the newly compiled application. This is done by hosting the application in memory and serving it via [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
4+
5+
If you wish to get a similar experience with the application output to disk please use the steps below. This practice will allow you to ensure that serving the contents of your `dist` dir will be closer to how your application will behave when it is deployed.
6+
7+
## Environment Setup
8+
### Install a web server
9+
You will not be using webpack-dev-server, so you will need to install a web server for the browser to request the application. There are many to choose from but a good one to try is [lite-server](https://github.com/johnpapa/lite-server) as it will auto-reload your browser when new files are output.
10+
11+
## Usage
12+
You will need two terminals to get the live-reload experience. The first will run the build in a watch mode to compile the application to the `dist` folder. The second will run the web server against the `dist` folder. The combination of these two processes will mimic the same behavior of ng serve.
13+
14+
### 1st terminal - Start the build
15+
```bash
16+
ng build --watch
17+
```
18+
19+
### 2nd terminal - Start the web server
20+
```bash
21+
lite-server --baseDir="dist"
22+
```
23+
When using `lite-server` the default browser will open to the appropriate URL.

0 commit comments

Comments
 (0)