5 lines
44 KiB
JSON
5 lines
44 KiB
JSON
|
{
|
||
|
|
"id": "guide/deployment",
|
||
|
|
"title": "Deployment",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/deployment.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"deployment\">Deployment<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deployment#deployment\"><i class=\"material-icons\">link</i></a></h1>\n<p>When you are ready to deploy your Angular application to a remote server, you have various options for deployment.</p>\n<a id=\"dev-deploy\"></a>\n<a id=\"copy-files\"></a>\n<h2 id=\"simple-deployment-options\">Simple deployment options<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deployment#simple-deployment-options\"><i class=\"material-icons\">link</i></a></h2>\n<p>Before fully deploying your application, you can test the process, build configuration, and deployed behavior by using one of these interim techniques.</p>\n<h3 id=\"building-and-serving-from-disk\">Building and serving from disk<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deployment#building-and-serving-from-disk\"><i class=\"material-icons\">link</i></a></h3>\n<p>During development, you typically use the <code>ng serve</code> command to build, watch, and serve the application from local memory, using <a href=\"https://webpack.js.org/guides/development/#webpack-dev-server\">webpack-dev-server</a>.\nWhen you are ready to deploy, however, you must use the <code>ng build</code> command to build the app and deploy the build artifacts elsewhere.</p>\n<p>Both <code>ng build</code> and <code>ng serve</code> clear the output folder before they build the project, but only the <code>ng build</code> command writes the generated build artifacts to the output folder.</p>\n<div class=\"alert is-helpful\">\n<p>The output folder is <code>dist/project-name/</code> by default.\nTo output to a different folder, change the <code>outputPath</code> in <code>angular.json</code>.</p>\n</div>\n<p>As you near the end of the development process, 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.\nYou will need two terminals to get the live-reload experience.</p>\n<ul>\n<li>\n<p>On the first terminal, run the <a href=\"cli/build\"><code>ng build</code> command</a> in <em>watch</em> mode to compile the application to the <code>dist</code> folder.</p>\n<code-example language=\"none\" class=\"code-shell\">\n\n ng build --watch\n\n</code-example>\n<p>Like the <code>ng serve</code> command, this regenerates output files when source files change.</p>\n</li>\n<li>\n<p>On the second terminal, install a web server (such as <a href=\"https://github.com/johnpapa/lite-server\">lite-server</a>), and run it against the output folder. For example:</p>\n<code-example language=\"none\" class=\"code-shell\">\n\n lite-server --baseDir=\"dist/project-name\"\n\n</code-example>\n<p> The server will automatically reload your browser when new files are output.</p>\n</li>\n</ul>\n<div class=\"alert is-critical\">\n<p>This method is for development and testing only, and is not a supported or secure way of deploying an application.</p>\n</div>\n<h3 id=\"automatic-deployment-with-the-cli\">Automatic deployment with the CLI<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deployment#automatic-deployment-with-the-cli\"><i class=\"material-icons\">link</i></a></h3>\n<p>The Angular CLI command <code>ng deploy</code> (introduced in version 8.3.0) executes the <code>deploy</code> <a href=\"guide/cli-builder\">CLI builder</a> associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project by running <code>ng add [package name]</c
|
||
|
|
}
|