docs: fixup deployment guide (#26486)

- remove sections that were not relevant (all the development stuff)
- fix incorrect info

PR Close #26486
This commit is contained in:
Igor Minar 2018-10-16 12:12:43 -07:00 committed by Matias Niemelä
parent 634e9e970a
commit 62b4ff5250
1 changed files with 19 additions and 78 deletions

View File

@ -8,12 +8,12 @@ deployment.
## Simplest deployment possible ## 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"> <code-example language="none" class="code-shell">
ng build ng build --prod
</code-example> </code-example>
@ -22,8 +22,7 @@ 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`. 3. Configure the server to redirect requests for missing files to `index.html`.
Learn more about server-side redirects [below](#fallback). 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. This is the simplest production-ready deployment of your application.
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).
{@a deploy-to-github} {@a deploy-to-github}
@ -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 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. 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 * [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 [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/): (https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/):
@ -230,19 +184,9 @@ Read about how to enable CORS for specific servers at
{@a optimize} {@a optimize}
## Optimize for production ## Production optimizations
Although deploying directly from the development environment works, The `--prod` _meta-flag_ engages the following build optimization features.
you can generate an optimized build with additional CLI command line flags,
starting with `--prod`.
### Build with _--prod_
<code-example language="none" class="code-shell">
ng build --prod
</code-example>
The `--prod` _meta-flag_ engages the following optimization features.
* [Ahead-of-Time (AOT) Compilation](guide/aot-compiler): pre-compiles Angular component templates. * [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_. * [Production mode](#enable-prod-mode): deploys the production environment which enables _production mode_.
@ -251,25 +195,22 @@ The `--prod` _meta-flag_ engages the following optimization features.
* Uglification: rewrites code to use short, cryptic variable and function names. * Uglification: rewrites code to use short, cryptic variable and function names.
* Dead code elimination: removes unreferenced modules and much unused code. * 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. See [`ng build`](cli/build) for more about CLI build options and what they do.
{@a enable-prod-mode} {@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 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:
console:
<code-example format="nocode"> <code-example format="nocode">
Angular is running in the development mode. Call enableProdMode() to enable the production mode. Angular is running in the development mode. Call enableProdMode() to enable the production mode.
</code-example> </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_ When you enable production builds via `--prod` command line flag, the runtime production mode is enabled as well.
Look at the CLI-generated `main.ts` to see how this works.
{@a lazy-loading} {@a lazy-loading}