Skip to content

Done

Jump to bottom
Guilherme Guedes da Luz edited this page Jun 25, 2020 · 10 revisions

Done

Technologies that I learned enough to integrate into the project.

Contents

NodeJS and npm

Node.js is an open-source, cross-platform, JavaScript runtime environment. It executes JavaScript code outside of a browser.

NodeJS is your runtime, npm your package manager.

Setup

You can download NodeJS here.
NodeJS comes with npm.

Using NodeJS and npm

You can run these commands in the command line:
npm init - Initializes a node project by creating a package.json file in the current folder.
npm install - Adds dependencies to the package.json file and install them at the node_modules folder.
node index.js - Runs the index.js file in NodeJS.

The package.json file is where your project settings are, you can create custom Node commands by editing the scripts part.

Yarn

Yarn is a package manager that doubles down as project manager. Whether you work on one-shot projects or large monorepos, as a hobbyist or an enterprise user, we've got you covered.

Well, I just think Yarn is easier to use than npm.

Setup

Open Windows PowerShell as Admin and run Get-ExecutionPolicy, if it returns Restricted, run Set-ExecutionPolicy RemoteSigned.
Now you can run npm install yarn -g to install Yarn globally.

Using Yarn

Yarn commands:
yarn init - Creates the package.json file.
yarn add - Adds dependencies to the project.
yarn - Followed by the name of a script from your packge.json file to run it.
yarn add -D- You can use the flag -D to install as devDependencies.
yarn global add - Will install a package globally, global must follow yarn

If you ever use npm in your project by accident, just delete the package-lock.json file and run yarn on the root folder

Git and GitHub

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git is the ultimate version control tool for your source code. GitHub is used to host your repository online. GitHub desktop is the fastest and easiest way to use Git and GitHub together.

Setup

Git can be downloaded here.
GitHub Desktop can be downloaded here

Using Git

.gitignore is a file that you can create in the root folder of your project that tells Git the files that should be ignored.

git init - Initializes a git repository locally.
git add . - Stores snapshot temporary in the index.
git commit - Permanently stores index contents.
git log - Logs commits.

git branch feature/name - Creates a branch named feature/name.
git checkout feature/name - Switches to the branch named feature/name.
git merge feature/name - Merges the branch named feature/name to the master.
git branch -D feature/name - Deletes the branch named feature/name.

git remote add origin {github repo url} - Syncs to your GitHub repo.
git push -u origin master - Pushes master branch to GitHub.
git pull origin master - Pulls from GitHub to the master branch.

GitHub Desktop

GitHub desktop is so easy to use, just log in and start committing.

How I learned

Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Fast, unopinionated, minimalist web framework for node. Meaning, real fast and easy way to make web applications.

Setup

Run yarn add express to install it.

How to use it

This is a basic code that makes your app listen on port 3000 and send the message 'Hello World' to the route /

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Best tool for NodeJS, changes your coding for better, looks like OOP 😆.

Setup

yarn global add typescript - First you have to install typescript globally.
yarn add typescript -D - Then install typescript locally as a development dependency.

Using TypeScript

NodeJS can't understand TypeScript, that's why we need to use a tool to convert TypeScript into JavaScript.

I'll demonstrate two ways of doing it:

ts-node-dev + tsc

ts-node-dev - Executes your TypeScript code and restarts at every update.
tsc - Converts the TypeScrit code to JavaScript to the specified folder.

Install ts-node-dev by running yarn add ts-node-dev -D

Add this line to your packge.json file.

  "scripts": {
    "dev": "ts-node-dev --respawn --transpileOnly --ignore-watch node_modules --no--notify src/server.ts"
  },

Now you can run yarn dev to start your project. It restarts automatically.

Run yarn tsc --init to init a tsconfig.json file. (Only works with typescript installed globally)
Change these lines to be like this in the tsconfig.json file

{
    "compilerOptions": {
      "target": "es2017",
      "lib": ["es6"],
      "outDir": "./build",
      "rootDir": "./src",
      "removeComments": true,
      "baseUrl": "./",
      "paths": {
        "@controllers": ["./src/controllers/*"],
        "@models": ["./src/models/*"]
      }, 
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true
    }
}

You can convert your code to javascript just by running yarn tsc and the files will be in the build folder.

sucrase + nodemon

Sucrase doesn't support decorators @ (Like the ones in TypeORM)

yarn add sucrase nodemon -D - Installs sucrase and nodemon as a devDependencies.

Create a nodemon.json file for configurations.

{
  "watch": ["src"],
  "ext": "ts",
  "execMap": {
    "ts:": "sucrase-node src/server.ts"
  }
}

Alter package.json

"scripts": {
  "dev": "nodemon src/server.ts",
  "build": "sucrase ./src -d ./dist --transforms typescript,imports"
},

yarn dev - Runs app. yarn buid - Builds app.

Types

You need to install the "types" of your dependencies so typescript can understand what you're doing.

yarn add @types/express -D - Install the types of express as a development dependency.

How I learned


ESLint

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

ESLint fixes TypeScript code errors.

Setup

Run yarn add eslint -D to install eslint as a development dependency.
Run yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D to install the parser and the plugin for TypeScript.

To initialize run yarn eslint --init and configure it.

Respond the following questions:

How would you like to use ESLint? To check syntax, find problems, and enforce code style

What type of modules does your project use? JavaScript modules (import/export)

Which framework does your project use? None of these

Does your project use TypeScript? Yes

Where does your code run? Node

How would you like to define a style for your project? Use a popular style guide

Which style guide do you want to follow? standard

What format do you want your config file to be in? JSON

Now it'll ask you if you want to install a bunch of dependencies with npm, select no, copy all the dependencies, write yarn add , paste the dependencies, add -D to the end, remove eslint from the dependencies.

Now open your vsCode preferences {{ Ctrl - Shift + P ==>> preferences: open settings (json) }}

Add the following lines

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
]

Remember to have the ESLint extension installed on VSCode
All done, now TypeScript is running with ESLint 👌

How I learned


dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.+

Basically dotenv's purpose is for you to be able to use environment variables inside your code.
This environment variables are saved in a file at the project root folder caller .env.

Setup

Run yarn add dotenv to install the package.

Using dotenv

Start by creating a file named .env at the project's root folder.

This is an example:

PORT=3333

DB_USER=pguser
DB_PASSWORD=*#X%!pC4WKD63%6$

To use it, you'll need to call it as soon as possible within your project

require('dotenv').config()

If needed you could create more than one file and call the one you want based on the environment

require('dotenv').config({
  path: process.env.NODE_ENV === 'test' ? '.env.test' : '.env.dev'
})

If you're using import, dotenv recommends that you use preload.

Edit your package.json file, add --require dotenv/config to your start script:

"scripts": {
  "server:dev": "ts-node-dev --require dotenv/config --respawn --transpileOnly src/server.ts",
  "server:devOld": "ts-node-dev --respawn --transpileOnly src/server.ts",
}

The require of dotenv is done in the script --require dotenv/config, now you can call process.env from anywhere.

You also can call the .env file of your choice by adding dotenv_config_path=.env to your script:

{
  "scripts":{
    "server:dev": "ts-node-dev --require dotenv/config --respawn --transpileOnly src/server.ts dotenv_config_path=.env",
  }
}

Remember to always put your .env files inside .gitignore
You can create a file named .env.example with only the variable names and put it in your github.

How I learned

Clone this wiki locally