Skip to content

Create Socket.IO Boilerplate

Video Lecture

Create Socket.IO Boilerplate Create Socket.IO Boilerplate

 (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

Over the next few lessons, we will set up the course boilerplate.

Start by creating a folder on your system named Socket.IO-TypeScript-Boilerplate,

mkdir Socket.IO-TypeScript-Boilerplate

Now change directory into it,

cd Socket.IO-TypeScript-Boilerplate

And open the new folder in VSCode.

code .

Now continue to create the folder structure as shown below,

|-- Socket.IO-TypeScript-Boilerplate
    |-- dist
        |-- client
        |-- server
    |-- src
        |-- client
        |-- server

./package.json

Create a new file in the project root named ./package.json, and copy the code below into it,

1
2
3
4
5
{
  "name": "socket.io-typescript-boilerplate",
  "version": "1.0.0",
  "license": "MIT"
}

./.prettierrc

As an extra optional tool to help us format our code, we can use Prettier in the VSCode IDE.

Add a file named .prettierrc to your project root folder, copy-paste the script below and save.

1
2
3
4
5
6
7
8
9
{
  "printWidth": 90,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true
}

And then in VSCode, open the extensions tab and install the "Prettier - Code formatter".

Now, after typing any code, you can then press the key combination Shift Alt F to neatly reformat the code depending on your prettier settings.