Layout View With Nest JS

Introducing Bootstrap

Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites. For Nest projects, a developer can design the user interface from scratch. But because this book is not about user interfaces, we will take advantage of CSS frameworks (such as Bootstrap) and use a starter template to still create something that looks professional. You can find out more about Bootstrap at: https://getbootstrap.com/.

Introducing Handlebars Partials

Most web applications maintain the same general layout across various pages (common header, navigation bar, footer). However, it would be incredibly cumbersome to maintain our application if we had to repeat the entire header, navbar, footer HTML in every view. Fortunately, we can define this layout as a single hbs file and use it throughout our application.

Configuring Handlebars Partials

To create this common layout, we need to configure Handlebars Partials. Handlebars Partials are normal Handlebars views that may be called by other views. We will configure Handlebars Partials and include a library to watch for changes in those Partials.

Installing hbs-utils

Hbs-utils provides a set of functions that are useful when using hbs. One such function allows us to watch changes in Partials. Let’s install hbs-utils in our Online Store project. In the Terminal, go to the project directory, and execute the following:

Execute in Terminal

npm install hbs-utils

This installs hbs-utils in our project. It modifies our package.json file to include the hbs-utils dependency and includes the hbs-utils library inside the node_modules folder.

Modifying src/main.ts

In src/main.ts , make the following changes in bold.

We import the hbs library as a hbs object and the hbs-utils library as a hbsUtils object. We instruct hbs that the views/layouts folder will be used for storing Handlebars Partials using the registerPartials method. We then tell hbsUtils to watch the views/layouts folder for changes using the registerWatchedPartials method.

Creating app.hbs

To get started with Bootstrap and the hbs layout, we first create a folder called layouts under the views folder. We then use the Bootstrap starter template to create our layout. The Bootstrap starter template can be found here: https://getbootstrap.com/docs/5.1/getting-started/introduction/.

In views/layouts , create a new file called app.hbs and fill it with the following code.

The above code is based on the Bootstrap starter template code and the Bootstrap Navbar (https://getbootstrap.com/docs/5.1/components/navbar/). We modified the base code including links in the header ( Home and About ). The stater template includes a Bootstrap CSS file ( bootstrap.min.css ), and a Bootstrap JS file ( bootstrap.bundle.min.js ). We included three objects title , subtitle , and content.

The title and subtitle objects are wrapped by an if condition. The if hbs helper can be used to conditionally render a block. For example, if title object is defined, it will render the title value. Otherwise, it renders the content of the else block (in this case “Online Store” text).

Finally, {{> content}} defines a partial call. In that specific location, we will inject other views code.

Modifying index.hbs

Delete all the existing code in views/index.hbs and fill it with the following code.

The index view invokes and renders the app layout with the use of the app block {{#> app}}…{{/app}} . We define an inline partial called content , which is rendered inside the app layout in the {{> content}} line. In summary, the index view injects an HTML div with a welcome message inside the {{> content}} line of the app layout.

Running the app

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

Execute in Terminal 

npm run start:dev

Open the browser to http://localhost:3000/ and you will see the application with the new layout . If you reduce the browser window width, you will see a responsive navbar (thanks to the bootstrap starter template, navbar, and the inclusion of the bootstrap files. Note: sometimes, you need to stop and start the server to see the changes due to the inclusion of new libraries in the project.

Adding custom CSS styles and a Footer

Let’s make our app interface more professional. We will include a custom CSS file and a footer in our layout.

Custom style (app.css)

Create a folder called public under the root project folder. Then, create a subfolder called css under the public/folder. Then, in public/css create a new file called app.css and fill it with the following:

We have some custom CSS styles in the previous file. We override some Bootstrap elements with our own values and colors.

This CSS file is available for public access. If you have the server running you can access it from:

http://localhost:3000/css/app.css. This is because we told Express that the public folder will be used for storing static assets. So, all files inside the public folder can be accessed from our server link.

Modifying app.hbs

Finally, in views/layouts/app.hbs , make the following changes in bold to include the previous CSS file and create the footer section

We include our custom CSS file ( css/app.css ), and created a footer section with this  author names and links to their Twitter accounts.

Running the app

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

Execute in Terminal

npm run start:dev

You will see our index page, with the refined layout. It looks more professional (at least for us). This

design was inspired by a free Bootstrap template called Freelancer. You can find more information about this template here: https://startbootstrap.com/theme/freelancer.

We will refine the index page and create an about page in the next article.

See Next Article Nest JS ...