DEV Community

David (ダビッド ) for YggdrasilTS

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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

issues    
  ├── client    
  ├── .git    
  ├── .gitignore    
  └── package.json
Enter fullscreen mode Exit fullscreen mode

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"    
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode

Now we are able to start the angular application:

odin@asgard:~/issues $ npm run start:ui
Enter fullscreen mode Exit fullscreen mode

http//blogyggdrasiltscom/content/images/2019/11/image1png

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"
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)