7. Typescript Journey - Express Webserver

Series Posts

Source Code

Goal

Run a webserver that can serve up an API written in Typescript

Setup

1. Start with clean repo that contains devcontainer setup Source Code.
2. Create new branch
3. Add postStartCommand to devcontainer.json. It should look like this.

{
	"build": {"dockerfile": "Dockerfile"},
	"customizations": {
		"vscode": {
		  "extensions": [
			"dbaeumer.vscode-eslint",			
			"kakumei.ts-debug"
		]
		}
	  },	
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	 "forwardPorts": [3000],
	 "postStartCommand": "npm install"

}

1. Add install of nodemon to dockerfile

   ARG VARIANT=18-buster
   FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:${VARIANT}
   RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install git
   RUN npm install -g nodemon
   

Create Express App

1. Initialize App and accept all the defaults

   npm init
   

2. Change main to point to dist/index.js. This will be where your transcompiled typescript puts javascript file that will be served by express. Add dependencies and devDependencies to package.json Your package.json file should look like this:

   {
     "name": "typescriptjourney",
     "version": "1.0.0",
     "description": "Code Repo for Journey to learn Typescript",
     "main": "dist/index.js",
     "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
     },
     "repository": {
    "type": "git",
    "url": "git+https://github.com/two4suited/TypescriptJourney.git"
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
    "@types/express": "^4.17.14",
    "typescript": "^4.8.4"
     },
     "dependencies": {
    "express": "^4.18.2"
     },
     "bugs": {
    "url": "https://github.com/two4suited/TypescriptJourney/issues"
     },
     "homepage": "https://github.com/two4suited/TypescriptJourney#readme"
   }
   

3. Restart your dev container.
4. Create dist folder and index.ts file

   mkdir dist
   touch index.ts
   

5. Initialize Typescript. This will create a tsconfig.json which we will modify in the next step to point to the directory with the ts files and where to put the javascript files

   npx tsc --init
   

6. We will uncomment out rootDir and outDir. We will then change our outDir to point to the dist folder. Here is the complete tsconfig.json. I removed the comment out lines for space.

   {
     "compilerOptions": {   
    "target": "es2016",
    "module": "commonjs",                                
    "rootDir": "./",
    "outDir": "./dist",                                  
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "skipLibCheck": true                                 
     }
   }
   

7. Start the typesript compiler

   npx tsc --watch
   

8. Add the following code to your index.ts file to create an express webserver

import express from "express";
const app =express();

app.get("/",(req,res) => {
    res.send("Hello from your first Express app")
});

const port = process.env.PORT || 3000

app.listen(port,() => console.log(`App listening on PORT ${port}`));

1. Add start and dev sections to the package.json file under scripts

   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node dist/index.js",
    "dev": "tsc -w & nodemon dist/index.js"
     }
   

2. Run the app

   npm run dev
   

   ---

   Next we will use Express to create an API