docs: edit getting started start-deployment.md (#40135)
PR Close #40135
This commit is contained in:
Kapunahele Wong
atscott
parent
957332e59f
commit
087784aba1
|
|
@ -1,50 +1,61 @@
|
|||
# Deploying an application
|
||||
|
||||
Deploying your application is the process of compiling, or building, your code and hosting the JavaScript, CSS, and HTML on a web server.
|
||||
|
||||
To deploy your application, you have to compile it, and then host the JavaScript, CSS, and HTML on a web server. Built Angular applications are very portable and can live in any environment or served by any technology, such as Node, Java, .NET, PHP, and many others.
|
||||
This section builds on the previous steps in the [Getting Started](start "Try it: A basic application") tutorial and shows you how to deploy your application.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
## Prerequisites
|
||||
|
||||
Whether you came here directly from [Part 1](start "Try it: A basic app"), or completed the entire online store application through the [In-app navigation](start/start-routing "Try it: In-app navigation"), [Manage data](start/start-data "Try it: Manage data"), and [Forms for user input](start/start-forms "Try it: Forms for user input") sections, you have an application that you can deploy by following the instructions in this section.
|
||||
|
||||
</div>
|
||||
|
||||
## Share your application
|
||||
|
||||
StackBlitz projects are public by default, allowing you to share your Angular app via the project URL. Keep in mind that this is a great way to share ideas and prototypes, but it is not intended for production hosting.
|
||||
|
||||
1. In your StackBlitz project, make sure you have forked or saved your project.
|
||||
1. In the preview page, you should see a URL that looks like `https://<Project ID>.stackblitz.io`.
|
||||
1. Share this URL with a friend or colleague.
|
||||
1. Users that visit your URL will see a development server start up, and then your application will load.
|
||||
|
||||
## Building locally
|
||||
|
||||
To build your application locally or for production, 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.
|
||||
|
||||
Once you have the source code downloaded and unzipped, install `Node.js` and serve your app with the Angular CLI.
|
||||
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:
|
||||
|
||||
* [Node.js](https://nodejs.org/en/).
|
||||
* The [Angular CLI](https://cli.angular.io/).
|
||||
From the terminal, install the Angular CLI globally with:
|
||||
|
||||
```sh
|
||||
npm install -g @angular/cli
|
||||
```
|
||||
|
||||
This installs the command `ng` on your system, which is the command you use to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.
|
||||
With the Angular CLI, you can use the command `ng` to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.
|
||||
|
||||
Create a new Angular CLI workspace using the [`ng new`](cli/new "CLI ng new command reference") command:
|
||||
## Running your application locally
|
||||
|
||||
1. 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.
|
||||
|
||||
1. Create a new Angular CLI workspace using the [`ng new`](cli/new "CLI ng new command reference") command, where `my-project-name` is what you would like to call your project:
|
||||
|
||||
```sh
|
||||
ng new my-project-name
|
||||
```
|
||||
|
||||
In your new CLI generated app, replace the `/src` folder with the one from your `StackBlitz` download, and then perform a build.
|
||||
1. In your newly CLI-generated application, replace the `/src` folder with the `/src` folder from your `StackBlitz` download.
|
||||
|
||||
1. Use the following CLI command to run your application locally:
|
||||
|
||||
```sh
|
||||
ng serve
|
||||
```
|
||||
|
||||
1. To see your application in the browser, go to http://localhost:4200/.
|
||||
If the default port 4200 is not available, you can specify another port with the port flag as in the following example:
|
||||
|
||||
```sh
|
||||
ng serve --port 4201
|
||||
```
|
||||
|
||||
While serving your application, you can edit your code and see the changes update automatically in the browser.
|
||||
To stop the `ng serve` command, press `Ctrl`+`c`.
|
||||
|
||||
{@a building}
|
||||
## Building and hosting your application
|
||||
|
||||
1. To build your application for production, use the `build` command with the `prod` flag.
|
||||
|
||||
```sh
|
||||
ng build --prod
|
||||
```
|
||||
|
||||
This will produce the files that you need to deploy.
|
||||
This command creates a `dist` folder in the application root directory with all the files that a hosting service needs for serving your application.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
|
@ -52,41 +63,34 @@ If the above `ng build` command throws an error about missing packages, append t
|
|||
|
||||
</div>
|
||||
|
||||
#### Hosting the built project
|
||||
1. Copy the contents of the `dist/my-project-name` folder to your web server.
|
||||
Because 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](https://firebase.google.com/docs/hosting), [Google Cloud](https://cloud.google.com/solutions/web-hosting), or [App Engine](https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website).
|
||||
For more information, see [Building & Serving](guide/build "Building and Serving Angular Apps") and [Deployment](guide/deployment "Deployment guide").
|
||||
|
||||
The files in the `dist/my-project-name` folder are static. This means 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).
|
||||
<hr />
|
||||
|
||||
### Hosting an Angular app on Firebase
|
||||
## What's next
|
||||
|
||||
One of the easiest ways to get your site live is to host it using Firebase.
|
||||
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.
|
||||
You can go deeper by studying more of Angular's features, engaging with the vibrant community, and exploring the robust ecosystem.
|
||||
|
||||
1. Sign up for a firebase account on [Firebase](https://firebase.google.com/ "Firebase web site").
|
||||
1. Create a new project, giving it any name you like.
|
||||
1. Add the `@angular/fire` schematics that will handle your deployment using `ng add @angular/fire`.
|
||||
1. Install [Firebase CLI](https://firebase.google.com/docs/cli) globally using `npm install -g firebase-tools`.
|
||||
1. Connect your CLI to your Firebase account and initialize the connection to your project using `firebase login` and `firebase init`.
|
||||
1. Follow the prompts to select the `Firebase` project you are creating for hosting.
|
||||
- Select the `Hosting` option on the first prompt.
|
||||
- Select the project you previously created on Firebase.
|
||||
- Select `dist/my-project-name` as the public directory.
|
||||
1. Deploy your application with `ng deploy`.
|
||||
1. Once deployed, visit https://your-firebase-project-name.firebaseapp.com to see it live!
|
||||
### Learning more Angular
|
||||
|
||||
### Hosting an Angular app anywhere else
|
||||
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](tutorial).
|
||||
|
||||
To host an Angular app on another web host, upload or send the files to the host.
|
||||
Because you are building a single page application, you'll also need to make sure you redirect any invalid URLs to your `index.html` file.
|
||||
Read more about development and distribution of your application in the [Building & Serving](guide/build "Building and Serving Angular Apps") and [Deployment](guide/deployment "Deployment guide") guides.
|
||||
To explore Angular's foundational concepts, see the guides in the Main Concepts section such as [Angular Components Overview](guide/component-overview) or [Template syntax](guide/template-syntax).
|
||||
|
||||
## Join the Angular community
|
||||
### Joining the community
|
||||
|
||||
You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this get-started exercise, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form").
|
||||
|
||||
Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities:
|
||||
|
||||
* Angular provides advanced capabilities for mobile apps, animation, internationalization, server-side rendering, and more.
|
||||
* [Angular Material](https://material.angular.io/ "Angular Material web site") offers an extensive library of Material Design components.
|
||||
* [Angular Protractor](https://protractor.angular.io/ "Angular Protractor web site") offers an end-to-end testing framework for Angular apps.
|
||||
* Angular also has an extensive [network of 3rd-party tools and libraries](resources "Angular resources list").
|
||||
[Tweet that you've completed this tutorial](https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you think, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form").
|
||||
|
||||
Keep current by following the [Angular blog](https://blog.angular.io/ "Angular blog").
|
||||
|
||||
### Exploring the Angular ecosystem
|
||||
|
||||
To support your UX/UI development, see [Angular Material](https://material.angular.io/ "Angular Material web site").
|
||||
|
||||
To test your Angular applications, see [Angular Protractor](https://protractor.angular.io/ "Angular Protractor web site").
|
||||
|
||||
The Angular community also has an extensive [network of third-party tools and libraries](resources "Angular resources list").
|
||||
|
|
|
|||
Loading…
Reference in New Issue