Setting up an express, typescript and pug web app (With a postgres DB in docker)

 Hi!, welcome to a new post, this time I will be showing you how I set up a new personal project using TypeScript, Express, Pug, Postgresql and a bit of docker.

Postgres db in docker

This part is very simple, is just a docker-compose.yml with a configuration for a postgres container, setting an user, password and db name. The "volumes" are for data persistence, is a folder in your real machine that will store the postgres container data, in this case is just a folder in the root of your project. 

 And create a file called ormconfig.json and write this:

{ 

 "type": "postgres", 

 "host": "localhost", 

 "port": "5432", 

 "username": "test", 

 "password": "development", 

 "database": "testDb", 

 "syncronize": true, 

 "logging": true, 

 "logger": "file", 

 "entities": ["src/orm/models/**/*.ts"], 

 "migrations": ["src/orm/migrations/**/*.ts"] 

}

TS, Express & Pug project

First we need to install some dependencies:

``npm i express pg pug typeorm``

``npm i -D @types/express @types/node @types/pug eslint ts-node typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser``

We have express as our http server, pug as our template engine, typeorm as our ORM and pg are the drivers for the postgres data base, the other packages are just for configuration and typescript stuff.

Now in your package.json search and replace the with the following:

"main": "dist/index.js",


"scripts": { 

    "lint": "eslint . --ext .ts", 

    "build": "tsc", 

    "start": "pnpm lint && pnpm build && node ." 

}, 

 

 Now in the root of your project create a folder structure like this one:

Inside ./src/api will be all the REST endpoints and inside of ./src/web will be all the related to pug views and the web app in general. Inside ./src/views will be the .pug views.

First, the ./src/index.ts

As you can see it is a simple express server that import the index.ts from /web and /api and creates a connection to postgres.

Now we need to setup the web part of the project, in the ./views/index.pug write this:

html
  head
    title= title
  body
    h1= message

 

And in ./src/web/index.ts :

 
import Router from 'express'

const router = Router()

router.get('/', (req, res) => {
    res.render('index', {title: 'A title', message: 'A message'})
})

export default router

 

And finally the REST api ./src/api/index.ts :

import Router from 'express'

const router = Router()

router.get('/', (req, res) => {
    const example = {
        message: 'Hello',
        message2: 'World!'
    }
    res.json(example)
})

export default router

 

Before running the server you need to run the docker container with compose ``docker-compose up``


Now you can try to run the server with ``npm start``and check localhost:9000 for the pug template output and localhost:9000/api for the REST api.

  

If you have any question you can check my discord server (https://discord.gg/ZAa8buptpm)