Intro
This is the first in a series of articles which will demonstrate how to set up a complete Full Stack JavaScript environment. In this article we will cover how to get a simple “Hello World” server up and running on your localhost. This article will cover both setting up both a Node server using both Hapi and Express, because it is very similar in both frameworks. The ultimate goal of this series of articles is to be a useful tool for developers who know how to develop in jQuery and JavaScript, but have never had to setup their own development environment and would like to be able to do so.
Before Starting
To follow along with these articles, it is necessary to have both npm and Node installed. There are plenty of easy tutorials to install the two technologies. I would recommend downloading Node from their website. The download also includes a copy of npm. It’s also helpful to have a Version Control System as you follow along with the steps of the article such as Github. Finally, there are copies of the fully finished tutorial code available on Github for both the Hapi setup and the Express setup.
Package.json Setup
The first step to starting our JavaScript project is to setup our package.json file. To do this, first navigate to your project’s main folder in the terminal. For future reference, all of the terminal commands in this article will be entered under the home folder of the project.
Next, enter the command “npm init” into the terminal to initialize the Node Package Manager. This will be followed by a series of prompts asking for basic information about the project. After completing the prompts, you should be able to see a package.json file in your project that looks something like this:
{ "name": "node-server-setup-express", "version": "1.0.0", "description": "", "main": "server.js", "dependencies": {}, "devDependencies": {}, "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "node server.js" }, "repository": { "type": "git", "url": "https://github.com/alexhoffman617/node-server-setup-express" }, "author": "Alex Hoffman", "license": "ISC", "bugs": { "url": "https://github.com/alexhoffman617/node-server-setup-express/issues" }, "homepage": "https://github.com/alexhoffman617/node-server-setup-express" }
The most important part of the JSON is the dependencies section. This is empty right now, but after we install either the hapi or express dependencies, the specific version of the libraries will be displayed there.
Including Hapi or Express
The next step in the process is to download the plugin of choice and include it in our project. To do this, navigate into your project’s folder in the terminal and enter the command:
npm install express --save
This command tells npm to install the express package. If you want hapi instead, just replace “express” with “hapi”. You should see a list of modules being installed appear under your command in the terminal.
At completion, you should see two changes in your project. First, you should now see a new folder in your project called node_modules. Inside this folder you should see either a hapi or express folder depending on which package you chose to install. Also, if you navigate to package.json, you should now see your dependencies has gone from empty to including your plugin and its version:
"dependencies": { "express": "^4.12.3" },
This was because we used the –save qualifier, which tells npm to include the information in the package.json file. In the future, if this code were to be downloaded onto another machine, all that would be necessary is to run “npm install”, which downloads all the dependencies included in the package.json file.
Running Server.js with Node
Now we’re ready to try running node. Create a new file, “server.js,” in your projects folder and add the following code to it:
console.log('Node is running. Yay!');
This is a simple command to display a message if node is running properly. Next, input the following command into the terminal:
node server.js
This tells node to run our server.js file*. If everything is set up correctly we should see our message displayed in the terminal under our command.
Now lets make sure that our plugin is installed properly as well. In server.js above our console log command, input one of the the following lines (based on which plugin you chose):
var express = require('express');
var hapi = require('hapi');
Also change your message from ‘Node is running. Yay!’ to ‘Node is running with a plugin. Yay!!!’ Once again run server.js from the terminal. If everything is working properly, the new message should be displayed.
*Note: At any point Ctrl+C will kill your node code
Running A Working Server
Now we are ready to get our server up and running. Change your server.js to one of the following:
var express = require('express'); var app = express(); var server = app.listen(3000, function () { var port = server.address().port; console.log('Sever started at http://localhost:%s', port); });
var hapi = require('hapi') var server = new hapi.Server(); server.connection( { port: 3000, address: 'localhost'}); server.start(function() { console.log('Server started at http://localhost:' + server.info.uri); });
In both cases, the code starts a server and sets it to listen locally at port 3000. Next, it logs the location of the sever in the terminal once it starts.
Now you are ready to run your server.js from the terminal. You should see a message in the terminal saying ‘Server started at http://localhost:3000’. Now navigate to http://localhost:3000. You should see a message ‘Cannot GET /’. This indicates that our server is running and pointed at the 3000 port, but that there is no GET method waiting for our request.
Getting A Simple Route Working
In order to resolve the ‘Cannot GET /’ error message, we must configure our app to accept HTTP GET requests at the base route. Lets add a simple route command to display a message at the base route by adding the following code into our sever.js file above the server start/listen line:
/** Express */ app.get('/', function (req, res) { res.send('Hello World!'); });
/** Hapi */ var apiRoutes = [ { method: 'GET', path: '/', handler: function (request, reply) { reply('Hello World!'); } } ]; server.route(apiRoutes);
In both cases, the code tells the server that on a GET with a blank route(‘/’) reply with the message ‘Hello World!’ Now try running the server again with the added code and navigate to http://localhost:3000. This time you should see ‘Hello World!’ in the place of the ‘Cannot GET /’ message.
Conclusion
Congratulations! You now have a node server up and running. Getting node, npm, and a routing plugin setup is the first major step in starting your Full Stack JavaScript setup. If you have had any trouble with any of the steps, check your code against the Github repos provided earlier in the article to see if you have any mistakes. The next article will go deeper into routing and how to get real HTML/JavaScript code working on your sever.