Skip to content

Commit

Permalink
docs: fixup deployment guide (#26486)
Browse files Browse the repository at this point in the history 
- remove sections that were not relevant (all the development stuff)
- fix incorrect info

PR Close #26486
  • Loading branch information
@IgorMinar @matsko
IgorMinar authored and matsko committed Oct 30, 2018
1 parent 8356577 commit 40cd037
Showing 1 changed file with 19 additions and 78 deletions.
97 changes: 19 additions & 78 deletions aio/content/guide/deployment.md
View file
@@ -1,19 +1,19 @@
# Deployment

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

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

## Simplest deployment possible

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

1. Start with the development build:
1. Start with the production build:

<code-example language="none" class="code-shell">
ng build
ng build --prod
</code-example>


Expand All @@ -22,26 +22,25 @@ For the simplest deployment, build for development and copy the output directory
3. Configure the server to redirect requests for missing files to `index.html`.
Learn more about server-side redirects [below](#fallback).

This is _not_ a production deployment. It's not optimized, and it won't be fast for users.
It might be good enough for sharing your progress and ideas internally with managers, teammates, and other stakeholders. For the next steps in deployment, see [Optimize for production](#optimize).
This is the simplest production-ready deployment of your application.

{@a deploy-to-github}

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

1. You need to [create a GitHub account](https://github.com/join) if you don't have one, and then [create a repository](https://help.github.com/articles/create-a-repo/) for your project.
1. You need to [create a GitHub account](https://github.com/join) if you don't have one, and then [create a repository](https://help.github.com/articles/create-a-repo/) for your project.
Make a note of the user name and project name in GitHub.

1. Build your project using Github project name, with the Angular CLI command [`ng build`](cli/build) and the options shown here:
<code-example language="none" class="code-shell">
ng build --prod --output-path docs --base-href <project_name>
</code-example>

1. When the build is complete, make a copy of `docs/index.html` and name it `docs/404.html`.
1. When the build is complete, make a copy of `docs/index.html` and name it `docs/404.html`.

1. Commit your changes and push.
1. Commit your changes and push.

1. On the GitHub project page, configure it to [publish from the docs folder](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch).

Expand Down Expand Up @@ -97,51 +96,6 @@ There is no single configuration that works for every server.
The following sections describe configurations for some of the most popular servers.
The list is by no means exhaustive, but should provide you with a good starting point.

#### Development servers

During development, the [`ng serve`](cli/serve) CLI command lets you run your app in a local browser.
The CLI recompiles the application each time you save a file,
and reloads the browser with the newly compiled application.

The app is hosted in local memory and served on `http://localhost:4200/`, using [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).

{@a serve-from-disk}

Later in development, you might want a closer approximation of how your app will behave when deployed.
You can output your distribution folder (`dist`) to disk, but you need to install a different web server.
Try installing [lite-server](https://github.com/johnpapa/lite-server); like `webpack-dev-server`, it can automatically reload your browser when you write new files.

To get the live-reload experience, you will need to run two terminals.
The first runs the build in a watch mode and compiles the application to the `dist` folder.
The second runs the web server against the `dist` folder.
The combination of these two processes provides the same behavior as `ng serve`.

1. Start the build in terminal A:
<code-example language="none" class="code-shell">
ng build --watch
</code-example>

1. Start the web server in terminal B:
<code-example language="none" class="code-shell">
lite-server --baseDir="dist"
</code-example>
The default browser opens to the appropriate URL.

* [Lite-Server](https://github.com/johnpapa/lite-server): the default dev server installed with the
[Quickstart repo](https://github.com/angular/quickstart) is pre-configured to fallback to `index.html`.

* [Webpack-Dev-Server](https://github.com/webpack/webpack-dev-server): setup the
`historyApiFallback` entry in the dev server options as follows:

<code-example>
historyApiFallback: {
disableDotRule: true,
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
}
</code-example>

#### Production servers

* [Apache](https://httpd.apache.org/): add a
[rewrite rule](http://httpd.apache.org/docs/current/mod/mod_rewrite.html) to the `.htaccess` file as shown
(https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/):
Expand Down Expand Up @@ -230,19 +184,9 @@ Read about how to enable CORS for specific servers at

{@a optimize}

## Optimize for production

Although deploying directly from the development environment works,
you can generate an optimized build with additional CLI command line flags,
starting with `--prod`.
## Production optimizations

### Build with _--prod_

<code-example language="none" class="code-shell">
ng build --prod
</code-example>

The `--prod` _meta-flag_ engages the following optimization features.
The `--prod` _meta-flag_ engages the following build optimization features.

* [Ahead-of-Time (AOT) Compilation](guide/aot-compiler): pre-compiles Angular component templates.
* [Production mode](#enable-prod-mode): deploys the production environment which enables _production mode_.
Expand All @@ -251,25 +195,22 @@ The `--prod` _meta-flag_ engages the following optimization features.
* Uglification: rewrites code to use short, cryptic variable and function names.
* Dead code elimination: removes unreferenced modules and much unused code.

The remaining [copy deployment steps](#copy-files) are the same as before.

See [`ng build`](cli/build) for more about CLI build options and what they do.


{@a enable-prod-mode}

### Enable production mode
### Enable runtime production mode

Angular apps run in development mode by default, as you can see by the following message on the browser
console:
In addition to build optimizations, Angular also has a runtime production mode. Angular apps run in development mode by default, as you can see by the following message on the browser console:

<code-example format="nocode">
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
</code-example>

Switching to _production mode_ can make it run faster by disabling development specific checks such as the dual change detection cycles.
Switching to _production mode_ makes it run faster by disabling development specific checks such as the dual change detection cycles.

Building for production (or appending the `--environment=prod` flag) enables _production mode_
Look at the CLI-generated `main.ts` to see how this works.
When you enable production builds via `--prod` command line flag, the runtime production mode is enabled as well.

{@a lazy-loading}

Expand All @@ -293,7 +234,7 @@ If you do that, the module will be loaded immediately.

The bundling configuration must take lazy loading into consideration.
Because lazy-loaded modules aren't imported in JavaScript, bundlers exclude them by default.
Bundlers don't know about the router configuration and can't create separate bundles for lazy-loaded modules.
Bundlers don't know about the router configuration and can't create separate bundles for lazy-loaded modules.
You would have to create these bundles manually.

The CLI runs the
Expand Down Expand Up @@ -388,7 +329,7 @@ for the missing files. Look at where it _tried_ to find those files and adjust t

## 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 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.
Expand All @@ -401,12 +342,12 @@ 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.
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.
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 40cd037

Please sign in to comment.