Creating App Using Express.JS + Sequelize ORM

After being a long PHP / Wordpress + javascript frontend developer, I decide to get my hand dirty with javascripts for both server and frontend area. FYI, it was my first experience writing a Node.JS app, so be patient.

Here’s the plan

I’ll create a simple Blog Reader app, where user can read all blog post, view a single blog post, and create a new blog post.

Server code will be serve as API end-points and will be processed further by the frontend code. To make things simple, there will be no authentication.

You can check all the codes used in this post by following this link.

Tools needed

  • Express.JS as the framework. Since Express.JS is one of the most popular framework for Node.JS, I assumed it’ll be easier to get help from google.
  • Since I’m not really familiar with MongoDB, I decide to use SQLite with Sequelize ORM.
  • For the frontend area, I’ll use Angular.JS, because I’m familiar with it. So I can focused my learning to the server area.
  • NPM for the package management (both server, frontend, and development packages). It’ll be easier to maintain one package management system, than using NPM and Bower together.
  • SASS for the CSS preprocessor.
  • Bootstrap for the HTML.
  • And Gulp for automating some tasks, especially for all the frontend jobs.

Preparing the Tools

All tools needed will be installed using NPM. I’ll assumed that we all are familiar with the Terminal / iTerm2. Start by creating a blank folder, cd into it, and using your terminal, type (without $ sign) :

$ npm init

Please answer all the questions, and you’ll end up with a new package.json file. This file will be filled with all information about this app. Please notice that all these dependencies will be downloaded into the node_modules folder.

Next, type this to the terminal to install all app’s dependencies :

$ npm install --save angular angular-route angular-sanitize body-parser bootstrap-sass express jquery sequelize sqlite3

And then type this to install all development’s dependencies :

$ npm install --save-dev browserify del gulp gulp-autoprefixer gulp-cache gulp-compile-handlebars gulp-concat gulp-cssnano gulp-imagemin gulp-jshint gulp-ng-annotate gulp-notify gulp-rename gulp-rev gulp-sass gulp-sourcemaps gulp-uglify jshint stripify through2 vinyl-transform

Now all the dependencies have been installed. Check the content of file package.json to verify what kind of modules that successfully installed into the node_modules folder.

Setup the Project’s Folder Structure

Here is the structure :

From what I learned, there are no standards folder structure for the Express.JS app, please CMIIW. So I came with this structure :

  • /app/server : all server related javascript codes placed here, and will be executed by Node.JS
  • /app/client : all frontend codes + assets placed here, and will be processed by gulp and compiled into the /public folder
  • /node_modules : container for all project’s dependencies
  • /public : place to store all compiled code, optimised assets, and will be accessible by public
  • index.js : main Express.JS app file
  • data.sqlite : database file, in SQLite format. You can create the database file using Terminal by typing following command from inside the app’s root folder :
$ touch data.sqlite
  • gulpfile.js : main gulp configuration file
  • package.json : main information about our app, and it’s all supporting information
  • README.md : a readme file

Setup the Express.JS Entry Point

As I set in my package.json, I’ll be using index.js as the entry point for my app. This file will be executed first while we run our app.

In this file, I’ll put all modules required by the app. Thanks to Node.JS require(). Btw, we can learn more about Node.JS module in this link.

Here is the content of my index.js file :

I put all the required modules on top, followed by the configurations, routes, and setup the server to listen to port 8000.

Database Configuration

Since database configuration will be used several time, so I decided to put it in one file, and required it somewhere in the code if database configuration is needed. Here, I set the database type — sqlite, database file, host, database name, etc.

Designing the Model

Model is used to define our data structure, and connect it to the database. With Model, it will be easier for the app to interact with the database.

For this app, here is the content of the model.js.

The Post model is consisting of two main field : Title (postTitle) and Content (postContent). It also has a timestamps field (managed by sequelized), and and id field (also managed by sequelized).

Add Simple Routing

Please lookback into the index.js file. There are some routing described at line 12–14. Later I setup the methods that will be called if a request made into related routes, and put all the codes into the route.js.

There are three main methods here :

  • getPosts, to get all blog entries. Querying database using findAll method.
  • getItem to get certain blog post, querying database using the findOne method.
  • postEntry to save a new blog post. The sync() method is used to make sure that the table for Post model is always uptodate with it’s model definition.

Code the FrontEnd

All the Angular.JS codes used here are pretty simple. To bundle all required codes, I’m using browserify. With browserify, I’ll be able to use the require() method just like Node.JS. So it feels really like to talk in very indentical language between the server and client.

Here is my app.js for the Angular.js app

Please look, I’m using some require() to include all related code into the app.js. For more detailed Angular.js codes (including .html templates, sass, etc), please check this project’s Github repo.

Writing the gulpfile.js

It’s almost done. Here is the content of my gulpfile :

I divide the gulpfile into some tasks :

style

script

img

  • Compress all the images using gulp-imagemin
  • Put all the result into destination folder

html

  • Copy all Angular.JS template into destination folder

version

  • Add hash revision into the CSS and JS file using gulp-rev
  • Create the rev-manifest.json
  • Putt rev’ed files into dist folder

index

  • Dynamically change link for the CSS and JS file inside the index.hbs file into their new name and new location using gulp-compile-handlebars.

Build and Run

For the latest step, please go to the terminal, and run

gulp

to build our frontend, and then run

node index.js

Go to the browser, and visit http://localhost:8000/.

Here are some screenshots :

Home page for the Blog Reader App
Single page for the “Testing Title” page
Form for creating new blog post.

For more complete codes, please visit this project’s Github Repo. Thanks.