Deploying a TypeScript Application on VPS: A Step-by-Step Guide from A to Z

Deploying a TypeScript Application on VPS: A Step-by-Step Guide from A to Z

Developing in TypeScript is a modern standard for creating reliable and scalable web applications. However, after writing the code, the question arises: how to properly deploy it on a real server? In this article, we will cover the complete deployment cycle of a TypeScript application on a VPS (Virtual Private Server). You will learn how to set up the environment, compile TypeScript into JavaScript, organize auto-start using PM2, and configure a reverse proxy through Nginx. The material is intended for developers who already have a basic understanding of TypeScript and Linux.

1. Preparing the VPS and Installing Necessary Software

The first step is preparing the server. We will use Ubuntu 22.04 LTS, as it is one of the most stable and popular operating systems for VPS. Connect to the server via SSH:

ssh root@your-server-ip

Update the package manager and install Node.js (recommended LTS version) along with the npm package manager:

apt update && apt upgrade -y\ncurl -fsSL https://deb.nodesource.com/setup_20.x | bash -\napt install -y nodejs git nginx

Verify the installation:

node -v   # v20.x.x\nnpm -v    # 10.x.x

Now, install TypeScript and PM2 (a process manager for Node.js) globally:

npm install -g typescript pm2

Important: TypeScript is compiled into JavaScript, so it is not necessary to have TypeScript itself in the runtime on the server — it is enough to compile the code locally or on the server before running. However, a global installation of ts-node can be useful for debugging.

2. Compiling TypeScript and Configuring package.json

Assume your application has the following structure:

my-ts-app/\n├── src/\n│   ├── index.ts\n│   ├── routes.ts\n│   └── utils.ts\n├── package.json\n├── tsconfig.json\n└── .gitignore

The tsconfig.json file should be configured for a production build. Example configuration:

{\n  "compilerOptions": {\n    "target": "ES2020",\n    "module": "commonjs",\n    "outDir": "./dist",\n    "rootDir": "./src",\n    "strict": true,\n    "esModuleInterop": true,\n    "skipLibCheck": true,\n    "forceConsistentCasingInFileNames": true,\n    "resolveJsonModule": true\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules", "dist", "tests"]\n}

Add build and start scripts to package.json:

{\n  "name": "my-ts-app",\n  "version": "1.0.0",\n  "scripts": {\n    "build": "tsc",\n    "start": "node dist/index.js",\n    "dev": "ts-node src/index.ts"\n  },\n  "dependencies": {\n    "express": "^4.18.2"\n  },\n  "devDependencies": {\n    "typescript": "^5.3.3",\n    "@types/express": "^4.17.21",\n    "ts-node": "^10.9.2"\n  }\n}

Now, when you run npm run build, TypeScript compiles the files from the src folder into the dist folder. Example of a simple Express server (file src/index.ts):

import express, { Request, Response } from 'express';\n\nconst app = express();\nconst PORT = process.env.PORT || 3000;\n\napp.get('/', (req: Request, res: Response) => {\n  res.send('TypeScript application is running on VPS!');\n});\n\napp.listen(PORT, () => {\n  console.log(`Server started on port ${PORT}`);\n});

3. Cloning the Repository and Building on the Server

Copy your application to the server. The most convenient way is via Git. If your code is stored on GitHub/GitLab, run on the server:

cd /var/www\ngit clone https://github.com/your-username/my-ts-app.git\ncd my-ts-app

Install dependencies and perform the build:

npm install\nnpm run build

After this, compiled .js files will appear in the dist folder.