KnownForWeb

The UI for "Known For", a simple, movie-based guessing game.

Background

My cousin Alex suggested this game, originally just looking an actor up on IMDb and asking the other person to guess which top three films they were "known for". Having built aTMDb and as I'm currently using Angular 2 at work, I thought this would make a nice little web app.

Development

This project was generated with @angular/cli. The easiest way to get it up and running is:

• Fork and clone the repository
• Run npm install to pull in the required packages
• Run npm run pree2e to update the webdriver for end-to-end testing
• Install the CLI globally using npm install -g @angular/cli
• Set the apiBaseUrl in src/environments/environment.dev.ts to an appropriate value (see the instructions on known-for-api to get that running locally using e.g. PCF Dev or Docker)
• Run ng serve to boot up the dev server
• Point your browser at http://localhost:4200

For more information see the CLI documentation.

Docker

Alternatively, both the front- and back-end projects have Dockerfiles, so you can use Docker to spin up either or both. A docker-compose.yml is provided to easily allow you to run the pair simultaneously as follows:

cd <wherever>/known-for-api
docker build -t known-for/api:latest .
cd <wherever>/known-for-web
docker build -t known-for/web:latest .
export TMDB_API_TOKEN=<whatever>
docker-compose up

As above, this will make the app available on http://localhost:4200, as well as exposing the API on http://localhost:8080. See known-for-api for more information on installation and configuration.

Testing

The CLI provides commands for linting, unit tests and end-to-end tests. The last of these I prefer to run directly, as the CLI seems to suppress the output:

• ng lint to run the linter
• ng test to run the unit tests (add --watch false to run once and then stop)
• npm run e2e to run the end-to-end tests (or ng e2e if you don't mind the output)

Deployment

You can build in production mode with npm run package; make sure you have set an appropriate API endpoint for the staging mode (see src/environments/environment.stage.ts), as this is currently used by the package command.

The project includes a manifest.yml for deployment to Cloud Foundry, as the staging site is currently hosted on Pivotal Cloud Foundry. This is as simple as installing the CF CLI, setting the target org and space appropriately and running cf push.

The CLI also provides functionality to deploy to GitHub Pages, although I haven't yet tried it: ng github-pages:deploy.