DEV Community

Guilherme Niches
Guilherme Niches

Posted on

Start and Setup a NodeJs Typescript Project

#webdev #typescript #node #beginners

Start a new project usually involves a serie of commands and not always we remember all this commands and the main dependencies that we normally use.

This article show us one of many ways to start and setup a new NodeJs Typescript project.

Before this, some fast definitions of the tools we will use:

  • NodeJs

"NodeJs is an open-source, cross-platform JavaScript runtime environment."

In other words, NodeJs allow us use Javascript in the server-side, without the need of a web browser.

  • Typescript

Typescript is a superset of JavaScript, this basically means that the Typescript adds static typing on top of JavaScript.

Note: This article assumes that you already have NodeJS and some package manager installed on your machine. If you doesn't, check this links first:

NodeJs/NPM

Yarn

Commands to start a NodeJS TS Project

  • TS/Node dependencies 
yarn add typescript ts-node ts-node-dev @types/node
Enter fullscreen mode Exit fullscreen mode

OR

npm i typescript ts-node ts-node-dev @types/node
Enter fullscreen mode Exit fullscreen mode

tsconfig.json

Create tsconfig.json (Visit https://aka.ms/tsconfig.json to read more about this file) file in the root directory of your project with the following structure:

{
  "compilerOptions": {
    /*Basic Options*/
    "target": "es2018",   /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */   
    "allowJs": true,      /* Allow javascript files to be compiled. */    
    "outDir": "./dist",   /* Redirect output structure to the directory. */
    "rootDir": "./src",   /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */  

    /* Strict Type-Checking Options */
    "strict": true,       /* Enable all strict type-checking options. */    
    "esModuleInterop": true,   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */    

    /* Advanced Options */
    "skipLibCheck": true,  /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true   /* Disallow inconsistently-cased references to the same file. */
  }
}
Enter fullscreen mode Exit fullscreen mode

According to this configuration you should write your code in src/ folder and should have an entry point file called server.ts inside.

Our project structure should be similar to this:

.
├── src
     ├── server.ts
Enter fullscreen mode Exit fullscreen mode

Inside the file server.ts we could put a simple log just to got a return when we run the server.

console.log("Server is Up");
Enter fullscreen mode Exit fullscreen mode

package.json

Add dev, dev:debug and build scripts to your package.json file, 

"scripts": {
    "dev": "ts-node-dev --respawn src/server.ts",
    "dev:debug": "ts-node-dev --inspect=0.0.0.0:9229 src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  }
Enter fullscreen mode Exit fullscreen mode

Run 

npm run dev
Enter fullscreen mode Exit fullscreen mode

OR

yarn dev
Enter fullscreen mode Exit fullscreen mode

Dev:debug 

npm run dev:debug
Enter fullscreen mode Exit fullscreen mode

OR

yarn dev:debug
Enter fullscreen mode Exit fullscreen mode

Build 

npm run build
Enter fullscreen mode Exit fullscreen mode

OR

yarn build
Enter fullscreen mode Exit fullscreen mode

Optional

These steps above are enough to start and run a NodeJS Typescript project, it's a 'clean' install. But, normally, we want start a project with some dev dependencies.

The following steps are optional and will install some dependencies commonly used with NodeJS.

npm i express --save
Enter fullscreen mode Exit fullscreen mode

OR

yarn add express -D
Enter fullscreen mode Exit fullscreen mode 
npm i sequelize --save
Enter fullscreen mode Exit fullscreen mode

OR

npm i typeorm --save
Enter fullscreen mode Exit fullscreen mode

OR

yarn add sequelize -D
Enter fullscreen mode Exit fullscreen mode

OR

yarn add typeorm -D
Enter fullscreen mode Exit fullscreen mode

Some other dependencies often used with NodeJS/Typescript project:

  • Eslint => Identify code patterns in disagreement with pre-established rules (https://eslint.org/)
  • PostgreSql or MongoDB => Relational Database and NoSql Database (MongoDb)

Extra

NPM Package

If you are writing a npm package specify main and types path and add --declaration to your build script in order to generate types suggestions to who is using your package.

package.json

"main" : "dist/index.js",
"types" : "dist/index.d.ts",
"scripts": {
    "build": "tsc --declaration"
  }
Enter fullscreen mode Exit fullscreen mode

Concluding

This is one of many ways to start and setup a new NodeJs Typescript project, you can do the same in different ways even faster. But, I like to do in this way because is more "step-by-step" form.

Reviews, suggestions and/or contributions to this article are encouraged and welcome.

References

NodeJS
Typescript

Top comments (2)

Collapse
 
diyorumarkulov profile image
Diyor Umarkulov • • Edited

when running yarn build, "tsc" does not take into account that we have path aliases and they need to be edited a little when compiling into the ".js" file and this leads to errors when running ("yarn start"), because those same aliases remain, and js simply does not understand these paths ("aliases") and leads to the error "Cannot find module ''alias-path".

How can I solve this problem?

I looked at the compiled file in the NestJS project. It turns out that NestJS, when compiling to js, ​​changes the path aliases to relative paths.
Before:
Image description
After:
Image description

How can I implement something like NestJS?

Collapse
 
Sloan, the sloth mascot
Comment deleted

Read next

endykaufman profile image

Integrating and storing the selected user language into the database in a full-stack application on "Angular" and "NestJS"

ILshat Khamitov -

fabbuilder profile image

React + Vite: The ultimate guide to static application deployment

FAB Builder | Code Generation -

emiloju profile image

Building SaaS Faster with Ercas for SaaS: A Template for Indie Hackers

Edun Rilwan -

sujans profile image

Made a whimsical theme toggle, with CSS and emojis

Sujan Sundareswaran -