Welcome to weblogs.com.pk Sign in | Join | Help

Node and Express

In the Introduction to Ember series; we had been using NPM and Node based CLI (Command Line Interface) tools; lets find out what Node is and why Express JS is that popular. Lets launch the NODE command prompt and run >node and we can start writing JavaScript code in there! We can punch in a Hello World example there and here is how it will look like:

image

  • To exit from node “prompt”; use CTRL+C twice

Isn't this simple? As per Wikipedia; Node.js is an open-source, cross-platform runtime environment for developing server-side Web applications. Although Node.js is not a JavaScript framework, many of its basic modules are written in JavaScript, and developers can write new modules in JavaScript. The runtime environment interprets JavaScript using Google's V8 JavaScript engine. As you can see; its very straight forward to have something functional, and its quite reliable and efficient as well. We used the “http” module and with few lines of code the web server was up and running. Next, lets make a simple hello world module

image

We can see that >node is basically a REPL; if you are not black screen user before; think of it as Visual Studio Immediate Window! Now question arises; how many built-in modules node comes with; we have used http, and process in above examples; “there is a package for that”; this is why Node is so cool; it comes with NPM; node package manager and there are lot of packages in their repository; and they are increasing every hour; for instance we can use https://www.npmjs.com/package/builtin-modules to know how many built-in modules are there

image

Notice that

  • We issued >npm init; so that it generates the package.json file; so if we give that folder to someone or checked in some where; the other user can simply restore required npm modules using >npm install
  • We used –save for builtin-modules installation so that its dependency gets saved into package.json file that gets created earlier

Seeing how straight forward and easy to get things rolling in Node; its obvious why Node has become so popular; we can continue to use JavaScript language throughout the app and NPM is functional and so many modules are accessible through this setup. These two things alone let us develop an app in a seamless way and given Node is popular, if we come across with any hurdle we will sure find a help. This is why cheese is at Node these days :) So now that we have the basic understanding of Node; lets make our first Express JS app; as per Wikipedia; Express.js is a Node.js web application server framework, designed for building single-page, multi-page, and hybrid web applications. It is the de facto standard server framework for node.js. The original author, TJ Holowaychuk, described it as a Sinatra-inspired server, meaning that it is relatively minimal with many features available as plugins. Express is the backend part of the MEAN stack, together with MongoDB database and AngularJS frontend framework. In simple;

  • instead of creating Node http server from scratch; its easier if we use some framework
  • Express is popular framework of choice; its also part of MEAN stack; so its a safe choice
  • Its non-opinioned; meaning it doesn't enforce any specific idea / style on the developer and we are free to choose the architecture / style

To use it; instead of installing Express; I am going to install express-generator; that is a CLI through which we can create a skeleton of an Express JS app easily; think of it as a Visual Studio Project Template

>npm install express-generator -g
>express --ejs [WebAppName]

  • -g is to install the module “globally” meaning instead of installing it in current folder’s node_modules; on Windows; it will get installed into %appdata%\npm\node_modules
  • With dash dash ejs; we are specifying EJS engine for server side view templates; its syntax is very similar to PHP/ASP; you can read about it on their site and will see the views shortly. There are couple of more supported templating engines and you can read about them at http://expressjs.com/en/starter/generator.html
  • I used Express as my web app

>cd Express
>npm install
>git init

  • We used npm install to restore the required Node Modules that the Express Generator has used in the generated files
  • I also went ahead and initialized the folder for GIT; so we can track what’s being changed

I am not that good with remembering commands; and fortunately we are on Windows and TortoiseGit is a fantastic tool; using that we can ignore “node_modules” folder easily and it will generate the .gitignore file accordingly

image

  • Mistakenly I added bin folder in ignore; that I fixed later; the generator also generate a www file in bin folder that’s Node Startup script and it should be included in the repository

We can open this folder in Visual Studio Code; that has fantastic Debugging and GIT integration along with text editor

image

After committing the initial code that was generated; lets examine what’s in there; two important files are app.js in the root that has our application start up code and bin\www file that’s startup script for Node; from bin\www file we can learn that it will start the server at 3000 port

image

It has also generated an index.ejs in views; the view template (think of it as ASPX) and index.js in routes (think of it as a MVC Controller); and you can find similarities with the MVC; how the controller is setting title property and its getting displayed in index.ejs

image

From the Visual Studio Code’s Debug; we can launch our app from it and it will generate VS Code specific .vscode\launch.json file that has the launch settings. On launching the web server will start at 3000 port and we can browse to http://localhost:3000 and as expected; we will have the above index.ejs view and index.js router’s get() executed accordingly

image

So far so good; but if you are doing an enterprise development and your Express app is going to be part of some enterprise solution; its usually expected to have the things in proper Visual Studio and not just Code; and in this new era; its possible and supported; we will need to install Node.js Tools for Visual Studio; and once installed; we can create Node.js project from the existing code and it will create a Visual Studio project and the solution for us

image

Once we are in Visual Studio proper; we can debug our Node app Visual Studio style :)

image

We can learn from TortoiseGit; which new file Visual Studio has added; and this is great that it didn't change anything; just added few files that it needs; we can ignore some and add remaining files into the repository; its nice to have these VS Code and VS project files there so if we share our project with someone else on the team and if he wants to can open the project in the Visual Studio!  image

Published Thursday, April 07, 2016 4:31 PM by khurram
Filed under: ,

Comments

No Comments

New Comments to this post are disabled