Forem: filoscoder

TEN Stack: Typescript-Express-Node template (Updated 2022)

filoscoder — Sun, 07 Aug 2022 18:16:00 +0000

Overview

TEN stack is a Typescript + Express + Node starter kit to develop REST API server app.
Nothing new under the sun, just a straight forward combo to make server development a little bit faster. This template is perfect for anyone who is starting on the server-side world based on Node.js

This template comes with:

Class-based OOP architecture with DI & DAO (scalable)
Equipped for TDD with Jest
Everything strictly typed with Typescript
ES6 features/modules
ES7 async / await
Global error handling architecture with templates (ApiError, TimeOutError, ValidationError, etc)
Request validation as custom middleware with Express-validator
Blazing fast logging with Express-Pinno-Logger
Run with Nodemon for automatic reload & watch
ESLint for code linting
Code formatting using Prettier
Configuration management using dotenv
Improved commits with Husky(v8) - pre-commit & pre-push
Manage production app process with PM2
CI/CD workflows with Github Actions
Editable Github Pull requests & Issue templates

Prerequisites

Node.js (>= 16.x)
Yarn or NPM

Install

Fork or Use this template repository.
Clone the forked repository.
Install the dependencies with yarn or npm.

Make sure you already have node.js and npm or yarn installed in your system.

Set your git remote add origin path

 git remote add origin ${forked-and-cloned-path}

Update the url if you already have an origin

Config

Copy .env.example a file at the root of the application.
Add or modify specific variables and update it according to your need.

 cp .env.example .env

Check the config folder to customize your settings (/src/config)

Alias @

To make paths clean and ease to access @ is setup up for /src path

// BEFORE
import config from './config';
import routes from './routes';

// NOW
import config from '@/config';
import routes from '@/routes';

You can customize this setup:
/tsconfig.json > compilerOptions.baseUrl & compilerOptions.paths

Local Development

Run the server locally. It will be run with Nodemon and ready to serve on port 8080 (unless you specify it on your .env)

 yarn start # or npm start

Check package.json to see more "scripts"

Continuous Integration & Continuous Deploy (CI/CD)

The workflows are under the .github folder
CI will be triggered on every PR update
CD will be triggered when specified branches got pushed (ex. main , develop)

If need more info about the setting, check this article

Production

First, build the application.

 yarn build # or npm run build

Then, use pm2 to start the application as a service.

 yarn service:start # or npm run service:start

Contribution

Check the source here
Please feel free to open an issue or a pull request to suggest changes or additions.

TEN Stack: Typescript-Express-Node template (Updated 2022)

filoscoder — Tue, 17 Aug 2021 11:13:00 +0000

Overview

TEN stack is a Typescript + Express + Node starter kit to develop REST API server apps.
Nothing new under the sun, just a straight forward combo to make server development a little bit faster. This template is perfect for anyone who is starting on the server-side world based on Node.js

This template comes with:

Class-based OOP architecture with DI & DAO (scalable)
Equipped for TDD with Jest
Everything strictly typed with Typescript
ES6 features/modules
ES7 async / await
Global error handling architecture with templates (ApiError, TimeOutError, ValidationError, etc)
Request validation as custom middleware with Express-validator
Blazing fast logging with Express-Pinno-Logger
Run with Nodemon for automatic reload & watch
ESLint for code linting
Code formatting using Prettier
Configuration management using dotenv
Improved commits with Husky(v8) - pre-commit & pre-push
Manage production app process with PM2
CI/CD workflows with Github Actions

Prerequisites

Node.js (>= 16.0.0)
Yarn or NPM

Install

Fork or Use this template repository.
Clone the forked repository.
Install the dependencies with yarn or npm.

Make sure you already have node.js and npm or yarn installed in your system.

Set your git remote add origin path

 git remote add origin ${forked-and-cloned-path}

Update the url if you already have an origin

Config

Copy .env.example a file at the root of the application.
Add or modify specific variables and update it according to your need.

 cp .env.example .env

Check the config folder to customize your settings (/src/config)

Alias @

To make paths clean and ease to access @ is setup up for /src path

// BEFORE
import config from './config';
import routes from './routes';

// NOW
import config from '@/config';
import routes from '@/routes';

