The Road to Node via The Express Expressway

A Co-Maker and I met up during the week to work on an idea he’d had for a project, inspired by South Park, to help us learn Express — the fast, un-opinionated framework for Node.

Member When? is going to be a super-simple single page email reminder app.

You go to the site, you put in your email and the thing you want to be reminded about, and the specific time you want the reminder for — and it sends out a twee reminder email at that time.

It’s still a work in progress, but I’ll take you through how we first got the basic framework up and running, and how we hooked it up to MongoDB on Heroku — with Mocha and Chimp testing frameworks too.

Getting your Express app up and running…

Start a node app in your chosen directory with npm init .

Then add Express as a dependency with npm install express --save , which also shortcuts to npm i -S .

N.B. Saving a package as a dependency means it gets added to your package.json file, so that when someone else takes the files, they can run a simple npm install, and they’ll all be installed locally on their machine.

Now let’s install Mocha.

Mocha is one option for your online unit tests. Run npm install --save-dev mocha which shortens to npm i -D mocha .

Then you can also add chai, a library which adds some useful extra syntax for your tests (including the classic keyword ‘expect’), by going npm install — save-dev chai .

Let’s write our first Mocha Unit test.

Now run mkdir test/server.test.js to create your server test file…

And write the following test to check that the server is returning a status code of 200.

var expect = require("chai").expect;
var request = require("request");
var server = require("../app/server");
describe("Member utility", function() {describe("Posting a member", function() {
var url = "http://localhost:3000";
it("returns status 200", function(done) {
request(url, function(error, response, body) {
expect(response.statusCode).to.equal(200);
done();
});
});
});
});

done(); is the command you use in node to tell it the process is finished — we’re running it as a callback here.

Now for feature tests: Chimp

We used Chimp before — it gives you the ability to open an actual browser and check your content is all there on the page.

Install chimp as a dev dependency (only used development-side) with npm install --save-dev chimp , which shortens to npm i -D chimp .

describe('Members', function () {describe('Homepage', function(){
it('displays a welcome title', function(){
browser.url("localhost:3000/");
expect(browser.getTitle()).to.equal('Member When - Member Berries for Life');
});
it('displays a welcome message', function(){
browser.url("localhost:3000/");
var text = browser.getText('#member-welcome');
expect(text).to.equal('What do you need to Member?');
});
});
});

Adding shortcut scripts in package.json

Going into your package.json file and adding pairs to the “scripts” object allows you to run things with a simple npm run <value> .

This is ours — looking at line 21 onwards, we’ve created the functionality for npm run test to run our mocha tests, npm run feature to run our chimp feature tests.

Then there’s our scripts for running the server. npm run dev runs the server using another package we installed called nodemon which allows you to incorporate changes without having to keep stopping and starting the server (much like Rackup or Shotgun in Sinatra and Rails). There’s also a regular npm start for running the server without nodemon.

So now let’s pass these first tests.

Run mkdir app/server.js and let’s write the following:

const express = require('express');
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));
const app = express();
app.set('view engine',"ejs");
app.get("/", (req, res) => {
res.sendFile(__dirname + '/views/index.html');
});

This will serve up an html page which we’ll also write:

<!DOCTYPE html><head>
<title>
Member When - Member Berries for Life
</title>
</head>
<body>
<h1 id="member-welcome">What do you need to Member?</h1>
<form action="/member" method="POST">
<input id="member-input" type="text" placeholder="I need to member..." name="member">
<button type="submit">MEMBER</button>
</form>
</body>

Tests are now passing!

Getting Hooked Up to MongoDB

We need somewhere to store the info for each ‘member berry’. Heroku is the best option here as it has a free add-on for MongoLabs (though you have to give them your bank deets).

The connecting to Heroku itself was very straightforward — no special build packs needed like with Meteor.

It’s probably easier to just take a look at the code we wrote first.

That code on line 9 corresponds to the following in config/database.js… the URL for which you get in the special MongoLab section of your app on heroku.

We used a package called ‘dotenv’ to read the details in the hidden .env file containing our unique access details.

Overall figuring all this out hasn’t been quite the straightforward experience we had with other frameworks.

But this is more to do with the fact the documentation seems so diffused between different places than because it’s inherently complicated.

If you want to you can check out the repo and watch it develop here!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store