Skip to content

vpdb/website

Repository files navigation

VPDB

A database for Virtual Pinball tables.

Codeship Status BrowserStack Status Dependencies

This the code of the website. For the API, check out the server project.

Quick Start

Since the web application is completely decoupled from the server, you can easily run it locally and use api.vpdb.io as backend.

You're going to need to have Node.js and git installed.

  1. git clone https://github.com/vpdb/website vpdb-website
  2. cd vpdb-website
  3. npm install
  4. npm run serve:dev:prod
  5. Open http://localhost:3333 in browser.

Stack

The VPDB website uses a somewhat modernized stack of AngularJS using ES6 and Webpack. For markup, pug is used and Stylus for the styles.

Build Modes

Since the the website is separated from the server, you can choose any server to run with. Basically, when running the website, there are two factors:

  1. Which backend to use
  2. How to compile

There are two compilation options, prod and dev. The only difference is that prod minimizes and tree-shakes the code, resulting in a smaller bundle but longer compilation time. It also installs a service worker for pre-caching.

The most common ways to build are:

npm script Server Minify
serve:dev:local Development using local server localhost:3000 no
serve:dev:prod Development using production server api.vpdb.io no
serve:test Automated tests localhost:7357 yes
build:prod Build for production site api.vpdb.io yes
build:analyze Build and show bundle analysis n/a yes

All serve commands will hot-reload your code while you change files locally. You can easily add additional server end-points by creating a new VPDB config in the config folder and set the CONFIG environment variable accordingly.

Tests

Tests are end-to-end using Protractor through Codeship and BrowserStack. Test results of the latest CI run can be seen here. For more info about how tests and CI are set up, check this.

Running locally you'll need four terminals open.

  • Server: Git clone vpdb/server and install it according to the instructions. Then run it with npm run serve:protractor.
  • Website: This repo. Run npm run serve:test to spawn the web server.
  • Selenium: The Selenium server running the tests. First time: npm run selenium:init, then just npm run selenium.
  • Test runner: Finally, execute the tests with npm run test:local

Before tests, code is linted using ESLint.

Credits

IntelliJ IDEA

Thanks to JetBrains for their awesome IDE and support of the Open Source Community!

Sqreen | Runtime Application Protection

Then cheers to Sqreen for their excellent security services protecting our host at vpdb.io!

Finally, huge thanks to BrowserStack for offering free end-to-end testing for this project.

License

GPLv2, see LICENSE.