Application Deployment

TABLE OF CONTENT

Overview

Now our application is ready for deployment. We can deploy it on the server by using various ways like. Before this, we need to generate build package

Let’s start with Development build first,

Development Build

Execute below CLI command in the project directory on the terminal to generate development build package.

ng build

this command will default generate the build package in dist/ folder. as shown below,

ng build : Deployment

This command will compress all component code. It will generate equivalent .js bundles.

Our whole application is combined into one main.bundle.js bundle, as well other supporting bundles for polyfills, styles and inline are generated. This all files are generated in one dist folder.

Note : 

If you copy the files into a server sub-folder, append the build flag, --base-href and set the <base href="./"> or use the appropriate path from the root directory.

For example, if the index.html is on the server at /my/app/index.html, set the base href to <base href="/my/app"> like this.

ng build --base-href=/my/app/

or you can give relative path using <base href="./">

Production Build

To generate production build use below CLI command

ng build --prod

You can compare the size of both the builds, for example when I build using ng build which is the simple build, it has generated dist folder with 8 MB size, production build has generated with the size of 740KB only.

Deploy

The different ways for Deployment are :

  1. One way is you copy all the files of dist folder and directly paste into the server web apps folder.
  2. if you don’t want to direct copy then you can also generate the war by copying the files of dist folder in Web folder of Web Project, export it as war and then deploy it.
  3. or You can use Continuous Deployment tools like Jenkins for the automatic deployment.
  • Requesting services from a different server (CORS)

Angular developers may encounter a cross-origin resource sharing error when making a service request (typically a data service request) to a server other than the application’s own host server. Browsers forbid such requests unless the server permits them explicitly.

There isn’t anything the client application can do about these errors. The server must be configured to accept the application’s requests. Read about how to enable CORS for specific servers at enable-cors.org.

Summary

In this chapter, we have seen

  • How to build Development package
  • How to build Production package
  • Different ways of Application Deployment
  • Cross-Origin Resource Sharing (CORS)
Http
Pipes