How Can I Jump into the Back-End?

Feeling pretty comfortable on the front-end are you? Floating those divs around, creating user interfaces with your caveman-like users in mind and consuming data from APIs all while managing the overall style and feel of your site/app? I would argue the front end is the place to be as of late, what with the number of frameworks competing for dominance, javascript’s break-neck pace towards… well, something or rather many somethings, and CSS pre-processors and styled components are making CSS more fun (manageable, at least).

You see, I work at a bootcamp part time, teaching people the fundamentals of front-end web development but at some point, I try to (really, I need to) expose them to Node in order to use Angular’s NgRoute library (Yeah, still using Angular, shut your pie hole…). Navigating the terminal, NPM packages, Express?! The class typically loses their shit for a bit, psyching themselves out that the boilerplate code we’re going to use to spin up a web server is any more difficult than using Bootstrap’s 12-column grid system.

The back-end can seem like a foreign magical place, and writing code that lives on the server that we can’t ‘see’ feels a little weird. What is Node anyway?

Well Node is a runtime engine that allows you to write JS as server side code, perform input/output operations and handle requests asynchronously… well, what the fuck does that mean exactly? Let’s say I’m a teacher with three students asking questions, a multi-thread based server (like Apache) style of handling these questions from students would be to answer one question from a student, then move to the next and so forth. Node throws all that shit out the window and would have this teacher taking in all three questions simultaneously on it’s single thread, and using call backs (passing functions) to execute these requests and return answers to students as it retrieves them.

This single-threaded system and the event loop is why so many devs and uuuge companies are using Node. Here’s why you should use it: spinning up a web server is dead simple (I’ll post the code down below) and you can begin creating routes and simple APIs quickly by using Express, an NPM package. NPM or Node Package Manager allows you to easily download open source libraries from all over and save them locally to your project.

Fuck it, let’s make a quick server with node, you ready? Ok first get Node. Create a basic file structure (HTML, CSS and JS files) and now add a server file.

First thing you wanna do is navigate to your project in the terminal.

Run npm init and say ‘yes’ to all those questions they ask. This will create a package json file which will keep track of all your dependencies or downloads.

Next npm install express --save to install Express and save it to this project folder.

Ok sick brah. You’re so close to backend stardom.

Make yourself a server file, and call it `server.js`

Now paste this goddamned code:


var express = require('express');
var app = express();

//serve the files on local server
app.use(express.static(__dirname + '/'));
app.listen(process.env.PORT || 3000);

//api route
app.get('/getjson', function(req, res){

var brian = {
name: 'Brian',
job: 'Developer'
}

res.send(brian);
})

In this code, we’ve started our Express engine, told it to listen on port 3000 for incoming requests (or whatever the process environment port is if you decide to throw this thing up on a ‘real’ server and use whatever port it decides) and then serve the html file at the root of your project, hence the `/` in the code. If your HTML file was in a folder called ‘public’ you would have put `/public`

Now, to start this puppy up, node server.js to run this project on Node and then travel to localhost:3000 to see you project in action.

As a bonus, I’ve created an API route so when you go to localhost:3000/getjson, you will see some sweet JSON telling you more about me. In just a few lines of code, we’ve created a route to serve a static file and one to return JSON. See, not so bad.

Hit me up with any questions and hope you feel a little better in back-end land.

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s