TypeScript Full Stack project (Part I)
TypeScript Full Stack

TypeScript Full Stack project (Part I)

An advantage to use TypeScript for your entire platform

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

Node.js
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

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

https://cli.angular.io/

Nest CLI

nestjs/nest-cli
CLI tool for Nest applications 🍹 . Contribute to nestjs/nest-cli development by creating an account on GitHub.

NPX

npm/npx
npm package executor. Contribute to npm/npx development by creating an account on GitHub.

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 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.

TypeScript Full Stack project (Part II) - Client-side
Creating a simple angular application used in the client-side to show the advantages to use TypeScript for your entire project stack.

Also, you can see all the post series here:

TypeScript Full Stack
TypeScript for all your platform building an Angular application for the client-side and using NestJS framework to build the server-side.

Share Tweet Send
0 Comments
Loading...
You've successfully subscribed to YggdrasilTS
Great! Next, complete checkout for full access to YggdrasilTS
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.