[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:
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.
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.
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