DEV Community: János K.

Setting Up a Modern Express API with TypeScript, Jest, ESLint, Prettier - Quick guide 2025

János K. — Sat, 17 May 2025 11:42:22 +0000

Building a backend API in Node.js? Setting up the project can be a bit of a slog - and enough to put you off before you even start building that next-gen social media app.

I couldn't help but wonder: where are the quick, modern guides to spinning up a well-structured Express API?

There aren’t many. So I made one.

Let’s get straight to it.

🛠 1. Initialise your project
npm init -y

This sets up your package.json, which manages your dependencies, scripts, and project metadata. The -y flag accepts all the default values so you can move on quickly.

📦 2. Install Express and dev dependencies
npm install express
npm install --save-dev typescript supertest nodemon jest ts-jest ts-node @types/jest @types/supertest @types/express

What these do:

express: Your HTTP server framework.
typescript: For strongly typed JS.
supertest: For testing your API endpoints.
jest, ts-jest: Testing framework and TypeScript preprocessor.
nodemon: Restarts the server on changes.
ts-node: Runs TypeScript files directly.
@types/...: Adds type support for testing and Express.

🧠 3. Configure TypeScript
npx tsc --init

Now replace your generated tsconfig.json with:

{
  "exclude": [
    "./coverage",
    "./dist",
    "**/*.test.ts",
    "jest.config.js",
    "eslint.config.mjs"
  ],
  "ts-node": {
    "transpileOnly": true,
    "files": true
  },
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "moduleResolution": "node",
    "checkJs": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true
  }
}

The linter may freak out, until you create your first .ts file, which we will do now. ;)

🧱 4. Create your Express app
Here's the directory structure for our app:

mkdir -p src/routes && touch src/app.ts src/app.test.ts src/server.ts src/routes/user.routes.ts src/routes/user.routes.test.ts

src/
├── app.ts
├── app.test.ts
├── server.ts
└── routes/
        └── user.routes.ts
        └── user.routes.test.ts

src/server.ts

import app from './app';

const PORT: number = 5050;

app.listen(PORT, (): void => {
  // eslint-disable-next-line no-console
  console.log(`Server is running on ${PORT}...`);
});

src/app.ts

import express, { Application, Request, Response} from 'express';
import { router as userRoutes } from './routes/user.routes';

const app: Application = express();

app.use('/users', userRoutes);

app.use('/', (req: Request, res: Response): void => {
  res.json({ message: "Miley, what's good?" });
})

export default app;

src/routes/user.routes.ts

import { Router, Request, Response } from 'express';

const router = Router();

router.get('/', (req: Request, res: Response): void => {
  const users = ['Nicki', 'Ariana', 'Lana', 'Miley'];
  res.status(200).send(users);
});

export { router };

🧪 5. Set up testing
npx ts-jest config:init

Replace the generated jest.config.js's contents with:

export const preset = 'ts-jest'
export const testEnvironment = 'node'

This sets up Jest to use the TypeScript compiler.

🧷 6. Add some tests

src/app.test.ts

import request from 'supertest';
import app from './app';

describe('Test app.ts', () => {
  test('Is alive route', async () => {
    const res = await request(app).get('/');
    expect(res.body).toEqual({ message: "Miley, what's good?" });
  });
});

src/routes/user.routes.test.ts

import request from 'supertest';
import app from '../app';

describe('User routes', () => {
  test('Get all users', async () => {
    const res = await request(app).get('/users');
    expect(res.body).toEqual(['Nicki', 'Ariana', 'Lana', 'Miley']);
  });
});

⚙️ 7. Update package.json scripts
Update the scripts section:

"scripts": {
  "test": "jest --coverage",
  "dev": "nodemon ./src/server.ts",
  "build": "tsc",
  "lint": "eslint src/**/*.ts",
  "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
}

(Don't worry about the lint scripts for now, we will set this up in the following step.)

While you're at it, remove "type":"module" from package.json.

Give this a go: npm run test

🧹 8. Set up ESLint + Prettier

npm install -D eslint @eslint/js @types/eslint__js typescript-eslint eslint-plugin-prettier eslint-config-prettier

Now create the ESLint config file touch eslint.config.mjs:

import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import eslintPluginPrettier from 'eslint-plugin-prettier'
import prettier from 'eslint-config-prettier'

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.ts'],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: './tsconfig.eslint.json',
        sourceType: 'module',
      },
    },
    plugins: {
      prettier: eslintPluginPrettier,
    },
    rules: {
      'no-unused-vars': 'error',
      'no-undef': 'off',
      'prefer-const': 'error',
      'no-console': 'warn',
      'no-debugger': 'warn',
      'prettier/prettier': [
        'error',
        {
          singleQuote: true,
          semi: true,
          trailingComma: 'all',
          printWidth: 100,
          tabWidth: 2,
        },
      ],
    },
  },
  prettier,
  {
    ignores: ['dist/**', 'node_modules/**', 'coverage/**'],
  },
]

