Deployment #

To perform a production deployment, there is no single method, as each developer may have their own preferences. The following is a method you can follow that is a good starting point.

Prerequisites #

When you create your application for the first time, it is recommended to do it from the command line:

aoc-cli n a --name app-template

This command will create a directory called app-template (you can use any name you want) and inside it will will copy the template we have made: aoc-app-template. In addition, you will preconfigure aspects such as the connection data to your PostgreSQL database.

It is advisable to use a local PostgreSQL database for your development. Likewise, you must have a production PostgreSQL database. You can install PostgreSQL by using the packages provided by your Linux distribution, a Docker image official, or a managed cloud service.

Manual Compilation For Production #

If you are using a deployment with Docker (explained below), you will not need to compile manually. However, the manual compilation process is detailed below.

Client Build #

npm run build:production 

This command runs ng build with the production configuration, specified in the angular.json file.

It is possible to specify additional configurations in angular.json and create angular.json files in src/environments, such as src/environments/environment.my_configuration.ts, by setting file replacements (fileReplacements). In such a case, you can create a scripts entry in the package.json as follows:

{
  "scripts": {
    "build:my_configuration": "ng build --configuration=production,my_configuration"
  }
}

More information on this can be found in the Angular cli reference.

When the compilation is complete, you will find the compiled code in the dist directory.

Server Compilation #

npm run build

This tsc command to compile Typescript code into JavaScript. You may want to adjust the configuration of tsconfig.json or tsconfig.prod.json according to your needs.

When compilation is complete, you will find the compiled code in the dist directory.

Running In Production #

In order for the Node.js server running Express to be able to serve the Angular client, you will need to copy (or create a link) to the contents of the dist directory. the contents of the dist directory of the client build to the dist directory of the server build. Then when you start the server with node dist/index.js you should be able to access your application at http://localhost:3000 (as opposed to http://localhost:3000 which is the http://localhost:3000 directory). http://localhost:4200` which is the address used during development).

Deploying With Docker #

In this section we will detail the deployment using Docker and Docker compose and on a Linux server, for all the advantages this brings.

If you are using Docker to deploy to production, you do not need to do any manual builds or runs.

You can follow the official installation instructions.

If you have created the application with aoc-cli, you will also have the Dockerfile and docker-compose.yml files already preconfigured available.

• The file Dockerfile defines the image to be created, it uses a node-alpine image as a base to compile both the client and the server.
• The docker-compose.yml file defines the container(s) to run.

It is quite likely that you will need to adapt some configurations for production, for this you have several options:

• Define another environment in the aoc-server-config.json file (remember that this file is usually part of your git repository).
• Define an overwrite in the aoc-server-secrets.json file (this file is in .gitignore)
• Or lastly, use "AOC_" environment variables.

In most cases it is usually most convenient to use "AOC_" environment variables, but you can also combine it with the other strategies if you need to.

In the docker-compose.yml file, you can either define to use a different environment defined in aoc-server-config.json (AOC_CONFIG_ENV=my_environment), or directly override properties of the environment (e.g.: AOC_postgres_host):

    environment:
      # - AOC_CONFIG_ENV= # The config key from aoc-server-config.json that will be used, "base" otherwise.
      # And/or override specific config values
      # - AOC_postgres_host=postgresql
      # - AOC_postgres_port=5432
      # - AOC_postgres_password=my_password
      - NODE_ENV=production
      - TZ=Europe/Madrid # Adapt according to your needs

You can (re)create your image with the commands docker build --no-cache, and docker-compose up to start the container.

See the Docker documentation to learn more.

Reverse Proxy #

The Node.js server exposes port 3000 for HTTP connection, but in production it is recommended to have a reverse proxy that handles HTTP connections and exposes port 443 (HTTPS) to the outside, communicating with Node.js through port 3000.

The Docker image Swag is a good candidate for this. It allows you to configure a container to get an SSL certificate and configure it automatically for you.

Here we provide an nginx configuration similar to what you might need to use:

server {
    listen 80;
    server_name my-server.com;

    # redirect HTTP to HTTPS
    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name my-server.com;

    include /config/nginx/ssl.conf;

    location / {
        proxy_pass http://app-template:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        # Optional: For better security
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }
}

Extra #

Internationalization #

The internationalization parameters can be configured in the i18n section of the angular.json file. By default, U.S. English is used (in other words, the source strings have been written in English).

If you want to use other languages, you will need to adjust your reverse proxy configuration. You can find more information in the official Angular documentation.

Other Containers #

You may want to add containers to your stack to perform other tasks, such as logging or connection pool tasks. pgbouncer.