Building a simple joke site with nodejs – Part 3 – Expressjs

A simple index-only page won’t do for a joke website. You’ll want to be able to navigate to pages that only have chuck norris jokes, or only have yo momma jokes. Or, perhaps you’ll add a page where users can submit jokes – then of course you’ll need a profile page for users. Let’s use expressjs to get our multiple pages set-up!

Auto-generating a beginning expressjs template

Let’s install express’ project generator tool, but let’s install this globally for the operating system using the -g option:

npm install express-generator -g

Let’s generate a new app called happypolack. For our template engine, we’ll use ejs. We’ll get into this more later.

express --ejs happypolack

Directories overview

Now, if you cd into the happypolack directory, you’ll see a number of different directories. There’s /public, /routes, /views and /bin. The Public directory contains everything that will actually be downloaded by your customers, such as the javascript, images and stylsheets, except for your .HTML code. Your HTML code will go into the /views folder. Though these have a .ejs extension, know that they are essentially HTML with the addition of being able to access server side code through template tags (<%= and %>). See an example of how the title is set using these template tags in /views/index.ejs.

Index, where art thou?

But, where does the title between the template tags come from? It comes from the /routes/index.js file! Let’s take a look at this code in routes/index.js:

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

Remember in our first tutorials how you had to do “writeHead” and call “responses.end” to actually send data to the user? The way you do this in express is much different.

Let’s say, simply, that you want the web URL http://happypolack.com/ to show your index.ejs HTML file, and that’s it. Well, you’ll setup a route (this is index.js) and have that route included in our main app.js file (we’ll get to that). All the code in index.js is doing is setting things up so that when an HTTP GET request goes to the root of our website, it will show/render the “index[.ejs]” file and pass the variable data title.

Now, open up app.js that was generated in the root directory for you. This file is essentially our main. The top 24 lines are simple set-up that you don’t need to worry about immediately. However, let’s look at these lines of code:

var routes = require('./routes/index');
...
var app = express();
...
app.use('/', routes);
...

Understand this already? That route that was generated for us (routes/index.js) was simply a node module. This node module will be loaded whenever the base URL (‘/’) is navigated to by your customer (in my case I want it to be http://happypolack.com). Let’s see this in action!

Lights, camera, action!

First, express included a bunch of dependencies in a package.json file. A package.json file is the main identifier for a node module. Inside of that file, there’s is an array of “dependencies” that your module requires. To install all of those dependencies, it’s easy! Type the following:

npm install

You’ll now see a bunch of new directories/modules inside a folder called node_modules.

Now run your app using either node app.js or, easier, the npm command:

npm start

By default expressjs generated apps use port 3000. Now navigate your browser to:

http://localhost:3000

You should see a basic “Welcome to Express” web page. That’s it!

Conclusion

You’ve seen how to setup expressjs and now you should have a basic understanding of the structure expressjs creates for you. Next time, we’ll add back our basic flat file “database” and start showing some jokes!

See the rest of this tutorial series

Part 1 – Hello World
Part 2 – Adding our flat file “database”



Share this post


facebooktwittergoogle_plusredditpinterestlinkedinmail

Tags: , ,

Leave a Reply