{ "id": "start/start-deployment", "title": "Deploying an application", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Deploying an applicationlink

\n

Deploying your application is the process of compiling, or building, your code and hosting the JavaScript, CSS, and HTML on a web server.

\n

This section builds on the previous steps in the Getting Started tutorial and shows you how to deploy your application.

\n

Prerequisiteslink

\n

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:

\n\n

Running your application locallylink

\n
    \n
  1. \n

    Download the source code from your StackBlitz project by clicking the Download Project icon in the left menu, across from Project, to download your files.

    \n
    2. \n
  2. \n

    Create a new Angular CLI workspace using the ng new command, where my-project-name is what you would like to call your project:

    \n\nng new my-project-name\n\n

    This command displays a series of configuration prompts. For this tutorial, accept the default settings for each prompt.

    \n
    3. \n
  3. \n

    In your newly CLI-generated application, replace the /src folder with the /src folder from your StackBlitz download.

    \n
    4. \n
  4. \n

    Use the following CLI command to run your application locally:

    \n\nng serve\n\n
    5. \n
  5. \n

    To see your application in the browser, go to http://localhost:4200/.\nIf the default port 4200 is not available, you can specify another port with the port flag as in the following example:

    \n\nng serve --port 4201\n\n

    While serving your application, you can edit your code and see the changes update automatically in the browser.\nTo stop the ng serve command, press Ctrl+c.

    \n
    6. \n
\n\n

Building and hosting your applicationlink

\n
    \n
  1. \n

    To build your application for production, use the build command. By default, this command uses the production build configuration.

    \n\nng build\n\n

    This command creates a dist folder in the application root directory with all the files that a hosting service needs for serving your application.

    \n
    \n

    If the above ng build command throws an error about missing packages, append the missing dependencies in your local project's package.json file to match the one in the downloaded StackBlitz project.

    \n
    \n
    2. \n
  2. \n

    Copy the contents of the dist/my-project-name folder to your web server.\nBecause these files are static, you can host them on any web server capable of serving files; such as Node.js, Java, .NET, or any backend such as Firebase, Google Cloud, or App Engine.\nFor more information, see Building & Serving and Deployment.

    \n
    3. \n
\n

What's nextlink

\n

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.

\n

Learning more Angularlink

\n

For a more in-depth tutorial that leads you through building an application locally and exploring many of Angular's most popular features, see Tour of Heroes.

\n

To explore Angular's foundational concepts, see the guides in the Understanding Angular section such as Angular Components Overview or Template syntax.

\n

Joining the communitylink

\n

Tweet that you've completed this tutorial, tell us what you think, or submit suggestions for future editions.

\n

Keep current by following the Angular blog.

\n

Exploring the Angular ecosystemlink

\n

To support your UX/UI development, see Angular Material.

\n

To test your Angular applications, see Angular Protractor.

\n

The Angular community also has an extensive network of third-party tools and libraries.

\n\n \n
\n\n\n" }