Welcome to PicoCoder.io! This is the first part of a bigger tutorial, which will teach you how to create a Node.js, Express website using templating engines such as Handelbars. (Don't worry if you don't understand any of this for now). By the end of this chapter you will have a simple Express app running on your machine.


Table of Contents:


You can find the final result of this chapter in Github.

Prerequisites: NPM and Node.js

There are many ways to install NPM and Node in your machine. If you are using an Apple computer, I would recommend to install everything from Homebrew. You can check here how to install Homebrew on Mac.

Step 1: Install Hombrew.

Step 2: Install Node using Homebrew by typing in your terminal. When you install Node, NPM should installed automatically on your machine as well.

brew install node

Step 3: Check if you have Node and NPM installed on your machine.

node -v and npm -v

Checking if Node and NPM are installed.

This is all the prerequisites that we need for this part of the Pico Tutorial. The Only thing we need next is a nice text editor. Some of the most popular in the industry is Microsoft's VScode, Sublime text, vim etc. My personal preference is VScode.

The 'Hello world!' Express application.

Let's create a folder in your preferred directory to include all the files needed for this tutorial. In your terminal type mkdir picoblog. This will create a directory called, picoblog. Then navigate to that directory by doing cd picoblog.

Now that you are inside of the correct directory you can do npm init to create a package.json file which is a file that helps us manage external libraries and automating some of the tasks such as running our application. By doing npm init, it will ask you stuff like package name, version etc. You can just press enter and leave the default options. The only thing I changed, is the entry point to be called, app.js.

Terminal commands for setting up our project.

Opening the package.json in your text editor you will see something like this.

{
  "name": "picoblog",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now we have to install Express. In order to do that, we can do npm install express or npm i express which is doing the exact same thing. This will install express and add that information to package.json file.

{
  "name": "picoblog",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4"
  }
}

As you can see, now we have a property called dependencies in our package.json file. If you don't understand what the package.json file does, do not worry for now. However, you can find more information here.

Just to be sure that everything is correct so far, here is the project structure.

microblog/
	node_modules/
	package.json
	package-lock.json

The directory node_modules and package-lock.json file are created automatically when you installed Express.

Now let's create a file called app.js, paste this code and save it.

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Server listening at: ${port}!`));

Now the project structure should contain app.js file as well.

microblog/
	node_modules/
	app.js
	package.json
	package-lock.json

Lets, see what each line means.

Lines:

1. Importing the Express framework that we installed earlier.

2. Initializing Express.

3. Setting up the port to start the server on port 3000.

4. Using this function, we are telling Express that, when the request is of a type GET and in localhost:3000 then send back the 'Hello World!' text.

5. Start the server at the specified port and also print in our console (terminal) which port the server is running. So, now when you do node app.js the server should start and print on your console Server listening at: 3000!. Open your web browser and navigate to localhost:3000. You should see the 'Hello World!' message displayed.

If you are having issues following this tutorial you can download the code from Github. Here is the repository with everything you will need and the tag for this specific chapter is v0.1.

Congratulations, you have completed the first part of this tutorial and you are now one step closer to build a website using Node.js and Express.