In this tutorial we’ll build a game that interacts with the Twitter API and challenges users to match a given Tweet with its author. The game is called Following, and you can play the fully-built version of it here: http://followingapp.herokuapp.com.
The game’s front end is React, and its backend is Node with Express. In all, we’ll be using (and learning) the following technologies:
Back end: Node, Express, NPM, Twitter’s API, oAuth, Nodemon, Heroku
This tutorial is split into 7 parts, each released about a week apart:
- Project creation (you are here)
- Base webserver and communication with Twitter
- Data modeling and formatting
- The component in depth
- Managing the game lifecycle and scoring
- Deploying to Heroku
Ok! Without further ado, let’s dive right into section #1, project creation.
Create a folder for our project with a package.json
First we need to create a package.json file inside our game directory. This sets up the basic properties of our Node app, including npm commands (in the
scripts object) and all our dependencies. Do the same thing for our bower.json file, where we require our front-end packages. Don’t worry about researching each dependency right now, their use will become clear throughout the tutorial.
Install our command line utils globally
There are a few node packages that we need to install globally. These don’t go in our package.json file, we just install them manually:
npm install -g nodemon
npm install -g watchify
npm install -g express-generator
npm install -g bower
NPM install and Bower install
Now we’re ready to fetch our Node and Bower packages:
Generate the app with express
Express is Node framework that forms the basis of our application. It responds to web requests, maintains browser session, does all that basic plumbing that a web site or application needs. Express can generate all the initial files we need to be up and running:
express --ejs followingapp
We’ve almost got our basic app up and running. Back in package.json, we have a
scripts object; those are commands we can run. Running
npm run server will run our /bin/www file with nodemon. /bin/www is the entry point to start our web app, which nodemon runs. Nodemon will also restart our server every time we change a file, making sure we’re always serving the latest code.
npm run server
You should now be able to visit your app in a browser at the URL http://127.0.0.1:3000.
That’s it for this installment. Next week, we’ll continue setting up our webserver and add some communication with Twitter.