Building an Express/Node.js App with Angular 2 and the Twitter API

Welcome to my first technical blog post during my Cyrus Innovation Apprenticeship!

When deciding what to focus on for my first explanation of a technical topic, I determined that I wanted to write about unit testing with Jasmine. One of the most thorough lessons my mentor has instilled in me so far (even though I still occasionally mess up and forget…) is the importance of writing unit tests alongside while crafting the production code. I’ve read enough excellent treatises on TDD now to know that there’s no need for me to reiterate the benefits of unit testing and TDD here. I thought, however, that it would be a useful exercise for solidifying my understanding — and perhaps useful as well for other people who don’t have much experience with unit testing Javascript or Typescript — for me to write a basic introduction to the testing framework and methods that I’ve been learning about at work.

As I began to write my post on unit testing with Jasmine, including unit testing Angular 2, I decided to create a sample app in order to provide some context. Rather than only writing the client-side code, I wanted to try making an entire Express App with an Angular 2 front-end. I’ve worked with Node and Express some in the past, so it seemed like a good opportunity for a refresher. However, as I was working to set up my sample app, I ended up having to do a fair amount of fiddling to set up the Angular 2 project in conjunction with the Express server-side code. So I decided that before diving into my post about how to unit test the app with Jasmine, I’d first write a post about getting an Express App setup with Angular 2. Perhaps this was a little unnecessarily complicated, but I also wanted to play around with using an external web API, so my app uses the Twitter REST Api and will describe that setup a bit too.

Setting up the Express App

If you don’t already have npm and Node, there are install instructions here.

I used the Express generator for the initial setup for my app. Information here: npm express-generator. It provides all of the boilerplate necessary for getting an Express/Node.js app running. As I wanted to use Angular 2 for the front-end (instead of a templating setup like the generator includes), I deleted the “Views” folder and adapted the “app.js” to get rid of unnecessary code. I also npm installed and required “dotenv” (an npm package for working with environment variables easily). I created a “client” directory for all of my client-side Angular 2 code, and adapted the app.js code to look in that client directory for any static assets. Here’s the relevant portion of my adapted app.js file in the root of my project folder:

I also deleted the unnecessary “users” route code that the Express generator creates. As this is a small app, in its current form I only have one set of routes — the default “index” routes.

Working with the Twitter API

You’ll need to create a developer account for Twitter and generate API keys and tokens to use as well. There are easy-to-follow instructions in their documentation here.

Once you’ve generated the tokens, create a .env file and include the keys:

Be sure to include the .env file in your .gitignore so that you don’t share your API codes with anyone else.

NPM Twitter Library

I’m using an npm package called “Twitter” (“[a]n asynchronous client library for the Twitter REST and Streaming API’s”) — recommended by the Twitter Dev Docs — for interacting with the Twitter API. Information about npm twitter here.

Here are examples of setting up and working with the library to get data from Twitter (the top example shows the initialization and interacting with the REST api and the second example (lines 34–44) shows the Streaming api):

Setting Up the Angular 2 Front End

Inside my “client” directory, I set up an Angular 2 app. For this, I mainly followed the QuickStart instructions provided by Angular 2 here. In order to work with http requests in Angular 2, I also had to follow the instructions for setting up the Http Client — available here. At the bottom of the quick start page, Angular 2 provides templates for the index.html, systemjs.config.js, tsconfig.json, and typings.json. Be careful to pay attention to these even if you’ve worked with Angular 2 before, because things have changed somewhat substantially with the RC version release.

Overview

The main difficulties I encountered while setting up the structure of this app were 1.) Needing to make sure that the Express server was looking in the right place for the Angular 2 front-end code to serve. Solved by this line in my “app.js”:

app.use(express.static(path.join(__dirname, ‘client’)));

and 2.) Needing to make sure that my index.html file in my client folder was pointing to the correct paths for finding scripts (and adding in the systemjs.config.js file and linking to it in index.html — a change since the last Beta version):

To see more of the specific Angular 2 app that I’ve written and how it uses the Http Client to interact with my Express back end, you can view the entire repo on Github here. There is also a detailed README describing how to clone, setup, and run the project locally.

Now with the setup for our sample app presented, in my next post I’ll turn to writing unit tests in Jasmine for testing the Angular 2 front-end Typescript code.