TypeScript Full Stack project (Part I)

Original Post

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 for all the platform building an Angular application for the client-side and using NestJS framework to build the server-side.

At this point, in the JavaScript world, all we already know Angular and NestJS 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 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 applications for your entire platform, using Angular in the client-side and a NestJS 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
  • I recommend you to use nvm, for linux or Mac, or nvm-windows for Windows, to install the latest LTS version of NodeJS.
• Angular CLI
• Nest CLI
• NPX
• Git

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 project and of course, with git initialized.

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.

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

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

{
  "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 with node, angular and visulastudiocode templates but you are free to create, or not, this file as you want.

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.

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.