Setup simple website using Node.js, Express, Nunjucks, Gulp & Nodemon

9 March 2016 by Radheshyam Nazarkar No comments

Hello developers, before we start integration of all our components, let’s have a quick review of the below things.

Node.js

Node.js is a server side javascript-based platform. Like other server side platforms ( eg: Rails, Python, PHP… ), this javascript based platform is built on Google Chrome V8 Javascript Engine.
Node.js uses an event-driven architecture & asynchronous or non-blocking I/O model, which improves efficiency and scalability for real-time applications.

Express

Express is a web application server framework for Node.js. Express provide a robust set of features for building single, multi-page and hybrid web applications.
Express allows us to set up middlewares to respond to client HTTP requests. It also provides URL routing which allows to perform different actions and render dynamic HTML pages using any of the template engines like jade, EJS, nunjucks …

Nunjucks

Nunjucks is a rich & powerful templating engine for javascript. It takes inspiration from jinja2 templating system.
Using nunjucks we can inherit templates and make it possible to use the same or a similar layout for all templates.

Gulp

Gulp automates and enhances your application workflow. It is a task runner which uses node.js. Gulp keeps things simple and makes complex tasks manageable using node modules.

Nodemon

After any changes in your node.js application files, your changes will not reflect immediately. To reflect changes you will have to manually restart node.js server each time in a development environment.
Nodemon helps us to avoid such manual restarts. It monitors all changes in your node.js application and automatically restarts the server for a development environment. Nodemon will watch the files in the directory in which nodemon was started, and if any files change, it will automatically restart your node application.

So we are now clear about all the things. Let’s install the required dependencies using the following commands.

Install Node & npm from nodejs.org. or you can directly install it using brew

$ brew install node.js
$ node -v

Once node js installed upgrade you npm using

$ sudo npm install npm -g
$ npm -v
$ npm install express --save
$ npm install -g gulp
$ npm install nunjucks
$ npm install -g nodemon

Let’s jump on to an integration of all these components into one to make a solid architecture.
1) Create a blank directory in your workspace

$ mkdir myapp && cd myapp

2) Init your app using the following command

$ npm init

so your “package.json” file is created using the above command. Open package.json in your favourite IDE and update or add the following node module dependency code.

Install all the npm dependencies from package.json

$ npm install

Now let’s move on to the node server setup and nunjucks configuration with a view. so create app.js file on root level and copy the following js code into your app.js

In our app.js file, we configured nunjucks as default template rendering engine

var nunjucks  = require('nunjucks');
nunjucks.configure(app.get('views'), {
    autoescape: true,
    noCache: true,
    watch: true,
    express: app
});

so using the above configuration, you can directly use nunjucks syntax in your views. Using this you can also extend or include other views in HTML page.

in the above code “index.html” we are extending default the layout (“default.html”).
Let’s render the above index.html in the browser using the following node.js code

Now let’s move on to our last configuration of gulp and nodemon. Create gulpfile.js at root level and copy following js code into your gulpfile.js

The above gulp file added with different tasks for a different purpose. On server start, it will automatically run all tasks and create compressed, minified dist folder and serve all static assets from dist folder. gulpfile run the following tasks on server start

1) compile scss
2) compress & minimize js and libs
3) minify css
4) minify html
5) minify images and add random version to image

so in above gulpfile, we configured nodemon using below function and called this function into our default gulp task. This will automatically restart your node js server on every file change.

nodemonServerInit = function(){
        livereload.listen();
        nodemon({
            script: 'app.js',
            ext: 'js'
        }).on('restart', function(){
            gulp.src('app.js')
                .pipe(livereload())
                .pipe(notify('Reloading page, please wait...'));
        })
}

Once all node modules are installed and gulpfile.js changes are done, your directory structure should look like the image below
folder structure

So using all these commands your project setup is done. Run the below command to start your server on localhost

$ gulp

this command will start your node.js server and serve uncompressed assets from the build directory.
Run below command to run your server on production

$ npm start

this command will serve compressed assets from the dist directory.

You could also download sample demo from github account.

Happy coding!
For any queries or help, please drop me an email on radhe@idyllic-software.com

Radheshyam Nazarkar

Follow me on Twitter

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)