You can customize this setup:
/tsconfig.json > compilerOptions.baseUrl & compilerOptions.paths

Local Development

Run the server locally. It will be run with Nodemon and ready to serve on port 8080 (unless you specify it on your .env)

 yarn start # or npm start

Check package.json to see more "scripts"

Continuous Integration & Continuous Deploy (CI/CD)

The workflows are under the .github folder
CI will be triggered on every PR update
CD will be triggered when specified branches got pushed (ex. main , develop)

If need more info about the setting, check this article

Production

First, build the application.

 yarn build # or npm run build

Then, use pm2 to start the application as a service.

 yarn service:start # or npm run service:start

Contribution

Check the source here
Please feel free to open an issue or a pull request to suggest changes or additions.

🅳🆁🆈-🅾🅽-🆁🅴🅰🅲🆃 🎉

filoscoder — Fri, 11 Jun 2021 09:39:11 +0000

🅳🆁🆈-🅾🅽-🆁🅴🅰🅲🆃 🎉

Hi, I've just opened a public space to build up a useful collection of helper functions for ordinary and concurrent daily problems.

I'm a freelance Software Engineer, my stack is Javascript & React. After some time working on different projects, I found myself facing the same problems and solving them with the same pattern. This is a repository for saving valuable time and stay as DRY as possible while working.

This open-source has his goal on stay as 🄳🅁🅈 (Don't Repeat Yourself) as possible.

Example 1: phoneMask

How many times do I have to write a function to mask/format a mobile phone number input????

This is how I implemented 👇

// Parameter> $inputValue: string
// Output> "xxx-xxxx-xxxx"
export const phoneMask = (inputValue = "") =>
  inputValue
    .replace(/\D/g, "")
    .replace(/(\d{1,3})(\d{1,4})?(\d{1,4})?/g, function (_, a, b, c) {
      return c ? `${a}-${b}-${c}` : b ? `${a}-${b}` : `${a}`;
    });

Example 2: useInputs

How do you handle user input changes on React? Still using the obvious useState?
I write a custom hook to handle user input changes trying to be clean on implement and effective at the same time.

This is how I implemented it👇 (Typescript + React hooks)

import React, { useCallback, useReducer } from "react";

type DefaultValues = {
  [key: string]: string;
};
type UseInputsAction = {
  name: string;
  value: string;
};

function reducer<T>(state: T, action: UseInputsAction | null) {
  if (!action) {
    const initialState: any = {};
    Object.keys(state).forEach((key) => {
      initialState[key] = "";
    });

    return initialState;
  }

  return {
    ...state,
    [action.name]: action.value,
  };
}

export default function useInputs<T>(defaultValues: DefaultValues) {
  const [state, dispatch] = useReducer(reducer, defaultValues);
  const onChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
      dispatch({
        name: e.target.name,
        value: e.target.value,
      });
    },
    []
  );
  const onReset = useCallback(() => {
    dispatch(null);
  }, []);

  return [state, dispatch, onChange, onReset] as [
    T,
    typeof dispatch,
    typeof onChange,
    typeof onReset
  ];
}

/*

# Usage
import { useInputs } from "./dry";

.
.
.
// React component
const [form, onChange] = useInputs<MyFormType>({
    email: '',
    password: '',
});
.
.
.
// Render => Form JSX
<form>
  <input 
    type="email"
    name="email"
    value={form.email}
    onChange={onChange}
  />
  <input
    type="password"
    name="password"
    value={form.password}
    onChange={onChange}
  />
</form>

*/

Forem: filoscoder

TEN Stack: Typescript-Express-Node template (Updated 2022)

Overview

Prerequisites

Install

Config

Alias @

Local Development

Continuous Integration & Continuous Deploy (CI/CD)

Production

Contribution

TEN Stack: Typescript-Express-Node template (Updated 2022)

Overview

Prerequisites

Install

Config

Alias @

Local Development

Continuous Integration & Continuous Deploy (CI/CD)

Production

Contribution

🅳🆁🆈-🅾🅽-🆁🅴🅰🅲🆃 🎉

Example 1: phoneMask

Example 2: useInputs

SAME CODE to solve SAME PROBLEMS?

Contribute your grain of code👇