Skip to content

Server-Side Functionality with Node.js and Express

Tip

This course has been updated. For the newer content, please visit Install Nginx

Video Lecture

Server-Side Functionality with Node.js and Express

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

If you want to incorporate server side functionality in your application, you have the option to use Node.js and Express.

My official boilerplate branches of Ballgame and SocketIO both require server side functionality to work. They both use Socket.io and the Ballgame branch also demonstrates server side physics using Cannon.

./src/server/server.ts

To set up a bare minimum Node.js/Express web server that we can later add more advanced server side functionality to, copy this code below into a new typescript file at ./src/server/server.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import express from 'express'
import path from 'path'
import http from 'http'

const port: number = 3000

class App {
  private server: http.Server
  private port: number

  constructor(port: number) {
    this.port = port
    const app = express()
    app.use(express.static(path.join(__dirname, '../client')))
    // This server.ts is only useful if you are running this on a production server or you
    // want to see how the production version of bundle.js works
    //
    // to use this server.ts
    // # npm run build        (this creates the production version of bundle.js and places it in ./dist/client/)
    // # tsc -p ./src/server  (this compiles ./src/server/server.ts into ./dist/server/server.js)
    // # npm start            (this starts node.js with express and serves the ./dist/client folder)
    //
    // visit http://127.0.0.1:3000

    this.server = new http.Server(app)
  }

  public Start() {
    this.server.listen(this.port, () => {
      console.log(`Server listening on port ${this.port}.`)
    })
  }
}

new App(port).Start()

./src/server/tsconfig.json

Now create a tsconfig.json that is specific to our TypeScript Server project and save it as ./src/server/tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "outDir": "../../dist/server",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["**/*.ts"]
}

Now to install the Express package and Types

npm install express
npm install @types/express --save-dev

If your IDE is showing some errors concerning path and http then also install the Node.js types.

npm install @types/node --save-dev

Now run

tsc -p ./src/server

Note

Use

tsc.cmd -p ./src/server

in case you are using PowerShell and you get an error concerning that scripts are disabled.

The above command will generate a new script called ./dist/server/server.js. We will start this file using Node.js.

./package.json

Open ./package.json and then add the highlighted line below to the scripts node.

1
2
3
4
5
6
7
8
9
{
...
  "scripts": {
    "build": "webpack --config ./src/client/webpack.prod.js",
    "start": "node ./dist/server/server.js",
    "dev": "webpack serve --config ./src/client/webpack.dev.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

Now run

npm start

Now visit http://127.0.0.1:3000 in your browser.

Note

Note that we only used npm start and not npm run start. The run option is not necessary. npm start is an alias for npm run start. You can use the longer version if you prefer.

Other aliases you may see used occasionally are,

npm test

npm restart

npm stop