DEV Community

Ibrahim Joseph M.
Ibrahim Joseph M.

Posted on

How to setup your Typescript server in three steps

In three simple steps, I will show you how to set up your server.

Steps

  1. Create a folder called 'typescript-server'
  2. Create src folder inside 'typescript-server' and create index.ts file.
  3. cd into the typescript-server folder and initialize your project by running;

Before we go on please add the following code we will be testing on into the index.ts file

console.log("Hello, Dev.to");
Enter fullscreen mode Exit fullscreen mode

So that anytime we run our code we will be seeing some output on the console.

npm init -y

Enter fullscreen mode Exit fullscreen mode

the above code will create a package.json file that will hold all your dependencies for the project.

  1. install the needed dependencies:
yarn add -D @types/node

yarn add -D typescript

yarn add -D ts-node

yarn add -D nodemon

Enter fullscreen mode Exit fullscreen mode

or you install all of them once

yarn add -D @types/node typescript ts-node nodemon
Enter fullscreen mode Exit fullscreen mode
  1. Create the ts config by running;
npx tsconfig.json
Enter fullscreen mode Exit fullscreen mode

at the terminal, some options will pop up asking you to select which platform are you using, select node.

  1. open your package.json file and add the following code under the script tag
"watch": "tsc -w",
Enter fullscreen mode Exit fullscreen mode

then your package.json will look like this

{
  "name": "lireddit-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -w",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

Enter fullscreen mode Exit fullscreen mode

to test if what we have done so far is correct, now run the app with yarn watch. Note, you must have npm, and yarn install in your system to avoid any complexity.

To use the Installed nodemon

you need to add another line onto your script section in the package.json file. Now add the follow to your package.json file;

"dev": "nodemon dist/index.js",
Enter fullscreen mode Exit fullscreen mode

I know you will be wondering where do we have the dist/index.js from, don't worry about it. when you run the yarn watch, it compiles and generates a dist/index.js file.

For us to have all the different ways of running our project, I will just go ahead and add all the run scripts for you. after adding all the run script, this is how your package.json will look like now.

{
  "name": "lireddit-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -w",
    "dev": "nodemon dist/index.js",
    "devIn": "nodemon --exec ts-node src/index.ts",
    "start": "node dist/index.js",
    "startIn": "ts-node src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

Enter fullscreen mode Exit fullscreen mode

You can now run your app using the following commands;

yarn watch

yarn dev

yarn devIn

yarn start

yarn startIn
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this little piece of my typescript set up!

Top comments (0)