Node.js III

Express

At the last Node post, we have put our app to run, but, if we want to serve others pages, implement others features in our app?

We must decouple the html code from our JS files too!

So, let’s start!

Why Express?

As explained on its webpage, Express is a fast, unopinionated, minimalist web framework for Node.js, that handles the application routes! Take a look at its FAQ.

Unopinionated?

Weird term, but, is what it is! For example, unlike Ruby, that is a opinionated language (“the Rails Way”, that tells you to do what they think it’s a right way to do), Express is a framework that let you free to do on your way.

Routing

If you don’t know nothing about routes, at Express website, you can learn routing basics!

Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).

You can also use an Express Generator, but, at this moment, I want to do it by hand!

So… let’s do it!

Refactoring our app for the 1st time

This is what our app is look like:

2017-08-19 (2)

Yes… I move the side bar to the right. Why? I feel more confortble this way! hehehehe “Visual Studio feelings” 😉

I also changed the font and I using Fira Code with ligatures enabled, after read a Scott Hanselman post!

He explains:

Typographic ligatures are when multiple characters appear to combine into a single character. Simplistically, when you type two or more characters and they magically attach to each other, you’re using ligatures that were supported by your OS, your app, and your font.

And, I liked!

Returning to our first refactoring! Focus, Camilo!!!

Well, to handle the routes, I put a new file at the project: app.js and it’ll be the new starting point of tha application.

At app.js, I required the Express Module, that returns a function and, at sequence, I run the returned function creating the app object!

2017-08-19 (3)

Unlike Node, I don’t need to create a server, etc., I just need to call the listen function, passing the port that it’ll be listening and a callback.

As callback, I simply log a message.

Running…

2017-08-19 (4)

At browser, when I navigate to http://localhost… Error! Why?

2017-08-19 (5)

Well… there is no route configured! Let’s do it.

The syntax, according Express API documentation is:

app.METHOD(path, callback [, callback …])

Routes an HTTP request, where METHOD is the HTTP method of the request, such as GET, PUT, POST, and so on, in lowercase. Thus, the actual methods are app.get()app.post()app.put(), and so on. See Routing methods below for the complete list.

So, for the get of the main page:

2017-08-19 (6)

And, hitting F5 at browser we get…

2017-08-19 (7)

And this is the basic of Express! Next post we’ll talk about EJS!

See you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s