Try it: Deployment
Try it: Deployment
Whether you came here directly from Part 1, or completed the entire online store application through the In-app navigation, Manage data, and Forms for user input sections, you have an application that you can deploy by following the instructions in this section.
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.
- In your StackBlitz project, make sure you have forked or saved your project.
- In the preview page, you should see a URL that looks like
- Share this URL with a friend or colleague.
- Users that visit your URL will see a development server start up, and then your application will load.
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, use the Angular Console to serve the application, or install
Node.js and serve your app with the Angular CLI.
From the terminal, install the Angular CLI globally with:
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.
Create a new Angular CLI workspace using the ng new command:
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.
ng build --prod
This will produce the files that you need to deploy.
If the above
ng buildcommand throws an error about missing packages, append the missing dependencies in your local project's
package.jsonfile to match the one in the downloaded StackBlitz project.
Hosting the built project
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).
Hosting an Angular app on Firebase
One of the easiest ways to get your site live is to host it using Firebase.
- Sign up for a firebase account on Firebase.
- Create a new project, giving it any name you like.
- Add the
@angular/fireschematics that will handle your deployment using
ng add @angular/fire.
- Connect your CLI to your Firebase account and initialize the connection to your project using
- Follow the prompts to select the
Firebaseproject you are creating for hosting.
- Select the
Hostingoption on the first prompt.
- Select the project you previously created on Firebase.
dist/my-project-nameas the public directory.
- Select the
- Deploy your application with
- Once deployed, visit https://your-firebase-project-name.firebaseapp.com to see it live!
Hosting an Angular app anywhere else
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 and Deployment guides.
Join the Angular community
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 offers an extensive library of Material Design components.
- Angular Protractor offers an end-to-end testing framework for Angular apps.
- Angular also has an extensive network of 3rd-party tools and libraries.
Keep current by following the Angular blog.
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.