fbpx

I generate EXTRAORDINARY results for a living!

Christopher Nolan’s Tenet is arguably the most complex movie of all time. 

Unfortunately, since I confessed to enjoying Tenet more than mushroom and pepperoni pizza, my friends have permanently labeled me a nerd.

 

After failing to shake off this antisocial label by engaging in several TikTok dance challenges, I tell myself: if I must be seen as a nerd, why not be seen as a COOL nerd instead?

 

So I am going for COOL, designing a custom love web app JUST to ask my next crush out!

 

But then I would need to receive her POST request (whether she wants to date me or not), parse it, and get the server to respond accordingly.

 

This is how I will get that done on Node.js – and you can follow along. Of course, you have to install Node.js on your computer first.

 

Assuming you have done that correctly, let’s jump on the terminal or command prompt in good faith.

 

First, we go to my desktop folder with the cd (change directory) command. 

 

From there, we will create a new folder on my desktop named “Asking Crush Out”. 

 

We achieve this using the mkdir command. After that, we cd into this Asking Crush Out folder.

How to create directory nodejs

I will use the Atom text editor for this tutorial, and I can simply open Atom and add the designated folder.

 

Next, on my terminal, I will create a file called crush.js will typically handle my app startup. 

receive and parse POST node.js
creating crush.js file

After this, we will create an npm package with the npm init command. This creates a JSON package that we will heavily leverage.

 

You may choose any description and author name when creating this, but the entry point must be set to the file name handling your app startup and subsequent routing.

npm initializing

If you did it correctly, you have earned the privilege to sniff some skeletons in my cupboard. 

 

The first skeleton is that I am a lazy developer with an affinity for modules. 

 

So hooked am I on “dependencies” that I struggle to submit an IRS W-9 form as an “independent” contractor…haha!

 

In this tutorial, we will use the express, body-parser and nodemon modules. 

 

The express module integrates the indigenous Node HTTP module. The body-parser enables me to parse my crush’s request body in middleware for my server to work with.

 

Lastly, the nodemon module allows my node app to automatically restart once it senses any change in the directory.

 

So here is how we would install them on the terminal.

 

Express: npm install express

Body parser: npm install body-parser

 

For the nodemon, I would install it locally using: npm install –save-dev nodemon

 

You can also install it globally via nodemon install -g nodemon

receive and parse POST node.js
Installing node modules

Don’t worry about the deprecated components for now, as the existing functionalities would suffice. 

But to be on the safer end for more critical projects, ensure you always wrap your dependencies.

And now, if I go to my Atom editor and check out the first JSON package we created, we will find the dependencies deliciously served up and ready to use. 

A collection of our installed dependencies

Note that nodemon comes under “devDependencies”. This is because I installed it locally.

 

The next step would be getting nodemon to listen on the crush.js file.

 

Given its local installation, I would call this simply using: npx nodemon

nodemon listening on crush.js

Should you install yours globally, you can get it to listen on the crush.js file via nodemon crush.js

 

If you have gotten it right up to this point, pour yourself some hot coffee!

 

Now we are about diving into the juicier part.

 

At this point, we would have to “require” our express module and get our server to listen on port 3000 since it is my computer hosting the app (for the purpose of this tutorial).

 

Forgive me for naming the port 3000 lovePort…truth is I had Michael Bolton’s “When a Man Loves a Woman” epic playing in the background when building this love app.

requiring installed modules

And if my server is running, log a “success” message on our terminal.

 

Over to my terminal, you can see the “success” message logged in below.

receive and parse POST node.js
nodemon server running

Beautiful!

 

Now, we need to create the route page where I would send my crush to ask her out. 

 

Let us create an index.html file for this.

 

Remember, we can easily use touch index.html from the terminal. But first, we need to momentarily stop the server using Ctr + C and, when done, get the nodemon to listen again on crush.js.

 

For the sake of simplicity, I will keep the index.html as minimalistic as possible, using in-line CSS as I don’t want to extend this tutorial into serving static files in Express.

 

The latter would have allowed us to serve my crush other files from the public folder).

 

So quickly leveraging the HTML boilerplate on Atom, I created the index.html file.

 

