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

Brocco · 2017-03-08T18:42:56Z

filipesilva · 2017-03-08T19:01:28Z

docs/documentation/stories/disk-serve.md

+
+## Environment Setup
+### Install a web server
+Because you will not be using webpack-dev-server 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 [live-server](https://www.npmjs.com/package/live-server) as it will auto-reload your browser when new files are outputed.


Shoudln't this be https://github.com/johnpapa/lite-server instead? Otherwise it won't have fallback.

good point. i agree

outputed --> output

johnpapa · 2017-03-08T19:51:24Z

docs/documentation/stories.md

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


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

johnpapa · 2017-03-08T19:51:46Z

docs/documentation/stories/disk-serve.md

@@ -0,0 +1,23 @@
+# Serving from Disk
+
+The CLI supports running a live 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).


live reload --> live browser reload

johnpapa · 2017-03-08T19:54:10Z

docs/documentation/stories/disk-serve.md

+
+The CLI supports running a live 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.


My motivation for this is to verify that what will be in the /dist folder , which is also what I may send to a production server later, is indeed ok when served. This is important for folks who want to be super careful. I personally dont trust "well, it ran in memory, so it will certainly run off disk" ... why? because maybe somewhere in the black box there is something different.

Point here is that I think we should add something mentioning this motivation. And that it is easy to do your own verification following your forthcoming steps.

johnpapa · 2017-03-08T19:54:58Z

docs/documentation/stories/disk-serve.md

+
+## Environment Setup
+### Install a web server
+Because you will not be using webpack-dev-server 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 [live-server](https://www.npmjs.com/package/live-server) as it will auto-reload your browser when new files are outputed.


"Because you will not be using webpack-dev-server you will need" --> "You will not be using webpack-dev-server , so you will need"

dont end or start sentence with preposition, when it can be avoided.

johnpapa · 2017-03-08T19:55:05Z

docs/documentation/stories/disk-serve.md

+
+## Environment Setup
+### Install a web server
+Because you will not be using webpack-dev-server 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 [live-server](https://www.npmjs.com/package/live-server) as it will auto-reload your browser when new files are outputed.


good point. i agree

johnpapa · 2017-03-08T19:55:20Z

docs/documentation/stories/disk-serve.md

+
+## Environment Setup
+### Install a web server
+Because you will not be using webpack-dev-server 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 [live-server](https://www.npmjs.com/package/live-server) as it will auto-reload your browser when new files are outputed.


outputed --> output

johnpapa · 2017-03-08T19:56:52Z

docs/documentation/stories/disk-serve.md

+Because you will not be using webpack-dev-server 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 [live-server](https://www.npmjs.com/package/live-server) as it will auto-reload your browser when new files are outputed.
+
+## Usage
+In order to mimic the live-reload you get with `ng serve` by default you will need to open two terminals. 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`.


suggest ...

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.

johnpapa · 2017-03-08T19:57:07Z

docs/documentation/stories/disk-serve.md

+```
+### 2nd terminal - Start the web server
+```bash
+live-server dist


lite-server

johnpapa · 2017-03-08T19:57:18Z

docs/documentation/stories/disk-serve.md

+```
+
+### Open browser
+Navigate to the URL the web server uses. (The default URL for live-server is `http://127.0.0.1:8080`)


lite-server opens the browser by default, too

lite-server --baseDir="dist" with 2.3.0

Closes angular#4290

Brocco · 2017-03-08T21:26:01Z

@johnpapa & @filipesilva this has been updated with the suggestions

johnpapa · 2017-03-08T21:31:39Z

docs/documentation/stories/disk-serve.md

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


should we tell them how to install it?

npm i lite-server

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?

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

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.

Closes angular#4290 Close angular#5308

angular-automatic-lock-bot · 2019-09-11T22:42:23Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Brocco requested review from johnpapa and filipesilva March 8, 2017 18:42

googlebot added the cla: yes label Mar 8, 2017

filipesilva reviewed Mar 8, 2017

View reviewed changes

johnpapa suggested changes Mar 8, 2017

View reviewed changes

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

832eca5

Closes angular#4290

Brocco force-pushed the disk-serve-docs branch from bcbd37c to 832eca5 Compare March 8, 2017 21:25

johnpapa reviewed Mar 8, 2017

View reviewed changes

filipesilva approved these changes Mar 8, 2017

View reviewed changes

filipesilva closed this in afbddfe Mar 9, 2017

Brocco deleted the disk-serve-docs branch March 15, 2017 17:47

asnowwolf pushed a commit to asnowwolf/angular-cli that referenced this pull request Apr 12, 2017

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

d91a2ad

Closes angular#4290 Close angular#5308

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Brocco commented Mar 8, 2017

filipesilva Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017

johnpapa Mar 8, 2017 •

edited

Loading

Brocco commented Mar 8, 2017

johnpapa Mar 8, 2017

Brocco Mar 8, 2017

johnpapa Mar 8, 2017

Brocco Mar 8, 2017

johnpapa Mar 9, 2017

angular-automatic-lock-bot bot commented Sep 11, 2019

		@@ -0,0 +1,23 @@
		# Serving from Disk

		The CLI supports running a live 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).


		The CLI supports running a live 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.

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

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

Conversation

Brocco commented Mar 8, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnpapa Mar 8, 2017 • edited Loading

Choose a reason for hiding this comment

Brocco commented Mar 8, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 11, 2019

johnpapa Mar 8, 2017 •

edited

Loading