Introduction

Recently I had the need to set up a small internal static site that interacted with a few remote services. I figured this to be an excellent opportunity to learn a bit about Node.js. This will be a three-part series setting up a Node.js/Express/React application.

My template/learning project is available on GitHub. I am a beginner at both the language(s) and the stack. Suggestions for improvements are welcome.

To follow along at home you will need to be running something reasonably UNIXy that supports Docker such as OSX or Linux. All these tools are available in Windows as well, but I can't help you with that. You will also need git, curl, docker, Node.js and npm installed.

Initial project structure

First up is setting up the git repository. I have opted for the following file structure:

Preparations

First, create the git repository to house our things:

The .gitignore file contains a list of patterns of files that should be ignored by git. Normally I like to create it by hand, but in the interest of learning new things I used the gitignore.io service to generate it.

The server

Next up is to create the actual server:

$ mkdir -p server/server
$ cd server

Fire up your favorite editor and create server/package.json:

You can also use npm init to generate the template and modify to suit. The server will use Express, so install it:

$ npm install --save --save-bundle express

The --save and --save-bundle options adds the package to the "dependencies" and "bundledDependencies" sections of package.json.

Create server/server/index.js:

Add the start script to package.json:

You should now have a functional server! To try it out, from the server/ directory, run npm start:

Try visiting http://localhost:8080/ in your browser or use curl:

$ curl http://localhost:8080/
Hello Node

Stop the server by pressing Ctrl-C.

Time to commit!

Testing

For no particular reason, I guess Mocha and Chai with the chai-http plugin would do for testing:

$ npm install --save-dev mocha chai chai-http

Create server/test/test-server.js:

Add the test script to our package.json, which should now look a bit like this:

Run the test with npm test!

Fancy! Let's commit this too.

Strunk and White

Let's make sure our code meets some standard. Which one doesn't really matter as long as it's consistent. For this, I use ESLint configured with the StandardJS configuration.

Add the eslint command to the npm test script:

Running it will reveal problems in the server test:

The first two issues is because the tests use symbols used by the testing framework, and the third is the lack of error handling. In general it's good practice, but in the tests we don't really want to pollute our code with such things.

Create a server/test/.eslintrc.json to override this:

Let's try again:

This is good!

Conclusion

We now have a very minimal web server with testing, style checking and code analysis. This is a good starting point for future endeavors.

Next up is adding the client side of things.