It basically combines an input element and a submit button encased in a form. This way, I can receive her POST request, parse it and respond.

receive and parse POST node.js
A look at our index.html

Here is what I want you to note in this index.html file. 

 

i. The Input name is set to answer. We will need to tap into this when parsing her response to our server.

ii. The button type is Submit, so she submits her opinion (whether she likes a hot guy like me or not) to me when she clicks. 

iii. The form method is “post,” and the action is set to “/”. That is the route we will later equip with a post functionality.

 

Enjoying the ride so far?

 

We will use localhost:3000 as our browser address bar for this app since it is locally hosted for this tutorial.

 

It is now time to handle the GET request for the “/” route. 

 

For this, we will use the express app.get function. Thanks to the darling function, we can set a route handler for GET requests my crush gives us.

 

After sending the GET request, Express will respond with the callback that sends her the index.html file.

receive and parse POST node.js
Observing the get request

Admit it, the “__dirname” sounds like the gibberish you mutter after downing a gallon of beer, right?

 

Well, in this instance, the dirname refers to the directory containing the file executing the code. 

 

In this case, as you can see from the x arrow in the picture, this is the “Asking Crush Out” directory. 

 

This directory houses the crush.js and index.html files.

 

And to access the index.html file, we need to combine the __dirname with the “/index.html” and send it to her with the res.sendFile() function.

 

So this is what she would get on the client-side.

receive and parse POST node.js
How the client side looks

Quite pitifully, I don’t have Brad Pitt’s fame or his blue eyes. Therefore I am not sure of a YES from her. 

 

Consequently, I, at least, need to hear her out by POSTing her request to the server when she clicks “Find What Happens Next”.

 

To get the server to respond to the request, we need to equip it with an app.post function.

 

The app.post() function is another lovely guy that helps us route my crush’s HTTP POST requests to a path I dictated with my precise callback function.

 

If you remember, in the form tag in the HTML file, the action pointed to the “/”.

A reminder of the form route

So this is the route we will furnish with an app.post facility on our crush.js file. 

 

But before we go that far, we need to parse her request using the body-parser module.

 

The module was almost rusting from lack of use since we installed it. Now, let us get it to work by requiring it in our crush.js file and integrating it with our app via the app.use.

 

The body-parser middleware allows us to parse anything, including JSON, raw body, text, to URL-encoded forms.  

 

The JSON body parser exclusively parses JSON.

The JSON raw body parses just the body as a Buffer

The JSON text parses all bodies in string format.

The JSON URL-encoded form body parser parses just url-encoded bodies.

requiring and using the body-parser module

As seen above, for conciseness in this tutorial, we will stick with the URL-encoded variant. 

 

Next, setting the urlencoded to “extended: true” enables us to encode arrays and rich objects.

 

With this script, our server intelligently sorts data from my crush’s POST request.

 

Whatever she types into the input will be fed to the server as the “name” value. As a quick throwback, below is when we set the input’s name to answer in the index.html.

receive and parse POST node.js

By now, your heart should be thumping in anticipation of what answer she would give me.

We can create a variable named crushAnswer from this request data and tie it to the req.body.answer

Let’s assume she says “yes”, I want the server to tell her I just hired Oprah Winfrey to be her maid.

But let us not be too optimistic. What if my crush’s answer is not yes?

Hmm…I admit my first impulse is to have the server respond with the infamous GIF below😀

But nah…that would be too unromantic, wouldn’t it?

 

Let us presume she is yet to be swept off her feet by my 12-pack abs (yeah, it is biologically possible, buddy😜)…and she says, “I need to think about it”.

 

I want to invite her so we can discuss things over a cup of coffee.

 

For any other reply she gives me aside from these two, I want to tell her I will keep admiring her from a distance.

 

To combine these three possibilities, I would have to integrate if and else statements inside my app.post function.

 

Here is what the code would look like.

receive and parse POST node.js
Server response to my crush’s request

Below is a brief video of me typing in the designated responses and the corresponding server response.

 

Yay…I just got a hot Tinder match! 

 

Sorry, I will end the tutorial here as I have to brainstorm an irresistible pick-up line.😉


Check around later on to learn my crush’s answer…