TypeScript Full Stack project (Part II) - Client-side
TypeScript Full Stack

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.

TypeScript Full Stack project (Part I)
An advantage to use TypeScript for your entire platform

In the previous post, I told about the project structure. Now, we are going to create the client-side.


Client-Side

Let's go to create the Angular application using its CLI and the following options:

  • name: issues-ui. Because the angular application will be the client-side project.
  • directory: client. I want a container folder different as the client-side project name.
  • enableIvy: true. I want to use Angular Ivy for compilation.
  • routing: true. The project will have routing to manage the page flow.
  • style: scss. And finally, I prefer to use scss to manage styles.
odin@asgard:~/issues $ ng new issues-ui --directory=client --enableIvy=true --routing=true --style=scss

The new folder structure will contain a new folder client, with the angular application.

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

To start the client from the parent folder, issues, we need to modify the package.json adding a new start:ui script.

{
  ...
  "scripts": {
    "start:ui": "npm start --prefix ./client"
  },
  ...
}

Now we are able to start the angular application:

odin@asgard:~/issues $ npm run start:ui

Once all is working, we commit all the changes to save the advance.

odin@asgard:~/issues $ git add .
odin@asgard:~/issues $ git commit -m "UI working"

Because of the purpose of this post is not to build an angular application, you can get the client-side code from this repository.


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

TypeScript Full Stack project (Part III) - NestJS, the server-side
Creating a NestJS application used in the server-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.