Skip to content

Commit

Permalink
docs: reorg deployment guide with serve-from-disk info from CLI story
Browse files Browse the repository at this point in the history
  • Loading branch information
jbogarthyde committed Jan 17, 2019
1 parent 8a08ff1 commit 7920d6f
Showing 1 changed file with 38 additions and 29 deletions.
67 changes: 38 additions & 29 deletions aio/content/guide/deployment.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,46 @@
# Deployment

When you are ready to deploy your Angular application to a remote server, you have various options for
deployment.
When you are ready to deploy your Angular application to a remote server, you have various options for deployment.

{@a dev-deploy}
{@a copy-files}

## Simplest deployment possible

## Simple deployment options

Before fully deploying your application, you can test the process, build configuration, and deployed behavior by using one of these interim techniques

### Building and serving from disk

During development, you typically use the `ng serve` command to build, watch, and serve the application from local memory, using [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
When you are ready to deploy, however, you must use the `ng build` command to build the app and deploy the build artifacts elsewhere.

Both `ng build` and `ng serve` clear the output folder before they build the project, but only the `ng build` command writes the generated build artifacts to the output folder.
Serving the contents of your output folder from a local web server can give you a better idea of how your application will behave when it is deployed to a remote server.

<div class="alert is-helpful">

The output folder is `dist/` by default.
To output to a different folder, change the `outputPath` in `angular.json`.

</div>

When you have deployed your app, however, you might still want to serve the app so that you can continue to see changes that you make in it.
You will need two terminals to get the live-reload experience.

* On the first terminal, run the [`ng build` command](cli/build) in *watch* mode to compile the application to the `dist` folder. Like the `ng serve` command, this regenerates output files when source files change.

```
ng build --watch
```

* On the second terminal, install an run a web server against the output folder. For example, if you install [lite-server](https://github.com/johnpapa/lite-server), it will auto-reload your browser when new files are output.

```
lite-server --baseDir="dist"
```

### Basic deployment to a remote server

For the simplest deployment, create a production build and copy the output directory to a web server.

Expand All @@ -26,7 +60,7 @@ This is the simplest production-ready deployment of your application.

{@a deploy-to-github}

## Deploy to GitHub pages
### Deploy to GitHub pages

Another simple way to deploy your Angular app is to use [GitHub Pages](https://help.github.com/articles/what-is-github-pages/).

Expand Down Expand Up @@ -326,28 +360,3 @@ the subfolder is `my/app/` and you should add `<base href="/my/app/">` to the se

When the `base` tag is mis-configured, the app fails to load and the browser console displays `404 - Not Found` errors
for the missing files. Look at where it _tried_ to find those files and adjust the base tag appropriately.

## Building and serving for deployment

When you are designing and developing applications, you typically use `ng serve` to build your app for fast, local, iterative development.
When you are ready to deploy, however, you must use the `ng build` command to build the app and deploy the build artifacts elsewhere.

Both `ng build` and `ng serve` clear the output folder before they build the project, but only the `ng build` command writes the generated build artifacts to the output folder.

<div class="alert is-helpful">

The output folder is `dist/` by default.
To output to a different folder, change the `outputPath` in `angular.json`.

</div>

The `ng serve` command builds, watches, and serves the application from local memory, using a local development server.
When you have deployed your app to another server, however, you might still want to serve the app so that you can continue to see changes that you make in it.
You can do this by adding the `--watch` option to the `ng build` command.

```
ng build --watch
```
Like the `ng serve` command, this regenerates output files when source files change.

For complete details of the CLI commands, see the [CLI command reference](cli).

0 comments on commit 7920d6f

Please sign in to comment.