Skip to content

Server-Side Functionality with Node.js and Express

Video Lecture

Server-Side Functionality with Node.js and Express Server-Side Functionality with Node.js and Express Server-Side Functionality with Node.js and Express

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 setup 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
{
    "compilerOptions": {
        "target": "ES2019",
        "module": "commonjs",
        "outDir": "../../dist/server",
        "esModuleInterop": 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