TypeScript Web Development: NodeJS and Angular

4 Minute(s) to read

This article will discuss what is required to setup a local development environment for using TypeScript with the frontend (using a framework such as Angular), and for creating a RESTful API backend that will be launched through NodeJS.

Requirements

The following list describes the list of requirements.

Directory Structure

The following section outlines the directory structure for your development environment.

/your-website-root/bin
/your-website-root/bin/nginx
/your-website-root/bin/mongodb
/your-website-root/src
/your-website-root/src/frontend
/your-website-root/src/backend

Installation

The following section discusses the installation of the required packages listed above.


Configuration

The following section outlines the configuration files that are required for setting up a TypeScript development environment for both the frontend and backend of your web application.

NGINX

The usage of NGINX is entirely optional. For development purposes you can simply make use of Angular's development server (ng serve) for serving your static pages, and then run a separate NodeJS instance for your backend script or application that is to be written in TypeScript.

In a production environment, you would ideally want to use something that is more reliable such as NGINX. It's a production-grade HTTP server that can be used for serving content across other similarly configured NGINX instances (load balancing).

#
# Chicken For Charity NGINX Server Configuration
#
server {
  server_name chickenforcharity.local;
  listen 80;
  listen [::]:80;

  error_log ./logs/sites/chickenforcharity.local/chickenforcharity_error.log;
  access_log ./logs/sites/chickenforcharity.local/chickenforcharity_access.log;

  location / {
    root /sites/chickenforcharity.local/dist;
    try_files $uri @rewrites =404;
  }

  location @rewrites {
      rewrite ^(.+)$ /index.html last;
  }
}

The above configuration specifies that all requests made against the domain name of your website or web application will be redirected to the index.html. The intent of this is to allow for Angular to handle page loading and navigation, instead of relying on configurations in a web server like NGINX.

TypeScript

This section describes what your TypeScript transpiler configuration file should look like when you are working on the backend of your application. This is the tsconfig.json file that describes how the TypeScript code should be compiled, which paths should be included during compilation (or excluded).


Visual Studio Code

The following section outlines the configurations required for debugging both the frontend and the backend from a Visual Studio Code instance.

Frontend

The Angular framework is reliant on two set of configuration files. One that is used for compiling the TypeScript code (tsconfig.json), and the other that is used by Angular CLI for packaging and publishing compiled JS so that it is ready for serving.


Backend

For the backend, you will make use of a separate package.json (NPM) and tsconfig.json file (TypeScript) for managing dependencies for your backend, as well as debugging it at runtime.

Debugging

You launch.json configuration file should look like this. This should be used with Visual Studio Code.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "file": "${workspaceFolder}/index.html"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Debug: Backend",
            "args": ["${file}"],
            "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}/src/backend/",
            "protocol": "inspector"
        }
    ]
}

TypeScript

Your tsconfig.json file should look like this.

{
  "compilerOptions": {
    "target": "es2017",
    "allowJs": true,
    "checkJs": true,
    "module": "commonjs",
    "outDir": "./dist",
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

NPM

Your package.json file should look like this.

{
  "name": "ChickenForCharity",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.0",
    "@types/node": "^12.6.2",
    "ts-node": "^8.3.0",
    "typescript": "^3.5.2"
  },
  "dependencies": {
    "@types/express-session": "^1.15.13",
    "@types/mongodb": "^3.1.28",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "express-session": "^1.16.2",
    "mongodb": "^3.2.7",
    "request": "^2.88.0"
  }
}

The directory structure should now look like this.

 

Scripts

There are various aspects of this development environment that are cumbersome to manage. You will be required to compile the frontend when you modify the TypeScript. Additionally, you are going to want to have both the NGINX and API server running while you are waiting.

Compiling Frontend Changes

There are two methods that can be used for compiling frontend changes. If you are frequently making modifications to the frontend from Visual Studio Code, then it's likely that you will want to make use of something like ng build --watch.

Launching NGINX Server

The following section specifies the script that you can use for launching NGINX, and testing for changes made to a configuration file.

Launching API Server

Read this article if you're interested in launching the API server using Nodemon.

More information about Nodemon here.

If you are not intending on launching your API server with Nodemon, then continue reading.

Launching MongoDB Database Server

Make use of the following batch scripts for launching your MongoDB server. This script assumes that you want your database server's data to be stored in a sub-directory named "data".

 



Comments