Roux Meetups – Lynda Course on ExpressJS

Lynda ExpressJS Course Roux Meetups Homepage (course by Ray Villalobos)

This Lynda course, taught by Ray Villalobos, covered setting up a basic development environment using Node and Express. I really enjoyed seeing the similarities and differences between setting up a web server in JavaScript and doing the same task using Ruby. As a follow up, I learned how to deploy the app using now.

What We Did

  • Installed nodemon and reload packages to enable auto-refreshing of server and browser
  • Implemented ejs partials to modularize code for reuse.
  • Built an /api route to allow getting, posting & deleting JSON data.
  • Used the fs module to update JSON files in response to AJAX requests to API
  • Added Live Chat functionality using socket.io
  • Deployed App using now

My Favorite Parts

Deployment!

I was really excited to be able to deploy this app so easily using now! It’s a great tool for getting projects up on the web quickly to get feedback. It’s amazing how easy it is to set up. Literally all I had to do to get it running was to install the CLI and then add this to my package.json file:

{
  "name": "expressjs",
  "version": "1.0.0",
  "description": "Files for my Building a Website with Node & ExpressJS course on Lynda.com",
  "main": "app/app.js",
  "scripts": {
    "start": "nodemon -e css,ejs,js,json --watch app --ignore feedback.json",
    "now-start": "node app/app.js NODE_ENV=production"
  },
  "author": "Ray Villalobos",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.15.2",
    "ejs": "^2.4.2",
    "express": "latest",
    "reload": "^1.0.0",
    "serve-favicon": "^2.4.2",
    "socket.io": "^1.7.3"
  }
}

After that, all I had to do was run now from my terminal and it deployed the app, ran npm install and displayed a link to a public, secure URL where I could visit the deployed app. It even copied the link to the clipboard for me! Super satisfying 🙂

Workflow

It was also really nice to set up the live reloading of the server and the browser whenever we save. This is set up by the "start" script in the package.json file above (line 7). Although, I must admit that adding this script tag at the bottom is a bit counterintuitive: <script src="/reload/reload.js"></script> (given that there’s nothing at that path…).

Similarities Between Building Web Server in Node/Express and Sinatra

I found that building out a simple app with Node and Express is pretty similar to the process in Sinatra. Building out the routes in the app/routes folder feels very much like building Sinatra controllers. Local variables are just passed as objects with the request and we can use them in the views using the ejs syntax. This feels very similar to the way we pass instance variables from Sinatra controllers, using them in the views with erb syntax.

Pain Points

A Bit Too much Repetition

Although we did modularize our views using partials, I really felt the lack of a central layout file that would yield to other partials depending on which route we visit. I felt it would have been useful to have the html tags and the header/footer in a common layout partial and then just fill in the central content more like we do it in Sinatra and Rails. My sense is that in a Full Stack JavaScript environment with Node and Express, managing the view layer is usually handled by the front end framework/library that we choose.

No Database Layer Yet

Although we did handle persisting data by using the fs module to record changes in the feedback.json file, we didn’t handle how to interact with a database in this tutorial. The next Lynda course I’m going to do will incorporate Mongo DB as a database layer and React as the front end framework.

Leave a Reply

Your email address will not be published. Required fields are marked *