Let's also add TypeScript config for ESLint

Create a touch tsconfig.eslint.json:

{
  "extends": "./tsconfig.json",
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "dist"]
}

You now have:

A strongly typed Express API 💪

Tests with Jest + Supertest 🧪

Auto formatting & linting with ESLint + Prettier ✨

You’re all set to build something real - without battling the boilerplate every time.

Thank you, please like and subscribe! 💾
Voilà! If you enjoy this content, please consider supporting my efforts. Your generosity fuels more of what you love! 🩷

I'm János, I write about Software, coding, and technology.
Checkout my portfolio

SSL Certificates for FREE—nginx AWS Route 53

János K. — Sun, 01 Sep 2024 10:14:27 +0000

In this post, I want to write about creating an SSL certificate for your AWS EC2 instance. Checkout my previous post on how to deploy your app to an EC2 instance and setting up a continuous deployment pipeline using GitHub actions. Deploy React App to EC2 using GitHub Actions.

Topics covered in this article: nginx, AWS Route 53, Elastic IPs, Let's Encrypt

Setting up Elastic IPs
Hosted zones
Certificates

Setting up Elastic IPs

We are going to set up an elastic IP to and associate it with our EC2 instance. This means consistency for us which is important when it comes to setting up DNS records. Even if you turn off your instance it will remain static. Very demure.

Check out the docs on Elastic IPs including pricing!
AWS Elastic IP

Go to AWS EC2 dashboard, in the sidebar click on Elastic IPs

Big orange button alert — Allocate Elastic IP address
Leave everything on the default settings (or customise it to your liking)
Allocate
Highlight the EIP you just created and select Actions then Associate Elastic IPs
Click on the Instance button and the Instance you created

Amazing work so far! You now should be able to access your EC2 instance via the elastic IP. Remember it is still http in the URL. COPY YOUR ELASTIC IP TO YOUR CLIPBOARD, WE WILL NEED IT SOON.

Hosted zones

These steps assume you purchased your domain on AWS.
If your domain is on a 3rd party provider consider looking at other
articles on how to update records to point them to the Elastic IPs. Then come back here!

Search for Route 53 in AWS
Click on hosted zones in your dashboard
Select the hosted zone of your domain — if you can see your domain and its hosted zone then open it and skip to step 5.
Big orange button alert — Create hosted zone
Fill in your domain name and click Create Type should be Public hosted zone
Big orange button alert — Create record -> Simple routing -> Next
Define simple record - we will define multiple records so don't be hasty to click on create records
Select Routes traffic to an IPv4 address and some AWS resources
Paste your elastic IP in the input (Value/Route traffic to) — phew!
Define simple record
DON'T CLICK CREATE YET
Define another simple record. We need that sweet www 🤓 Like this:

The final product:

Big orange button alert — Create Records

Optional: Please note if you delete and create a new hosted zone, then you must update the name servers in Route 53. Go to Registered Domains -> your-domain.com -> Edit name servers. You can copy the name servers from the records in hosted zones. It may take 24 hours to propagate these changes.

You should now be able to view your site live. Remember, it is still http:// only. If you get an error, just remove the s from https.

Certificates

Now's the fun part! I mean this is what brings me joy, I don't know about you though.
This is the part where we will edit the nginx config file so that it will be aware of our domain name's existence. Certbot will inject the SSL related configurations automatically later on. We will make use of Let's encrypt to provide us a free SSL certificate.

Connect to your EC2 instance via the terminal
In the terminal cd /etc/nginx/sites-available/
Then sudo cp default backupdefault — quick backup, you never know! 🤭
To edit the config file, type in sudo nano default
Scroll to this part:
Type in your domain like below:
server_name your-domain.com www.your-domain.com;
Your config file should like this:

Exit, remember to write your changes aka save!
Test the config file sudo nginx -t => you should see test successful
IMPORTANT run sudo service nginx restart as this ensures the new config settings are loaded

Let's encrypt 🔒 — getting that sweet https 🍭

Run the following commands

sudo snap install core; sudo snap refresh core — installs Snap package manager so that we can install Certbot
sudo apt remove certbot — remove existing Certbot just in case and to avoid any conflicts
sudo snap install --classic certbot — classic is what we need
sudo ln -s /snap/bin/certbot /usr/bin/certbot — this ensures that Certbot command is accessible from anywhere on the system
sudo systemctl reload nginx — reload nginx again for the last time

