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

#angular #typescript

Original Post

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.