Introduction to Node.js and Express.js.

Sunday Oct 29, 2017 Kudzai Nyandoro


Node.js

  • Node.js is an open source cross platform runtime environment for developing applications on the server side, in other words, it is a way for us to write JavaScript code on the server side. Node is build on the Google Chrome V8 JavaScript engine and this makes it super fast. Before Node was introduced a few years back developers had to use a different language for the backend such as Python, Ruby, Java etc. With Node, JavaScript can be written on both the frontend and backend of our applications. For more on Node you can read more here ....

  • Besides its popularity within the developer community, Node is a very useful to learn for a number of reasons. For example, Node has extensive libraries, it is open source, it has a great community, great API's, it is asynchronous, perfect for real-time applications, Node has very high performance, you only use one language 'JavaScript' to write code on both the front and back ends of your application and this, without having to learn an additional backend language. The list goes on. Having said that, it remains important to learn more than just one language once, as a beginner, you have a better understanding of the complex end ever-changing world of web or software development. I started with Ruby and Ruby on Rails, if I had to do it again, I would start with JavaScript and Express or another JavaScript FrameWork. As you might already know, there's no shortage of JavaScript frameworks.

Install Node.js

  • To install Node visit the following link, select your operating system and follow the installation guidelines here

Express.js

  • Express is a web application framework for Node.js that has features for both mobile and web applications. Express is very light and has many features that come as plugins. For more on Express, you can read more here ...

  • create a directory for your application

$ mkdir myapp
  • Enter into your new application directory
$ cd myapp

Install Express

  • Run the following to install Express, this will install Express in your current folder.
$ npm install express --save
  • Alternatively you can install Express globally by running the following line below.
$ npm install -g express 

Install Package.json

  • The package.json file contains metadata about an application or a package. Read more about package.json here ....

  • Make sure you are in your application folder, in this blog we are in the 'myapp' folder and run the following code to create a package.json file

$ npm init
  • You will be asked several questions during this process. and your responses will be used to create your package.json file.

  • Hit the Enter or Return key and when you get to 'entry point' write the line below and hit enter. This is the entry point of your application. You can call it whatever you like, however, most times you'll see it being called app.js or index.js.

app.js
  • Keep hitting the Enter or Return key until you get to 'author' and enter your name at this point.
$ Your Name 
  • Keep hitting enter or return untill you get to the end of the prompts

Set up your home and about pages

  • First, install the Embedded JavaScript templates (ejs) templates by running the code below. You can read more about ejs here.
$ npm install express ejs --save
  • Create your views directory
$ mkdir views
  • Create your home page
$ touch views/home.ejs
  • Open your newly created home.ejs file and add some text to it, see the example below.
<h1>My Home Page<h1>

<p>Welcome to my home page!</p>
  • Create your about page
$ touch views/about.ejs
  • Open your newly created home.ejs file and add some text to it, see the example below.
<h1>My About Page<h1>

<p>This is my about page!</p>

The application file

  • Now let's create the app.js file where our application will reside.
$ touch app.js

Routes

  • Open your app.js file and add the code below
  var express = require("express");
  var app = express();

  app.set("view engine", "ejs");

  app.get("/", function(req, res){
    res.render("home");
  });

  app.get("/about", function(req, res){
    res.render("about");
  });

Finally, Server Setup

  • In the same app.js file you have open, let's set up our server (I'm on a Mac), please see the alternative set up for Cloud9 below.
  app.listen(3000, function () {
      console.log('Your server is running port 3000 .. visit 'localhost:3000' in your browser.");
  })
  • Alternatively f you happen to use Cloud9 instead, this is how you can set up your Express server on Cloud9
app.listen(process.env.PORT, process.env.IP, function(){
   console.log("Your server is up and running!");
});
  • Run the following code to make sure that your set up is correct
$ node app.js
  • Open your web browser and type in the 'ur'l below to view your app.
localhost:3000