Node.js app with Nunjucks (Part 1)

The main focus of this tutorial is to learn how to use Nunjucks, a powerful templating language for JavaScript. However, before we can dive into Nunjucks itself, it is first important to create a basic Node.js app to use for serving pages built using Nunjucks. Thus, this is what the first part of this tutorial is all about.

Creating a basic Node.js app

To create a Node.js app, first create a new project directory and enter it.

mkdir nunjucks-training-app
cd nunjucks-training-app

The next step is optional, although it is always good idea to use version control, even if only for practice.

Once that’s done, initiate a new npm package using npm, the default package manager for Node.js. If you add the -y flag, it will use the default values as explained in this blog post.

npx gts init

To further save time and effort, install Google TypeScript Style (GTS), which will allow you to automatically set up a simple TypeScript project while providing a style guide, a linter, and automatic code correction.

"target": "es6",
"module": "commonjs",
"esModuleInterop": true,
"noImplicitAny": true,

Then initialise TypeScript project using GTS.

This will create all the configuration files with the basic default configuration for TypeScript and Lint. To further tune the project, add to the compilerOptions in tsconfig.json the following options:

npm i -D ts-node

The first one specifies ECMAScript target version, the second one sets the module system for the program, the third one fixes some problems with imports and the last one prevents TypeScript from assuming type any if type annotation is not present. For reference see the documentation available at https://www.typescriptlang.org/tsconfig.

"start": "npm run compile && node build/src/index.js"

Next install ts-node, which is a TypeScript execution engine and REPL for Node.js

npm i -D nodemon

and add start script to package.json

"start:dev": "nodemon src/index.ts"

For convenience, also install nodemon, a tool that will help develop your node application by automatically restarting it when file changes are detected

import express, {Express, Request, Response} from 'express';
import dotenv from 'dotenv';
dotenv.config();
const app: Express = express();
const port = process.env.PORT || 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('This is my basic Node.js app');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

and add the relevant script to the package.json

Now you can run your basic app from the terminal with either npm start or npm run start:dev. But before you do that, replace the default content of the src/index.ts file with the following code:

You have to also install a web framework for Node.js called Express and Dotenv, a module that loads environment variables from a .env file into process.env, and type definition packages

npm i express dotenv
npm i -D @types/express @types/node

and add a .env file in the root directory of the project with the PORT variable set

Now all is ready. Happy coding!

If you’re interested in how these skills can be applied to larger projects, be sure to check out our Azure Application Modernisation Playbook.

About the author

Maciej Modzelewski is a Java Developer here at Version 1.

Originally published at http://maciejmodzelewski.com on February 4, 2024.