TypeScript Full Stack project (Part I)
Tags: typescript, nestjs, angular
Published: 2020-01-15 09:31:34

> [Original Post](https://blog.yggdrasilts.com/typescript-full-stack-project-part-i)

Nowadays, when we want to build an application to give some service, we have to think which technological stack want to use. There are many options to select but here, we are going to talk about using [TypeScript](https://www.typescriptlang.org/) for all the platform building an [Angular](https://angular.io/) application for the client-side and using [NestJS](https://nestjs.com/) framework to build the server-side.

At this point, in the JavaScript world, all we already know [Angular](https://angular.io/) and [NestJS](https://nestjs.com/) framework has become very popular for all the developers who want to create server-side applications with JavaScript due to its greatest features to build scalable server-side [TypeScript](https://www.typescriptlang.org/) applications.

In this post, I do not want to show how to create applications using these frameworks. Rather than this, I am going to write the first of a series of posts where I want to show you one of the advantages of creating [TypeScript](https://www.typescriptlang.org/) applications for your entire platform, using [Angular](https://angular.io/) in the client-side and a [NestJS](https://nestjs.com/) on the server-side and sharing the data entities between both worlds.

## Requirements

Before to start, we are going to list all the requirements to build the project structure:

* [NodeJS](https://nodejs.org/en/)
  * I recommend you to use [nvm](https://github.com/nvm-sh/nvm), for linux or Mac, or [nvm-windows](https://github.com/coreybutler/nvm-windows) for Windows, to install the latest LTS version of NodeJS.
* [Angular CLI](https://cli.angular.io/)
* [Nest CLI](https://github.com/nestjs/nest-cli)
* [NPX](https://github.com/npm/npx)
* [Git](https://git-scm.com/)

## Project structure

I want to start talking about how to create the project folder structure to manage the client, server and the shared libraries.

First of all, I am going to create the container folder, in my case, a full stack project called **_issues_**. This folder will be a [npm](https://www.npmjs.com/) project and of course, with [git](https://git-scm.com/) initialized.

```bash
odin@asgard:~/ $ mkdir issues
odin@asgard:~/ $ cd issues
odin@asgard:~/issues $ npm init -y
odin@asgard:~/issues $ git init
```

After this, the container folder will have only the ***package.json*** and ***.git*** folder.

```bash
issues
  ├── .git
  └── package.json
```

Now, I am going to modify the ***package.json*** file to get the properties that I want.

```json
{
  "name": "issues",
  "version": "1.0.0",
  "description": "Sample of full stack project.",
  "keywords": [
      "angular",
      "nestjs",
      "typescript"
  ],
  "author": "David López <davidlopez.david@gmail.com>",
  "license": "MIT"
}
```

Also, I like to create the _.gitignore_ file to manage the files not to be uploaded to git. For this purpose, I am going to use the [gitignore.io](https://www.gitignore.io/) with _node_, _angular_ and _visulastudiocode_ templates but you are free to create, or not, this file as you want.

```bash
odin@asgard:~/issues $ curl https://www.gitignore.io/api/node,angular,visualstudiocode -o .gitignore
```

Once all created, we commit all the changes and we start to create the rest of the structure: the ***client***, ***server*** and ***shared-libs*** folders.

```bash
odin@asgard:~/issues $ git add .
odin@asgard:~/issues $ git commit -m "Full Stack project structure created" 
```

****

In the next post I will explain how to create the client-side part.