Obtaining Free SSL Certificate

run sudo certbot --nginx -d your-domain.com -d www.your-domain.com Replace your-domain with your-domain 🤭 Here you can add multiple subdomains as well just add the -d flag.
It will ask for your email address for renewals
Read the Terms Of Service and agree if you'd like to proceed
Next, it will ask about marketing campaigns; this is optional
You should see a success message at the end

Run this if you want auto SSL renewal (bet you do) sudo systemctl status snap.certbot.renew.service You should see this message:

Check if the renewal process works by running: sudo certbot renew --dry-run

Thank you, please like and subscribe! 💾
Voilà! If you enjoy this content, please consider supporting my efforts. Your generosity fuels more of what you love! 🩷

I'm János, I write about Software, coding, and technology.
Checkout my portfolio

Setting up a React project using Vite + TypeScript + Vitest

János K. — Fri, 19 Apr 2024 18:39:55 +0000

This is a quick step-by-step tutorial designed to guide you through setting up the project. While I strive to provide detailed explanations, feel free to skip ahead and simply follow each step; you should still achieve the desired results.

Set up React Project with Vite

npm create vite <project-title>
Select React -> TypeScript .
Run npm install and npm run dev to start a local development server.

Setting up Vitest

Vitest test runner is optimised for Vite-powered projects.

npm install -D vitest
npm install -D @testing-library/react @testing-library/jest-dom jsdom
First package, @testing-library/react, is for component testing, second, @testing-library/jest-dom, is for DOM assertions, and lastly, jsdom, is for simulating a browser environment in Node for testing purposes.
Update vite.config.ts to include testing configurations

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
  },
});

Changes we made:

Added type definitions at the beginning of the file
globals: true means global variables will be available during tests like 'describe, it, expect' so we don't have to import it in every test file
Specified 'jsdom' as the test environment, simulating a browser environment
Defined 'setupFiles' to execute necessary code before running the tests. This is a perfect segue to create setupTests.ts.

Create setupTests.ts

Create setupTests.ts in the src directory
Paste this into setupTests.ts

import * as matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

expect.extend(matchers);

Here, we bring Jest's DOM matchers into Vite, making testing feel more familiar and easier for users familiar with Jest.

Add "test": "vitest" to package.json

This will allow you to run your tests using npm test.
Onto, to our first test!

Writing our first test

Let's create a new file called App.test.tsx in the src folder.
Here's a passing test for you to get started:

import { screen, render } from "@testing-library/react";
import App from "./App";

describe("App tests", () => {
  it("should render the title", () => {
    render(<App />);

    expect(
      screen.getByRole("heading", {
        level: 1,
      })
    ).toHaveTextContent("Vite + React");
  });
});

But oh wait! It's all red!

The tests will pass, we just need to tell TypeScript to include type definitions for Vitest global variables and Jest DOM matchers.

Add "types": ["vitest/globals", "@testing-library/jest-dom"], to tsconfig.json in the compilerOptions.

Voilà! If you enjoy this content, please consider supporting my efforts. Your generosity fuels more of what you love! 🩷

I'm János, I write about Software, coding, and technology.
Checkout my portfolio. 💾

Deploy React App to EC2 using GitHub Actions—a love story

János K. — Wed, 14 Feb 2024 19:38:21 +0000

As my fingers danced on they keyboard the other week, I felt each line of code was destined to be hosted on an EC2 instance.
I couldn't help but wonder, why companies love AWS so much? This is a tale of a modern romance between code and cloud. Think of it as a step by step guide to deploy a Vite React app using the unsung hero of our love story: GitHub Actions.

1. Create a Vite app and the GitHub repository

npm create vite@latest <project name>

It will ask you a few questions about your project. Select React -> JavaScript.

We can start to see the difference between create-react-app and Vite already. Remember to run npm i to install all dependencies and git init to initialise your local repo. Hook this up with your remote repository, but remember to commit first! 💍
And just like that, we say goodbye to create-react-app, our former flame.

2. Create an EC2 Instance on AWS
Next up is more fun! Let's create an EC2 instance, which is short for Elastic Compute; it is very flexible for our needs. AWS has a bunch of services that make this deployment easier like Elastic Beanstalk, but we are going to choose the rocky road because let's face it—it's just so much cooler.

Log in to your AWS console and click on the search bar and type in EC2 to search for this service
Look for a big orange button called Launch Instance

Leave everything on the default settings except the following:

Give your instance a name; this could be your app's name for example
Select Ubuntu as OS
Remember to double check the prices, AWS gives you free months though which is helpful in this economy
Create a new keypair using its default settings and save it to your desktop or somewhere safe and accessible
Tick both allow HTTP/HTTPS tick boxes like on the image below:
Launch instance!

