Skip to content

Web Arena Setup Guide For Mac OS

Jump to bottom Edit New page
skyhit edited this page Dec 31, 2014 · 7 revisions

##1. VM Environment

Upon registration as a submitter or reviewer you will need to request an Arena VM in order to make Web Arena functioning properly. To request your image, please post in contest forum.

Before requesting your VM, you need to ensure that you have an SSH key created and in your member profile. Instructions to do so are here:

http://www.topcoder.com/wiki/display/projects/Generate+SSH+Key,

And instructions to connect afterwards are here:

http://www.topcoder.com/wiki/display/projects/Connect+Using+SSH+Key.

Once you get your VM IP, you need to add the following line in your hosts file as shown in section 2.13

<<vm-ip>>	tc.cloud.topcoder.com

##2. Deployment Instructions

  1. Go to http://nodejs.org/download and download Mac OS X Installer (.pkg) #Universal .

  2. Click the downloaded installer and install NodeJS on your system.

  3. Once the installation is done, open the command prompt and run following commands to verify the successful installation as shown below:

    a. node –v
    b. npm –v
    These commands should display version of the installed node and npm

  4. Next check if git is already installed or not (where in few Mac OS X versions, it comes by default)

a. Verify the installation by typing git in the Terminal as below (if it is not installed or not in the path it will print command not found):

b. So, If git is not installed by default with your OS X Version, just go to http://git-scm.com/download/mac and download Git installer. 

 If download didn’t start automatically, click “**click here to download manually**”. 
 You’ll be navigated to http://sourceforge.net/projects/git-osx-installer/files/ choose required version as per your choice and download **.dmg** file


 Upon clicking downloaded installer, you’ll see it getting mounted and opened up with the contents in it.


 Click .pkg file shown in it. If you see an error like this.


 Just do a right click on .pkg again, now click “Open” in that menu, you’ll see this

Now just click “Open” and continue through steps.

After finishing the setup, verify the installation by typing git in the Terminal as below (if it is not installed or not in the path it will print command not found):

  1. Go to a directory of choice where you want to check out the code from Github and run following command to clone the arena-web:

    git clone https://github.com/appirio-tech/arena-web

  2. Now you can go to the folder where you cloned the repository in step 5 & you should be able to see the source code in the arena-web folder.

  3. Next, install bower globally by running following command in the command prompt:

    npm install bower –g (add sudo if it prompts an error)

    Once bower is successfully installed you should be able to see screen something as below without any errors:

  4. Now install grunt-cli in the same way using following command:

    npm install grunt-cli –g (or npm install grunt-cli -g both are same)

    When grunt-cli is successfully installed you should be able to see screen something as below without any errors:

  5. Now to install all the dependencies, again go inside arena-web folder and run following command in the root directory where package.json is present:

    npm install

    If you are using bower for first time it may ask some additional parameters like report anonymous usage, press y or n based on your preference. Once everything is successfully installed, you should be able to see a screen as below without any errors:

  6. Now, open the Terminal and navigate to config folder inside arena-web. Run following command to set all configuration properties as the environment variables:

    . ./dev-local.sh (or source dev-local.sh)

** (if you see any permission error in executing it, give proper permissions to it and run again)** You can verify if variables are set, by simply printing any variable stated in script as above.

  1. Once above command succeeded, go to parent directory arena-web and run grunt in the same window. This will build the application.

    This will perform the following tasks: a. Clean the build directory. b. Populate config.js with the environment variables. c. Package all the JS code into a single file using Browserify and put it in build/js/bundle.js. d. Package and minify all css code into a single file using the cssmin grunt plugin, and put it in build/css/bundle.css. e. Copy all html and image file over to build.

    Also you we see a new build folder in arena-web directory if you are running it first time.

    Also, if you want 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.

    Also, you can jslint to validate the js files. For this purpose execute following command inside web-arena folder:
    grunt jslint

    This will validate all js files by grunt-contrib-jshint.

  2. Now edit the /etc/hosts file to map loopback IP 127.0.0.1 to arena.cloud.topcoder.com. Also map IP address of the Topcoder VM you asked in section 6 to tc.cloud.topcoder.com. Make sure your editor has administrator permissions, if not run it as administrator. Here I’ve used ‘sudo nano /etc/hosts’

##3. Run the application http-server, a simple static webserver, is one of the dev dependencies. To serve the app from the build directory on port 3000, simply run following command in arena-web folder:

npm start

Open your browser and go to http://arena.cloud.topcoder.com:3000 to access the application.

Add a custom footer
Add a custom sidebar
Clone this wiki locally