DEV Community

loading...
Cover image for Express-generator with Edge Template using Nodejs

Express-generator with Edge Template using Nodejs

honorezemagho
Fullstack Web Developer PHP-Laravel, Web Enthusiast, Opensource Contributor. I love to learn and explore new things related to new technologies 💪 💪
・2 min read

Table of Contents

1. Introduction
2. Requirements
3. Definitions
4. Installation

Introduction

When it comes to setting up the server using Express you have to choose your own configuration and sometimes it takes a lot of time to achieve what you have to do.

Today we are going to talk about Express Generator and how we can integrate it with the Edge Template engine who is not actually inbuilt into express-generator templates.

Requirements

  • Nodejs You need to install Nodejs to follow this tutorial, you can check if you've already installed it by opening your terminal and enter the command node --version and it will give you the installed version.

Definitions

What is Express?

Express according to his documentation is a Fast, unopinionated, minimalist web framework for Node.js.

What is Express generator?

Express Generator is a tool that provides an environment to quickly create a basic structure of express.

What is Edge?

Edge Template is a logical templating engine for Node.js. This means you can write most of the Javascript expressions inside the .edge file.

Installation

Express Generator

To install Express Generator you need to go on your terminal and type the command


npm install -g express-generator

Enter fullscreen mode Exit fullscreen mode

Generate a project

Because we've already installed express-generator now we can use the command


express --no-view name_of_the_project

Enter fullscreen mode Exit fullscreen mode


to generate our project for the backend using express.
NB: We use the "--no-view" option because the ' Edge template ' doesn't exist inside and we need to integrate it.

After the project is generated, go inside the project directory and install the packages by running


cd name_of_the_project
npm install

Enter fullscreen mode Exit fullscreen mode

Add Edge Template Engine

Now we have generated some scaffold using express-generator we need to add 'Edge' as Template Engine.

To do this we need to install a package express-edge


 npm install express-edge

Enter fullscreen mode Exit fullscreen mode


and after we need to register it inside our express application. Inside your app.js add the following lines:



const { engine } = require('express-edge');
app.use(engine);
app.set('views', `${__dirname}/views`);


Enter fullscreen mode Exit fullscreen mode

Finally, your app.js file will look like this at the bottom.



var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
const { engine } = require("express-edge");
const bodyParser = require("body-parser");


var app = express();

app.use(engine);
app.set("views", `${__dirname}/views`);
app.use(bodyParser.json());
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

module.exports = app;


Enter fullscreen mode Exit fullscreen mode

Congratulations.
We have successfully integrated the edge template inside our express-generator app.
party-image

Discussion (0)