angular-cn/aio/dist/generated/docs/start/start-deployment.json

{
  "id": "start/start-deployment",
  "title": "Deploying an application",
  "contents": "\n\n\n<div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/aio/content/start/start-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=\"deploying-an-application\">Deploying an application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-deployment#deploying-an-application\"><i class=\"material-icons\">link</i></a></h1>\n<p>Deploying your application is the process of compiling, or building, your code and hosting the JavaScript, CSS, and HTML on a web server.</p>\n<p>This section builds on the previous steps in the <a href=\"start\" title=\"Try it: A basic application\">Getting Started</a> tutorial and shows you how to deploy your application.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-deployment#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>A best practice is to run your project locally before you deploy it. To run your project locally, you need the following installed on your computer:</p>\n<ul>\n<li>\n<p><a href=\"https://nodejs.org/en/\">Node.js</a>.</p>\n</li>\n<li>\n<p>The <a href=\"https://cli.angular.io/\">Angular CLI</a>.\nFrom the terminal, install the Angular CLI globally with:</p>\n<code-example language=\"sh\">\nnpm install -g @angular/cli\n</code-example>\n<p>  With the Angular CLI, you can use the command <code>ng</code> to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.</p>\n</li>\n</ul>\n<h2 id=\"running-your-application-locally\">Running your application locally<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-deployment#running-your-application-locally\"><i class=\"material-icons\">link</i></a></h2>\n<ol>\n<li>\n<p>Download the source code from your StackBlitz project by clicking the <code>Download Project</code> icon in the left menu, across from <code>Project</code>, to download your files.</p>\n</li>\n<li>\n<p>Create a new Angular CLI workspace using the <a href=\"cli/new\" title=\"CLI ng new command reference\"><code>ng new</code></a> command, where <code>my-project-name</code> is what you would like to call your project:</p>\n<code-example language=\"sh\">\nng new my-project-name\n</code-example>\n<p>This command displays a series of configuration prompts. For this tutorial, accept the default settings for each prompt.</p>\n</li>\n<li>\n<p>In your newly CLI-generated application, replace the <code>/src</code> folder with the <code>/src</code> folder from your <code>StackBlitz</code> download.</p>\n</li>\n<li>\n<p>Use the following CLI command to run your application locally:</p>\n<code-example language=\"sh\">\nng serve\n</code-example>\n</li>\n<li>\n<p>To see your application in the  browser, go to <a href=\"http://localhost:4200/\">http://localhost:4200/</a>.\nIf the default port 4200 is not available, you can specify another port with the port flag as in the following example:</p>\n<code-example language=\"sh\">\nng serve --port 4201\n</code-example>\n<p>While serving your application, you can edit your code and see the changes update automatically in the browser.\nTo stop the <code>ng serve</code> command, press <code>Ctrl</code>+<code>c</code>.</p>\n</li>\n</ol>\n<a id=\"building\"></a>\n<h2 id=\"building-and-hosting-your-application\">Building and hosting your application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-deployment#building-and-hosting-your-application\"><i class=\"material-icons\">link</i></a></h2>\n<ol>\n<li>\n<p>To build your application for production, use the <code>build</code> command. By default, this command uses the <code>production</code> build configuration.</p>\n<code-example language=\"sh\">\nng build\n</code-example>\n<p>This command creates a <code>dist</code> folder in the application root directory with all the files that a hosting service needs for serving your application.</p>\n<div class=\"alert is-helpful\">\n<p>If the above <code>ng build</code> command throws an error about missing packages, append the missing dependencies in your local project's <code>package.json</code> file to match the one in the downloaded StackBlitz project.</p>\n</div>\n</li>\n<li>\n<p>Copy the contents of the <code>dist/my-project-name</code> folder to your web server.\nBecause these files are static, you can host them on any web server capable of serving files; such as <code>Node.js</code>, Java, .NET, or any backend such as <a href=\"https://firebase.google.com/docs/hosting\">Firebase</a>, <a href=\"https://cloud.google.com/solutions/web-hosting\">Google Cloud</a>, or <a href=\"https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website\">App Engine</a>.\nFor more information, see <a href=\"guide/build\" title=\"Building and Serving Angular Apps\">Building &#x26; Serving</a> and <a href=\"guide/deployment\" title=\"Deployment guide\">Deployment</a>.</p>\n</li>\n</ol>\n<h2 id=\"whats-next\">What's next<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-deployment#whats-next\"><i class=\"material-icons\">link</i></a></h2>\n<p>In this tutorial, you've laid the foundation to explore the Angular world in areas such as mobile development, UX/UI development, and server-side rendering.\nYou can go deeper by studying more of Angular's features, engaging with the vibrant community, and exploring the robust ecosystem.</p>\n<h3 id=\"learning-more-angular\">Learning more Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-deployment#learning-more-angular\"><i class=\"material-icons\">link</i></a></h3>\n<p>For a more in-depth tutorial that leads you through building an application locally and exploring many of Angular's most popular features, see <a href=\"tutorial\">Tour of Heroes</a>.</p>\n<p>To explore Angular's foundational concepts, see the guides in the Understanding Angular section such as <a href=\"guide/component-overview\">Angular Components Overview</a> or <a href=\"guide/template-syntax\">Template syntax</a>.</p>\n<h3 id=\"joining-the-community\">Joining the community<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-deployment#joining-the-community\"><i class=\"material-icons\">link</i></a></h3>\n<p><a href=\"https://twitter.com/intent/tweet?url=https://angular.io/start&#x26;text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial\" title=\"Angular on Twitter\">Tweet that you've completed this tutorial</a>, tell us what you think, or submit <a href=\"https://github.com/angular/angular/issues/new/choose\" title=\"Angular GitHub repository new issue form\">suggestions for future editions</a>.</p>\n<p>Keep current by following the <a href=\"https://blog.angular.io/\" title=\"Angular blog\">Angular blog</a>.</p>\n<h3 id=\"exploring-the-angular-ecosystem\">Exploring the Angular ecosystem<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-deployment#exploring-the-angular-ecosystem\"><i class=\"material-icons\">link</i></a></h3>\n<p>To support your UX/UI development, see <a href=\"https://material.angular.io/\" title=\"Angular Material web site\">Angular Material</a>.</p>\n<p>To test your Angular applications, see <a href=\"https://protractor.angular.io/\" title=\"Angular Protractor web site\">Angular Protractor</a>.</p>\n<p>The Angular community also has an extensive <a href=\"resources\" title=\"Angular resources list\">network of third-party tools and libraries</a>.</p>\n\n  \n</div>\n\n<!-- links to this doc:\n - start\n - start/start-data\n - start/start-forms\n - start/start-routing\n-->\n<!-- links from this doc:\n - cli/new\n - guide/build\n - guide/component-overview\n - guide/deployment\n - guide/template-syntax\n - resources\n - start\n - start/start-deployment#building-and-hosting-your-application\n - start/start-deployment#deploying-an-application\n - start/start-deployment#exploring-the-angular-ecosystem\n - start/start-deployment#joining-the-community\n - start/start-deployment#learning-more-angular\n - start/start-deployment#prerequisites\n - start/start-deployment#running-your-application-locally\n - start/start-deployment#whats-next\n - tutorial\n - http://localhost:4200/\n - https://blog.angular.io/\n - https://cli.angular.io/\n - https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website\n - https://cloud.google.com/solutions/web-hosting\n - https://firebase.google.com/docs/hosting\n - https://github.com/angular/angular/edit/master/aio/content/start/start-deployment.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/angular/issues/new/choose\n - https://material.angular.io/\n - https://nodejs.org/en/\n - https://protractor.angular.io/\n - https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial\n-->"
}