First Web Application made easy with NodeJS

Last December was my summer break, so I decided to try something new.
NodeJs was the first thing that popped out in my head, then I choose to build a simple web application.

In order to build a simple web application I researched and found that there are many framework, but most of them build on top of ExpressJs.

After that, I start research about ExpressJs and it took me just only one day (maybe less than that) to understand the structure of it.

THIS IS FREAKING FAST!!! compared to Laravel, Spring or ASP.NET.

Interesting? I can show you how easy it is!! 
Let’s start!!

Prerequisite

GET STARTED

  1. First thing you need to do is to download “Express-generator” via NPM
Read more about express-generator here

2. Now, we’re ready to make a project! Let’s create one (my project name will be “tutor”)

create project name tutor
You’ll see the list of files that express-generator created for you
Is it really work? Check it out!!
cd is a linux command which means change directory (change folder)
ls is also a linux command which means list all files

3. After we created a project, we need to install its dependencies

make sure you are inside the project directory (folder)

4. Why don’t we try to run it?

if you’re using express-generator, then the starter file is www
Go to http://localhost:3000 , then you will see “Welcome to Express” as the left image

Explore The STRUCTURE!

bin/www — Starter file
public — where static files are kept
routes — where route (controller) are kept
views — where our view/UI are kept

If you are not familiar with MVC then you can read more about it here

I’ll skip directory public since there is nothing to talk about (it just keep your front-end files)

Let’s look at index.js file in routes directory first

routes/index.js
THE CODE IS REALLY SHORT. IT JUST ONLY 9 LINES!!

look at lines 5

router.get(‘/’, function(req,res,next){}) means that the function in second parameter will responsible for path ‘/’ when HTTP method is GET

In this case, it will render file index.jade in views directory and send data 
{title: ‘Express’} to it.

render(‘index’) will look for index file here

If you go to views/index.jade, you will see this

views/index.jade

It use title on lines 4 and 5

What if I make a change in routes/index.js ?

I change the title a bit
restart server

Woopy!

After this I won’t use .jade file again. Because I will use AngularJs in this project

If you want a Restful API? can you use ExpressJS to do it for you?

how short it is?
here you go!

Go go go! Now we move to app.js

here is where we config our server

This file is quite messy. And you see lines 8–9 we instantiate two variables for routes and we register it on lines 25–26

I don’t think this one is a good design
When you create a new route, you need to put it in app.js, when you want to add some configuration, you need to add it in app.js ……….
app.js will be longer and longer and hard to read, right?

How about decorating it a bit? Hmmm?

First, we remove lines 9 and 26

Then, go to routes/index.js

add lines 10

And this work perfectly the same as it used to be

router.use(‘/users’,require(‘./users’));
tell us that when there is a request looking for path ‘/users’
the file routes/users.js will responsible for it

routes/users
Actually, this way still not satisfy me. I want the route to be automatically registered, but I’m too lazy to research the way to do it since I move to Strongloop or SailsJS is easier (but ExpressJs is a lot easier when project is small. Anyway I don’t think there will be a lot route for small project)

OK, I think it’s the time to make some model!

Add Model!!

My project is “tutor”, so I add “course” to it!

create new directory and name it models, then create a model name course.js

Ahhhhh, I’m too lazy to write DDL for my table in MySQL database

Have you heard about MongoDB?
I don’t need to write any DDL for it! 
Great! Then, I will use MongoDB

I also want to use ORM, and I think Mongoose is the answer for this project (Mongoose is an Object modeling tool)

install mongoose and save it to our package.json

After installed, you have to configure it.

add this in app.js

What you’ve to write is 
mongodb://__your_database_ip_/__database_name__

For me, I name my database “tutor”

Now, I can use Mongoose for my model.

CAUTION!!
lines 3 : I use bluebird as a Promise instead of default one, because it’s faster
if you want to do so please do “npm install bluebird” or remove lines 3

Now we’re ready to CRUD(Create Read Update Delete) with course model!!

But first, let’s me explain my model first

In my model
it has name which is unique and its type is String
it has description which is String
it has tags which is array of String(s)
and price which is Number

Lines 14: There’re 3 parameters, first one is the name of it, second is schema, last one is name of collection(table) in database but it’s optional

Oh, I’m sleepy now. I will continue the next part tomorrow.
 See ya tomorrow~

Read more : Part 2 is released!!