3.SSH into our virtual machine
This is the hacky part of the love story. We are finally logging into our virtual machine on the cloud.

Go back the EC2 Instance Dashboard.

Click on the instance ID
Click connect and then select SSH client
Follow the steps in your terminal: you're looking for 2 commands: chmod 400 "yourkey.pem" and copy the example command. Remember your terminal should be in the directory where you kept your key file! Never share this file with anyone!
Let's run sudo apt-get update to install the latest updates
Install nginx by running sudo apt-get install nginx

Pro tip: Don't cd anywhere at this point! Your terminal will be in /home/ubuntu/. The folder called ubuntu is the user's folder which doesn't require admin rights like sudo when running commands to install GitHub Actions.

Nginx is a web server software that will serve the production version of our app.

4. Set up GitHub Actions
GitHub Actions is a godsend. We will set up a self-hosted runner which will run workflows and jobs on our EC2 instance.

Go to your repository settings
Select runners
Click on 'new self hosted runner'
Remember to select Linux because our EC2 instance runs on Linux!

The next steps will install GitHub actions runner on our virtual machine:

Copy and paste commands one by one from GitHub into our EC2 instance (except the last one ./run.sh!) If you run the last command, just press Control + C to stop the process.

Keep pressing enter to set the default settings when it prompts you.

We should see something like this:

Instead of the last command ./run.sh, we will install the runner as a service to listen for jobs in the background:

sudo ./svc.sh install
sudo ./svc.sh start

Once this is done, you should refresh the GitHub page after a few minutes and check the self hosted runner is idle. Sometimes, it helps if you click on runners, and actions a few times before this comes up!

5. Set up the workflow in the repository
In this step, we are going to set up the workflow; a bit like teaching EC2 how we operate.

Click on Actions (next to the Pull requests button) and add a new workflow
Let's search for a Node workflow and select configure

This will create a new folder and a file in your project .github/workflows/node.js.yml!

In this .yml file:

I removed the pull request job
I updated runs-on: self-hosted This means that the job will run on our EC2 instance as we set up earlier instead on a throw away like instance that GitHub provides.
I updated the node version to node-version: [20.x]
I removed the test command at the very end
I added 2 important jobs:

Clean up the /var/www/html/ folder. Nginx creates these folders and uses them serve our static files. We will remove the default files.

- name: Clear contents of /var/www/html
  run: sudo rm -rf /var/www/html/*

Copy the production files from /home/ubuntu... to /var/www/html

- name: Copy dist folder to /var/www/html
  run: sudo cp -r dist/* /var/www/html

Just replace it with mine here:

name: Node.js CI

on:
  push:
    branches: [ "main" ]

jobs:
  build:

    runs-on: self-hosted

    strategy:
      matrix:
        node-version: [20.x]

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - name: Clear contents of /var/www/html
      run: sudo rm -rf /var/www/html/*
    - name: Copy dist folder to /var/www/html
      run: sudo cp -r dist/* /var/www/html

Commit this file by clicking on the top right corner button which will trigger the workflow and nginx will serve the production version of the app.

Click on the Actions tab again to watch magic happen!

Remember to git pull in your local repository as we committed the new workflow file to avoid divergent branches! After all, The love story shouldn't end on divergent branches. 💔

To check out the hosted app by going to the EC2 instance details. Look for Public IPv4 DNS and click on the link, but wait! Like all good things, it's wrapped in a layer of HTTPS we haven't quite set up yet. Fear not! Simply remove the 'S' from HTTPS in the URL, and voilà!

The URL should look something like: http://ec2-35-177-142-238.eu-west-2.compute.amazonaws.com/.

And just like that, our Vite app and EC2 are bound together. Whenever you push on main, the workflow kicks into action, redeploying our app to the world.

This story isn't over, in the next chapter we will discover HTTPS and SSL certificates.
Check it out here: SSL certificates

Thank you, please like and subscribe! 💾
Voilà! If you enjoy this content, please consider supporting my efforts. Your generosity fuels more of what you love! 🩷

I'm János, I write about Software, coding, and technology.
Checkout my portfolio

Cover photo by: Alexander Sinn

DEV Community: János K.

Setting Up a Modern Express API with TypeScript, Jest, ESLint, Prettier - Quick guide 2025

SSL Certificates for FREE—nginx AWS Route 53

Table of Contents

Setting up Elastic IPs

Hosted zones

Certificates

Setting up a React project using Vite + TypeScript + Vitest

Set up React Project with Vite

Setting up Vitest

Create setupTests.ts

Writing our first test

Deploy React App to EC2 using GitHub Actions—a love story