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.
Top comments (0)