Fullstack JavaScript Kickstart Part 1: Starting from Scratch

Hello World!

The Kickstart Series is intended to get student up and running without bogging down too much on theory. This series will explain all you need to know when you need to know it. If you ever get confused or lost, don’t worry, and explanation of what you just did will follow.

In this tutorial, we’re going to be looking into the basics of web development, one of the cornerstones of software development. We will be building a modern full-stack application using JavaScript. We will be creating a simple Twitter clone called “WatchDog”, that will teach you all the basics about how the web works, and how the modern web applications are constructed.

This tutorial is intended for students already familiar with the basics of HTML,CSS and a little bit of JavaScript. A basic understanding of Object Oriented Programming will also be good, but not necessary. Let me know in the comments below if you guys need a primer series on those.

So, let’s get started.

  1. Installation and setup.

JavaScript is a language that is intended to run on browsers (Like Chrome, and Safari). However, the language has evolved to run server-side as well. An implementation of JavaScript on server-side is called NodeJS.

Install NodeJS here.

In modern application development, you cannot be expected to write every feature you need from scratch. You need to be able to leverage pre-written libraries and frameworks to accelerate your development. But where do we get these libraries and frameworks from? With your NodeJS installation comes npm (Node Package Manager). Every package (which means libraries or frameworks) has a unique name, and can get installed through the use of npm on the command-line.

But before we can do that, we need to initialize our project with npm. So lets go ahead and do that. So on your terminal;

i) Make a folder called “watchdog”.

ii) Initialize the npm project (You will be asked a few questions, for now, just click “Enter” through it all).

iii) Install a package called “express”, the ‘save’ flag adds Express as a dependency (packages that a crucial for the application to run).

2. Review package.json

So now you have your first NodeJS app all set up. You will notice a few files and folder already added to you directory. One of which is the file called “package.json”.

A few things to notice here;

i) The “main” key has a value of “index.js”, which means the first file that is looked for when you run the server is “index.js”. If you don’t have a “index.js” file created, go ahead and make one.

ii) The “dependencies” key lists out all the necessary packages for this app to run. We have only added one so far, which is Express, a web application framework. This is important because when you pass around this project to other developers to work on, or want to deploy it in a server, the new machine will know what it needs to run the app without breaking.

3. The customary “Hello World”

Open “index.js” with any text editor of your choice. For this series I will be using Atom. Fill it up with these lines of code;

So what’s going on here?

(Bear in mind that it’s ok if you don’t fully understand this section, just go through it. By the end of this chapter you will, I promise).

i) We’re importing Express and instantiating that object as “app”.

ii) The object “app”, having coming from Express, has a function called “get()”. “get()” takes in two parameters, a route (denoted here as ‘/’) and a callback function ( denoted as function(req, res){…}).

iii) There are 2 parameters that the callback function takes, req (request), and res (response).

iv) “res” is an object by itself, which has a method called “send()”, which takes in any string as input.

v) “app.listen()” takes in a port number in which to serve this app.

4. Let’s serve.

While your in the same directory as “index.js” on your terminal, let’s install and run nodemon.

Nodemon allows us to run and monitor our application.

i) Install nodemon with the ‘-g’ flag with npm. ‘-g’ means install globally, once installed , nodemon will be able to run on any app.

ii) The command ‘nodemon’ runs your app. It looks for your “package.json”, then looks for the “main” key, sees what it points to (in our case it’s “index.js”) and runs that file.

Now head on to your web browser, and type in the following address;

Congratulations! You just ran your first NodeJS app.

5. Adding more routes.

So far we’ve written all our code in “index.js”. This is fine for a simple app, but as your app grows in features, using only the “index.js” can get messy. So in this section, we will be breaking the app down into multiple files.

So far our app says “Hello World” when you go to the root url of your app, at “http://localhost:3000”. The ‘/’ parameter we included earlier refers to the root. Now let’s add a few more routes.

i) Create a file called “routes.js” in the same directory as “index.js”

ii) Import Express, just like earlier, but this time we don’t want the whole express library to be instantiated as we did with “app = express()”. We only need the Router().

iii) Lines 4–6 should be familiar, instead of using “Hello World”, we’re sending back “This is my HOMEPAGE” when people visit the root URL.

iv) This is where it gets interesting, lines 8–10 are similar to the above, but this time we’re sending a different message to a different route (“/profile”).

v) When we initialized, router = express.Router(), we got an empty router object. We then configured the router with two messages at two different routes. The router object now contains this information.

vi) Finally we export the router object (line 12). This allows the updated object to be used outside of this file.

Clean up your “index.js” as such;

i) Import the router we exported earlier into “index.js”. It is now stores in a variable called ‘routes’(line 4).

ii) Use the router we imported as MIDDLEWARE - more on this later in a later chapter — by saying that when people go to ‘/’, start looking into routes for what to do. Pay close attention to the “use()” method.

The result;

Notice how we eliminated all code for routing away from the “index.js”. The “index.js” now serves one function, which is to hold all configurations to run the app and USE MIDDLEWARE.

You may or may not have heard of the term Model-View-Controller (MVC). It is a modern architecture for web development. I don’t want to bore you with the technicalities at this moment, but understand that what we just built is a simple CONTROLLER. In the app that we just built, CONTROLLER is the part of the app which determines “WHAT YOU SEE” based on your input (the URL). In future chapters you will see how the CONTROLLER can do much more.

In the next part of this series will be exploring another essential part of MVC, the V, which stands for VIEW. The VIEW layer determines how information is represented. The next part will be linked here when published.

So that’s all for this part, please leave your comments below if there are any doubts or opinions. Part 2 : What a Nice View will be up soon.
Thank You!