[topcoder] Arena for Single Round Match contests. Lightweight html/css/js interface built on angular and bootstrap. Single-page, responsive design approach.
To develop arena-web you'll need npm (installed as part of node). Then globally install bower and the grunt-cli:
Please execute following under root account or use sudo
npm install -g bower
npm install -g grunt-cli
Then clone this repo. Then to get all dependencies simply run:
npm install
Do all development in the app directory. Within that directory:
- Put custom css in
css/app.css - Put all images in
img/ - Put all javascript code in
jsusing whatever structure you want, but be sure everything is linked tojs/app.js. This file is the main entry point for the app.
Even though this is a client-side app, we still try to follow 12factor. As such as configuration variables are expected to be set as environment variables. The values will be substituted into the app/js/config.js file on build.
Source the environment variables:
source config/dev-local.sh
To build the client side app run:
grunt
This will perform the following tasks:
- Clean the
builddirectory. - Populate
config.jswith the environment variables. - Package all the JS code into a single file using Browserify and put it in
build/js/bundle.js. - Package and minify all css code into a single file using the cssmin grunt plugin, and put it in
build/css/bundle.css. - Copy all html and image file over to
build.
To release the app run:
grunt release
Release is similar to build, but it works out of the build directory and minifies all the javascript. It copies everything to release.
To use jslint validate the js files:
grunt jslint
This will validate all js files by grunt-contrib-jshint .
http-server, a simple static webserver, is one of the dev dependencies. To serve the app from the build directory on port 3000 on localhost simply use:
npm start