In this simple introduction to Node.js, we will build a basic application controller which allows us to navigate between multiple routes, and render the appropriate HTML. This means that we will only be covering GET requests for the moment.
Let's start by creating a basic file structure for our application.
controllers
app_controller.js
views
about.html
index.html
app.js
Now we should create our views. Place the following markup in index.html.
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h1>Index</h1>
<a href="/about">About</a>
</body>
</html>
Next, place the following markup in about.html.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body>
<h1>About</h1>
<a href="/">Index</a>
</body>
</html>
Feel free to expand on these views. Just be sure that you have two distinct templates.
With our views complete, let's build our application controller. Place the following code in app_controller.js.
const fs = require("fs");
const appController = (request, response) => {
if (request.url === '/') {
fs.readFile("./views/index.html", (error, html) => {
if (error) throw error;
response.write(html);
return response.end();
});
}
if (request.url === "/about") {
fs.readFile("./views/about.html", (error, html) => {
if (error) throw error;
response.write(html);
return response.end();
});
}
}
module.exports = appController;
This code obviously doesn't follow the DRY principle, but that's okay for now. I should point out that there are surely much better practices, but the point here is to gain a basic understanding.
If you haven't guessed already, when we make a request to our server, the requested route will be stored in the url
property of the first parameter of our appController
function. Knowing this, we can implement separate logic for each requested route. In this example we are simply going to render index.html when the requested route is equal to '/'
, and about.html when the requested route is equal to "/about"
. We render the appropriate template by using fs.readFile
to get the contents, and response.write
to render the results. Finally we return response.end
to notify our server that an update is required.
Before we can see any results, we need to do one more thing. Let's create a server within app.js and pass our appController
to it.
Place the following code in app.js.
const http = require("http");
const controller = require("./controllers/app_controller");
http.createServer(controller).listen(3000);
Enter the following command in your terminal.
node app.js
Now visit localhost:3000
in your browser.
We did it! Note that you are able to navigate between the two routes, and that the appropriate template is rendered.
I hope that some of you were able to find this introduction helpful. I may decide to cover handling POST requests in the near future, although there really isn't much more to it.
Top comments (3)
i start with node js yesterday, great approach!
Awesome article!! I just started learning node and I believe this article will improve my nodeJS projects. Thanks for this.
Node is fun a must learn for any javascript developer who wants to level up.