>_CodeLearn Asia

Express + Node.js

Your first Express App.

Express.js Node.js
You've heard about Express.js - the minimalist powerful web framework for Node.js

This article will show you the simple steps if you're starting out.

Pre-Requisites:
  • Mac OS X or Linux Based Machine
  • Basic HTML/CSS Understanding.

Let's Begin:


Step 1) Install Node.js and NPM (Package Manager) on your machine.

Nodejs Download Link

Step 2) Install the Express.js framework using NPM:
Open up the Terminal in your Mac or Linux.

            $ sudo npm install expressjs -g
        
Step 3) Install the Express Application Generator Tool:

            $ sudo npm install express-generator -g
        
Step 4) Create a new skeleton application with Generator:

            $ express myApp --hbs
        
Ok - Now you have created a base application using Generator.
The --hbs option means we will use handlebars as the templating engine. You can run the application by using:

            $ cd myApp
            $ sudo npm install
            $ DEBUG=myApp:* ./bin/www
        
And you can view the application in your browser at the following URL: http://localhost:3000

The NPM install command looks at the module dependencies inside the project and downloads/installs them where required.
This will run it in Debug Mode - which means any handled errors on your application will appear in the browser.

To exit your app:

            $ ctrl+c
        
Time to view your application in a Text Editor - like Sublime Text or Atom or TextMate.
Drag your new project folder into one of these Text Editors.

You should see:

sublime-text
This gives you an overview of all your project files and folders.


Let's take a quick look at the main folders and files that you need to worry about:

app.js The main crux of your application. Think of this as the configuration file that connects all the components together and gives some settings for the Express/Node App.

Public: This is where you want to keep your app's public files that you want everyone to be able to access. This includes your Images/Fonts/Sounds. As well as the CSS stylesheets files used to style your views and any shared JavaScript Files that are required.

Views: This is where you will write your HTML Templates. In our case we are using .hbs files to define your templates.

layout.hbs This is the static component of the html templates. i.e. the content you want repeated on every page. This prevents you from repeating code on each HTML template. For Example a header navbar.

Routes: This is where you define the routes for your application. Think of this as the link between what goes into the url address bar of the browser and which templates the end user will see.

Step 5) Let's Edit the base application code to create our own header layout: If you open the /views/layout.hbs file you will see:

            
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
{{{body}}}
</body>
</html>
The {{{body}}} expression is used by the Express Router to replace with the views that are specified in the Routes. Let's leave that there.
The {{title}} expression however is a dynamic variable coming from the JSON key-value pair in the route definition for 'index' (your homepage) - In this case it is 'Express'.
Let' remove the {{title}} expression and replace with the title of your WebApp. I'm going to use Bootstrap as my styling css. I can put the link for the css file in the head section of the page.
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'/>
Above the {{{body}}} expression I want to add any repeating code that I want to appear on every page. I am going to make a simple navbar header with 2 links: Home and About.

            
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>
</nav>
Step 6) Create another View:

            Let's create a new handlebars template in the views folder. Create a new file and save it as about.hbs
        
Add whatever html you want here for your second view. Remember that <doctype>, <head>, <html>, <body> tags are not required. Similar to index.hbs

Step 7) Add a New Route in your routes/index.js file for the new about template.

            router.get('/about', function(req, res) {
                res.render('about');
            });
        
Step 8) Register the new route in the app.js file for Express.

            app.use('/about', routes);
        
Ok - We now have a basic Express application with a layout template and routes. Now you're good to go and build your app out further.

To run your application in Production Mode and for your live server:

            $ npm start
        
You can add and use feature rich scripts in your templates as you would with normal HTML files.

Additionally you can install NPM packages and Require them into your application to do more complex tasks.

Keep on Learning!

by @zakburki, 8th March 2018.