Whether you came here directly from Your First App, or completed the entire online store application through the Routing, Managing Data, and Forms 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.
To build your application locally or for production, you will need to download the source code from your StackBlitz project. Click 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 you install
Node.js and have the Angular CLI installed.
From the terminal, install the Angular CLI globally with:
npm install -g @angular/cli
This will install the command
ng into your system, which is the command you use to create new workspaces, new projects, serve your application during development, or produce builds that can be shared or distributed.
Create a new Angular CLI workspace using the
ng new command:
ng new my-project-name
From there you 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.
The files in the
dist/my-project-name folder are static and can be hosted on any web server capable of serving files (
Node.js, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others).
One of the easiest ways to get your site live is to host it using Firebase.
firebase-toolsCLI that will handle your deployment using
npm install -g firebase-tools.
Firebaseproject you are creating for hosting.
Hostingoption on the first prompt.
dist/my-project-nameas the public directory.
firebase deploy, because the command
firebase inithas created a
firebase.jsonfile that tells Firebase how to serve your app.
To host an Angular app on another web host, you'll need to 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. Learn more about development and distribution of your application in the Building & Serving and Deployment guides.
Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities:
Keep current by following the Angular blog.
© 2010–2019 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.