Giter Site home page Giter Site logo

arena-web's Introduction

Arena Web

Overview

[topcoder] Arena for Single Round Match contests. Lightweight html/css/js interface built on angular and bootstrap. Single-page, responsive design approach.

Getting Setup

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

App Structure

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 js using whatever structure you want, but be sure everything is linked to js/app.js. This file is the main entry point for the app.

Configuration

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.

Build and Release

Source the environment variables:

source config/dev-local.sh

To build the client side app run:

grunt

This will perform the following tasks:

  1. Clean the build directory.
  2. Populate config.js with the environment variables.
  3. Package all the JS code into a single file using Browserify and put it in build/js/bundle.js.
  4. Package and minify all css code into a single file using the cssmin grunt plugin, and put it in build/css/bundle.css.
  5. 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 .

Run the App

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

arena-web's People

Contributors

skyhit avatar mdesiderio avatar amethystlei avatar flytoj2ee avatar renyu-io avatar dexyk avatar delemach avatar countcain avatar clevertension avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.