Image for post
Image for post

Part 1. Project initial setup: TypeScript + Node.js

Node & Yarn installation

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
# follow the command ouput, restart terminal or source ~/.bashrc

As I want to use a stable node version, I install lts version:

$ nvm install --lts
# Other useful commands:
# check installation: node --version
# to change version: nvm use --lts
# to list installed versions: nvm list

Node packages can be installed globally, into the system, or locally, inside node_modules of you project folder. Always install packages required for your application locally (default). The packages can be controlled with node package manager, yarn or npm. I prefer yarn. To install it to ~/.yarn run:

$ curl -o- -L https://yarnpkg.com/install.sh | bash
# restart terminal or source ~/.bashrc

Hello World App with TypeScript

$ mkdir api-example
$ cd api-example

Create an initial package.json, the project configuration file:

$ yarn init
yarn init v1.22.4
question name (api-example):
question version (1.0.0):
question description: Backend API Example
question entry point (index.js): src/app.ts
question repository url: git@github.com:losikov/api-example.git
question author: Alex Losikov
question license (MIT):
question private:
success Saved package.json
Done in 18.95s.

Install initial dependencies (-D flag is a development dependency):

$ yarn add @types/node typescript 
$ yarn add -D ts-node

Create tsconfig.json, required for tsc and ts-node, to compile TypeScript to JavaScript:

$ yarn tsc --init --rootDir src --outDir ./bin --esModuleInterop --lib ES2019 --module commonjs --noImplicitAny true

Create your first source file in src folder:

$ mkdir src
$ echo “console.log(‘Hello World\!\!\!’)” > src/app.ts

Build the project:

$ yarn tsc

tsc, TypeScript to JavaScript compiler, is located in ./node_modules/.bin/tsc. yarn resolves the path and run it with node. The command above compiles our TypeScript to JavaScript with an ouput to ./bin folder. Now, you can run the output JavaScript file, ./bin/app.js, with node:

$ node ./bin/app.js
Hello World!!!

For development purposes, ts-node is used, to run code without a compilation. ts-node will compile it on fly:

$ yarn ts-node ./src/app.ts

As with tsc, we run ts-node with yarn to resolve it location.

Let’s add build and run scripts to package.json. Add the following section to package.json file above “dependencies”:

"scripts": {
"build": "tsc",
"start": "node ./bin/app.js",
"dev": "ts-node ./src/app.ts"
},

Now, you can run the scripts easier.

To build TypeScript to JavaScript:

$ yarn build
yarn run v1.22.4
$ tsc
Done in 1.10s.

To run compiled JavaScript:

$ yarn start
yarn run v1.22.4
$ node ./bin/app.js
Hello world!!!
Done in 0.08s.

Or just run TypeScript with a “compilation” on fly:

$ yarn dev
yarn run v1.22.4
$ ts-node ./src/app.ts
Hello world!!!
Done in 1.11s.

Note for people not familiar with Javascript/Typescript. You can consider yarn build as building a release and yarn start as running it, while yarn dev as runing a debug version. A combination of yarn build and yarn start is used for a deployment, while yarn dev for a development.

You can download the project sources from git https://github.com/losikov/api-example. Git commit history and tags are organized based on the parts.

In the next part of the tutorial, we’ll implement Hello Word App as a HTTP API server.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store