3 minute read

The baseline project

This project will be a full-stack web application starter written in Typescript. I plan to build it as I write tutorials explaining each step. Lets start by initializing the project:

Init project

From the folder you keep your projects in, create a new directory called baseline (or whatever you’d like to name your project):

$ mkdir baseline && cd baseline

Now, initialize a new Node project with Yarn:

$ yarn init -y

The -y flag auto-populates the newly generated package.json file in your project directory.

package.json

package.json is a manifest file that defines a Node project.

Open your code editor to your new project directory and edit package.json:

// package.json

{
  "name": "baseline",
  "version": "0.0.0",
  "main": "dist/index.js",
  "author": "Jon Webb",
  "license": "MIT",
  "scripts": {
    "dev": "NODE_ENV=development nodemon",
    "build": "rimraf dist && tsc",
    "start": "NODE_ENV=production node ."
  }
}
  • name: baseline is the name of my project.
  • version: 0.0.0, we don’t have any published versions.
  • main: dist/index.js, the entrypoint for our compiled application.
  • author: Go ahead and put your name here.
  • license: MIT, this is an open-source project.
  • scripts: Yarn scripts for bootstrapping our application.

For more details on the package.json file, check the documentation from NPM.

nodemon.json

nodemon is a convenient tool that will watch for any changes in our source folders and restart our application automatically.

Install it, along with ts-node (a Typescript executor), as development dependencies:

$ yarn add -D nodemon ts-node

nodemon looks for a file called nodemon.json for configuration, so let’s create that file in the project root:

$ touch nodemon.json
// nodemon.json

{
  "watch": ["src"],
  "ext": ".ts",
  "exec": "ts-node ./src/index.ts"
}
  • watch: nodemon will watch the src folder for changes.
  • ext: nodemon will restart when we change a file with the .ts extension.
  • exec: nodemon will execute ./src/index.ts with ts-node when it loads.

For more configuration options, check the nodemon documentation.

tsconfig.json

Install typescript as a development dependency, as well as the type declarations for node, and rimraf (a tool for deleting folders):

$ yarn add -D typescript @types/node rimraf

typescript is configured through a tsconfig.json file, so let’s create that file in the project root:

$ touch tsconfig.json
// tsconfig.json

{
  "compilerOptions": {
    "lib": ["esnext"],
    "target": "es2020",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["node"]
  },
  "include": ["src"]
}
  • outDir: we will be compiling our source code to the dist folder.
  • rootDir: our source code lives in the src folder.
  • types: we want to use node typings since this is a node project.
  • include: typescript will only statically analyze code in the src folder.

For detailed documentation on tsconfig, check the documentation.

.gitignore

Let’s go ahead and set up our .gitignore file so we can commit our code to source control. Specifically, we want to exclude the node_modules folder (where our project dependencies are installed) and the dist folder (where our code is compiled) from source control.

Create .gitignore:

$ touch .gitignore

And add node_modules and dist to the file:

# .gitignore

node_modules
dist

Now initialize a git repository:

$ git init

Start coding

That’s all we need to start programming in typescript! Our source files should go in the src folder, per our configuration. Let’s create it, along with the main entrypoint file:

$ mkdir src && touch src/index.ts

Let’s write an extremely simple program in src/index.ts:

// src/index.ts

const msg = "Hello World!";

console.log(msg);

Running yarn run dev should start nodemon and output Hello World! to the console.

Now try editing and saving src/index.ts:

// src/index.ts

const msg = "Hello World (from Node with Typescript)!";

console.log(msg);

Saving should cause nodemon to execute your new code, outputting Hello World (from Node with Typescript)! to the console.

To build your code for production, run yarn run build. This command should create a new folder named dist with a single file, index.js. This is your src/index.ts file, compiled from typescript to plain Javascript.

To execute it, run yarn run start. You should see Hello World (from Node with Typescript)! output to the console before the program exits.

Commit

Go ahead and stage your changes:

$ git add .

And commit them to source control:

$ git commit