DEV Community: faridz974

Setting up a Typescript Node App

faridz974 — Tue, 07 Nov 2023 18:29:58 +0000

Setting up a Node project feels like a daunting task? Well, fear not! Our friend Matt Pocock has got you covered with a fantastic article that walks you through the process.

Matt's article is incredibly straightforward, making it a great starting point. However, you might feel that it lacks some essential features like code formatting, linting, and unit testing. Don't worry; we've got you covered! Let's dive in and add these crucial components to your Node project.

Pre-requisites

Before we dive into the nitty-gritty details, let's set some prerequisites in place. First up, let's add a git-hook to catch those pesky commit errors. We'll be using Husky for this purpose. Follow these simple steps to get started:

Check out the Husky getting started guide. Next, we'll introduce lint-staged into the mix. Execute the following commands:

npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"

In a nutshell, these commands set up Husky and lint-staged for your project, ensuring that your code stays in tip-top shape.

Formatting

Now, let's tackle code formatting. We've chosen prettier as the default option, although dprint is also a viable alternative. Add the following lines to your package.json:

{
  "scripts": {
    "format": "prettier . --write--ignore-unknown"
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

If you wish to configure Prettier further, you can create a .prettierrc.js file with your desired settings, and don't forget to add a .prettierignore file to exclude specific directories like node_modules.

.prettierrc.js

/** @type {import("prettier").Config} */
const config = {
    trailingComma: 'es5',
    tabWidth: 4,
    semi: false,
    singleQuote: true,
}
export default config

.prettierignore

node_modules

Linting

Let's move on to setting up ESlint for your project. With ESLint, you have the flexibility to customize your linting rules according to your preferences. We recommend installing the following packages:

eslint-config-prettier for not conflict between them
@typescript-eslint/eslint-plugin
@typescript-eslint/parser

Here's how to configure ESLint in your package.json:

{
  "scripts": {
    "lint": "eslint ./src --fix --max-warnings 0"
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown",
    "**/*.ts": "eslint ./src --fix --max-warnings 0"
  }
}

To complete the setup, add .eslintignoreand .eslintrc.cjs files. These files ensure that ESLint doesn't interfere with your project's essential directories and that it follows the rules you've defined.

.eslintignore

node_modules
dist

.eslintrc.cjs

/* eslint-env node */
module.exports = {
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'prettier',
    ],
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    rules: {
        '@typescript-eslint/no-import-type-side-effects': 'error',
        '@typescript-eslint/consistent-type-imports': [
            'error',
            {
                fixStyle: 'inline-type-imports',
            },
        ],
    },
    root: true,
}

A special rule, that I have added is to handle the import type (more information on my previous post)

Unit testing

Last but not least, let's talk about unit testing. Our recommended choice is vitest, which has become increasingly popular lately. To integrate vitest into your project, simply run:

You can simply add the package

npm install -D vitest

Then create a simple configuration file vitest.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vitest/config'

export default defineConfig({
    test: {
        coverage: {
            all: true,
            include: ['src'],
            reporter: ['html', 'json'],
            provider: 'v8',
        },
    },
})

Visual Studio Code Integration

Do you love the convenience of IDE integration, where your code automatically gets polished as soon as you save your work? If you're using Visual Studio Code (VSCode), we've got some handy settings to supercharge your development experience. Just add the following lines to your .vscode/settings.json file:

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.sortMembers": true,
        "source.fixAll.eslint": true,
        "source.organizeImports": true
    },
    "editor.bracketPairColorization.enabled": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.guides.bracketPairs": true,
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.preferences.importModuleSpecifier": "relative",
    "workbench.tree.indent": 15,
    "workbench.tree.renderIndentGuides": "always",
    "workbench.colorCustomizations": {
        "tree.indentGuidesStroke": "#fc03ad"
    }
}

With this configuration in place, you're in for a treat:

Eslint and code formatting will automatically work their magic as you save your files, ensuring that your code remains clean and error-free.
Your imports will be sorted and organized neatly, making your codebase more maintainable. VSCode will use the TypeScript version installed in your project's node_modules directory, eliminating version conflicts and ensuring consistency.
The Bracket Pair Colorizeration will add a splash of color to your code by highlighting matching brackets. You can customize the colors to your heart's content.
With workbench you can add grouping for your folders/files tree

These settings are designed to enhance your coding experience and keep your project in tip-top shape. So, unleash the full power of VSCode and watch your development workflow become even more efficient.

And that's it! With these steps, your Node project is equipped with essential tools for code formatting, linting, and unit testing. Enjoy the benefits of a well-structured and robust codebase. Happy coding! 🚀

Auto import with type

faridz974 — Tue, 09 Aug 2022 06:29:45 +0000

In version 3.8, Typescript enabled a new syntax for type-only import.
This enables to erase of the import at runtime.

For example:

import type { SQSEvent, SQSHandler } from 'aws-lambda';

By default, Visual Studio Code import without type

To enable import with type, you need to add the following to your tsconfig.json

{
    "compilerOptions": {
        "importsNotUsedAsValues": "error",
    },
}

Now, Visual Studio Code import with type

Sharing Typescript code between AWS Lambda with AWS SAM CLI

faridz974 — Fri, 08 Jul 2022 03:55:53 +0000

Introduction

Recently, Amazon has released a beta version of AWS SAM CLI with the support of Typescript.
The sample works well when you have a simple use case.
Now, imagine that you want to have multiple AWS Lambda in your repository and have to share your code.
The goal of this post is to continue using SAM CLI to build and deploy your Typescript code.

Default configuration

By default, you can notice that the CodeUri property is referencing only your function folder.

HelloWorldFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: hello-world/
      Handler: app.lambdaHandler
      Runtime: nodejs16.x

and your code is like the following:

import type { APIGatewayProxyEvent, APIGatewayProxyResult } from 'aws-lambda';
import { helloWorld } from '../shared/hello';

export const lambdaHandler = async (event: APIGatewayProxyEvent): Promise<APIGatewayProxyResult> => {
    return {
        statusCode: 200,
        body: JSON.stringify({
            message: helloWorld,
        }),
    };
};

When you'll try to build with an import that is not part of the current directory you'll get the following error:

Build Failed
Error: NodejsNpmEsbuildBuilder:EsbuildBundle - Esbuild Failed: ✘ [ERROR] Could not resolve "../shared/hello"

app.ts:2:27:
2 │ import { helloWorld } from '../shared/hello';

Custom configuration

You need to change the CodeUri property to a folder that contains all the source files that you want to share.

  HelloWorldFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: .
      Handler: app.lambdaHandler

Thanks to this configuration you can now share your code between multiple AWS Lambda.

By default, AWS SAM CLI is using bundling, tree shaking, and minification so the code that is not called in your AWS Lambda will not be deployed.

You can look at the code directly on this sample: https://github.com/faridz974/sam-typescript

Conclusion

AWS SAM CLI with the support of Typescript is still in Beta. If you want more advanced features maybe you should not use it.
Lately, in version 1.49.0 External and Loader properties have been added.
If you want to share your feedback and/or requests this issue has been created.