Skip to content
thinq4yourself edited this page Oct 15, 2014 · 7 revisions

Welcome to the HopStack wiki. This is where we begin to learn how to develop HopStack. To learn how to use it for your projects, please refer to the user documentation on our website at http://hopstack.io. Keep on crafting!

Cloud Environment Setup and Development

To be a complete badass, build like we build...in the cloud using the finest cloud IDE in the world...Codio.

  1. Create account on Codio and setup your cloud Dev environment: Codio Setup
  2. In your Codio Account preferences, [connect your Github account](ttps://codio.com/s/docs/settings-prefs/account-settings/public-key/ and upload your SSH key to Github. This unlocks your Git option in the Tools menu.
  3. Be sure that the correct Git remotes have been setup correctly. For quick reference:

origin = git@github.com:beardandfedora/hopstack.git

heroku = git@heroku.com:[your_heroku_app_name].git

  1. Run these box part comands to install require Development dependencies:

$ npm install

$ npm update

$ bower install

$ bower update

$ npm install -g grunt-cli

  • ** If Ruby is not installed, use the Tools->Install Software to install Ruby first

$ gem update

$ gem install compass

  1. Codio Notes: The codio setup file (.codio) has pre-built commands specific to this product, found in the run menu in the top bar (second to last menu). It includes quick commands for running tests, adding/committing to git, various grunt tasks, various bower tasks (including managing dependencies), Yeoman tasks, Coffeescript/LESS compiles, git deploys (ie - codio or heroku), etc. At any time, you can add new commands to this menu or the preview menu (last menu in nav), which launches the app in various ways on the local box/environment.
  2. Get to know the Codio cloud IDE, the CLI environment, and how boxes work.
  3. Preview live changes (using the Preview menu options), as configured in .codio config file
  4. Run the Test command from the run menu, as configured in .codio config file
  5. Deploy to the local Codio box using the Grunt Server command to see it running locally at port 3000
  6. Run Grunt Build from the run menu to build the project into ./dist for deployment
  7. Dance a dance of joy!
  8. Deploy

Local Environment Setup and Development

  • NOTE: NOT NECESSARY WITH CODIO (LOCAL ONLY)
  1. $ git pull origin master
  2. Build, create, test, and code things in the application directory ./client
  3. $ grunt test you wrote tests (because you are a craftsman), and this runs them before building
  4. $ grunt server to launch the built-in node web server, running angular app via LIVERELOAD on port 3000
  5. Verify the app launched - Done, without errors. Browser window will automatically open to localhost:3000
  6. In your terminal, type crtl+C to kill the Running "watch" task seen on the screen
  7. Fix, add, or remove some more code to make it awesome (assumes no errors prevented the build)
  8. $ grunt server to see how awesome it is now at [localhost:3000]http://localhost:3000)
  9. $ git add -all
  10. $ git commit -m "your commit notes"
  11. $ git push origin master
  12. OPTIONAL: For sysadmins, $ git push codio master to deploy to Codio dev
  13. OPTIONAL: For sysadmins, $ git push heroku master to deploy to Heroku stage

Codio Configuration (example)

{ // Configure your Run and Preview buttons here.

// Run button configuration

"commands": {

  `"Test": "grunt test",`
  `"Git Add": "git add --all",`
  `"Git Commit": "git commit -m",`
  `"Grunt": "grunt", `
  `"Grunt Server": "grunt server",`
  `"Grunt LESS": "grunt lessServer",`
  `"Grunt Build": "grunt build",`
  `"Grunt LESS Build": "grunt lessBuild",`
  `"Grunt Heroku: Dev": "grunt heroku:development",`
  `"Grunt Heroku: Prod": "grunt heroku:production",`
  
  `"Node version": "node --version"`

},

// Preview button configuration

"preview": {

  `"Client: index.html": "https://{{domain}}/client/index.html",`
  `"Dist: index.html": "https://{{domain}}//dist/index.html",`
    `"Main (static)": "https://{{domain}}/{{index}}",`
    `"Current File (static)": "https://{{domain}}/{{filepath}}",`
    `"Box URL": "http://{{domain}}:3000/",`
    `"Box URL SSL": "https://{{domain}}:9500/"`

} }

HopStack Application Details

Codebase

Bootstrap, Angular, Coffee, SASS, and lots more. See the Developer Live Docs for a full list

Github Origin Repo: git@github.com:beardandfedora/hopstack.git

Code: https://github.com/beardandfedora/hopstack

Download Source (branch: master): https://github.com/beardandfedora/hopstack/archive/master.zip

Fork: https://github.com/beardandfedora/hopstack/fork

Issues: https://github.com/beardandfedora/hopstack/issues

Milestones: https://github.com/beardandfedora/hopstack/issues/milestones

Pulse: https://github.com/beardandfedora/hopstack/pulse

Wiki: https://github.com/beardandfedora/hopstack/wiki