Creating Index View And About Pages View Nest JS

Index view

The home page currently just displays a welcome message. Let’s modify the index view to improve the home page design. In views/index.hbs , make the following changes in bold. 

We define some divisions to display some images. We need to download these images and store them in our public folder. First, in public folder, create a subfolder called img. Then, download the following three images from this link https://github.com/PracticalBooks/Practical-Nest/tree/main/Chapter07/online-store/public/img and store them inside the public/img folder.

About view

Let’s create the About view. In views , create a new file called about.hbs , and fill it with the following code.

We have a simple view that displays a description of the application and some information about the author. We will pass the viewData.description and viewData.author data from a controller to this view later. Remember that hbs allows curly braces to display data passed to the view.

Introducing Nest Controllers

Controllers are responsible for handling incoming requests and returning responses to the client. Controllers can group related request handling logic into a single class. For example, a UserController class might handle all incoming requests related to users, including showing, creating, updating, and deleting users.

Nest Controllers are classes with decorators. Decorators associate these classes with required metadata and enable Nest to create a routing map (tie requests to the corresponding controllers). More information about Nest Controllers can be found here: https://docs.nestjs.com/controllers.

Linking the ‘About’ Page

Let’s modify our AppController to define a route for our ‘about’ page. In src/app.controller.ts , make the following changes in bold.

Let’s analyze the code by parts.

We included a return section in the index method. return passes a JavaScript object (which defines a title data that contains a text) to the index view and app layout. This enables the application to show the “Home Page - Online Store” text over the browser tab.

We have the about method connected to the (“/about”) route. This connection is established by the @Get decorator. about method defines an associative array called viewData . It also defines a variable called data1 which contains the title of the page. Then, we define the values for the description and author keys of the viewData array. We pass the title , subtitle , and viewData to the about view and app layout. The about view will show the viewData.description and viewData.author values, and the app layout will show the title and subtitle values.

Recap, when a user goes to the “/” route, the index view will be displayed (rendered in the AppController index method). Likewise, when a user goes to the “/about” route, the about view will be displayed (rendered in the AppController about method).

Running the app

In the Terminal, go to the project directory, and execute the following:

Execute in Terminal

npm run start:dev

Go to the “/” route, and you will see the new home page. Then, go to the “/about” route, and you will see the about page.

We created a couple of Nest views, a Nest Controller, and defined a couple of routes. However, we have not linked the navbar menu to the new routes. We have also purposely introduced some mistakes when defining the previous elements. Why? This is because we want to illustrate the concept of clean code. In the next chapter, we will refactor these elements and apply some good strategies about clean code in controllers and views.

See Next Article Nest JS ...