Intro

This document aims to describe how to get a quick setup of a cool web dev stack without using black-magick templates and reasolably understanding what you're doing.

It's, and will remain forever, a work in progress.

Create GitHub repo first

So that later yarn init discovers it by itself, saves a line of typing.

Create .gitignore

It's always good to create the .gitignore file before committing anything, so that you don't need to do extra steps to untrack stuff later.

My standard .gitignore contains:

node_modules
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

Initialize local repo

mkdir src
touch src/index.ts

git init .
git remote add origin [email protected]:user/project.git

Commit what we got so far:

git add .
git commit -m 'initialized repo'

Push to GitHub and setup tracking

git branch -M main
git push -u origin main

Install yarn globally and init project with it

sudo npm install -g yarn
yarn init
# I choose the "Unlicense" license

Commit our initialization of package.json:

git add .
git commit -m 'created package.json'

Install yarn locally

# set yarn to version 2, stable :

yarn set version berry

# **Then** set yarn to version "even more latest",
# seems weird but it is actually a pretty sensible
# way to proceed.
#
# Setting yarn to "latest" before setting
# it to "berry" would just get the latest 1.x release.

yarn set version latest

Add to .yarnrc.yml:

nodeLinker: node-modules

# This is **very important**.
#
# Without this, everything gets fucked-up,
# way too experimental even for me.
#
# It seems no current tool understands
# yarn2's Plug'n'Play resolver - that's a shame,
# it sounds actually pretty smart.
#
# With "nodeLinker: node-modules",
# yarn2 still won't need to use the network to
# recreate the "node_modules" folder when you run "yarn install",
# so we do have "Zero Install", but in a such a way
# that a good level of interoperability with other tools
# is guaranteed.

And proceed to install :

yarn install

Then commit :

git add .
git commit -m 'upgraded to latest yarn with Zero Install & nodeLinker'

Using TypeScript

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

Create a start script in package.json:

"scripts": {
  "start": "ts-node src/index.ts"
}

Test that it works:

echo "console.log('hi from TS!');\n" > src/index.ts
yarn start

If all is good, as it should be, then commit :

git add .
git ci -m 'added typescript support for node'
git push

Install fastify server for a change

I have very little experience with fastify, so don't consider this a recommendation.

But I like to get out of my old habits every once in a while and decided to give this server a go.

yarn add fastify

Replace the contents of index.ts with the most minimal server possible:

import makeFastify from 'fastify';

const fastify = makeFastify({ logger: true });

fastify.get('/', async (request, reply) => {
  return 'Hi world !';
});

const start = async () => {
  try {
    await fastify.listen(3000);
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

Try to run the server with:

yarn start

It should all be fine and if you visit http://localhost:3000 you should be greeted with a nice 'Hi world!'

If everything went fine so far, we commit:

git add .
git commit -m 'added minimalist fastify server'
git push

At this point you can debug the project with VSCode with no additional configuration.

Now for guaranteeing good code style

Now that we're ready to write tons of code, we need to lint it properly etc.

I first add the most basic of all tools, the .editorconfig. Mine is:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Commit your changes after this.

Now setup eslint for TypeScript

yarn add -D eslint @typescript-eslint/parser
yarn add -D @typescript-eslint/eslint-plugin

I like Airbnb's style guides so I do:

yarn add -D eslint-config-airbnb
yarn add -D eslint-plugin-import

# dunno if I'm gonna use React yet, but probaly, so :

yarn add -D eslint-plugin-jsx-a11y
yarn add -D eslint-plugin-react
yarn add -D eslint-plugin-react-hooks

Create .eslintrc.json with contents:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb/hooks"
  ],
  "rules": {

  }
}

Commit & push:

git add .
git commit -m 'finished base server setup in TS with eslint'
git push

Reload VSCode. Not sure if necessary.

Fix the errors in src/start.ts, yay, eslint is working !

Commit everything and start doing the project you wanted to do.

Cheers!

djfm/NodeJS-TS-Setup-May2021.md