Skip to content

docs(@angular/cli): document serving the app from disk #5308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

docs(@angular/cli): document serving the app from disk #5308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/documentation/serve.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,7 @@ All the build Options are available in serve below are the additional options.

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

`--ssl-key` SSL key to use for serving HTTPS.
`--ssl-key` SSL key to use for serving HTTPS.

## Note
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.
1 change: 1 addition & 0 deletions docs/documentation/stories.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,4 @@
- [Routing](stories/routing)
- [3rd Party Lib](stories/third-party-lib)
- [Corporate Proxy](stories/using-corporate-proxy)
- [Serve from Disk](stories/disk-serve)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit, but you say "serve from disk" here and later it is "serving from disk" I'd pick and be consistent.

23 changes: 23 additions & 0 deletions docs/documentation/stories/disk-serve.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Serve from Disk

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).

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.

## Environment Setup
### Install a web server
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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we tell them how to install it?

npm i lite-server

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a link to the repo and it's in that readme, so I'm a little torn on this one, but it doesn't hurt to add, but then we get into...

install globally?
if locally installed, update npm scripts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a user wanting to do this would understand that its not part of the CLI. The furthest I would go is npm - lite-server --save-dev and add an npm script or npm i lite-server -g

because if they install it locally, they need the script.

or we skip it all. im fine with that too :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we skip it, because it avoids people's concerns over using yarn instead. I think that if people are concerned enough to want to serve from disk that they can handle installing a web server that is linked to.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agreed


## Usage
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.

### 1st terminal - Start the build
```bash
ng build --watch
```

### 2nd terminal - Start the web server
```bash
lite-server --baseDir="dist"
```
When using `lite-server` the default browser will open to the appropriate URL.