Brew is a package manager for OSX that allows easy installation of many developer libraries
- Open terminal, run:
ruby -e "$(curl –fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Press RETURN to continue Type your computer password (you won’t see the password when you type – just trust yourself!) - Then run:
brew update - Finally, make sure everything is ready by running: brew doctor You might need the latest Xcode if it shows Error: No such file or directory - /Library/Developer/CommandLineTools/usr/bin/clang
- Type in
brew --configto confirm you have the latest Xcode version 6.0 - If you don’t, Go to the Mac App Store and click Updates. You might need to do a Software Update if it says it’ll update your command line tools. Do an update for that.
- Next go back to the Mac App Store and search for Xcode and install the latest version of Xcode (6.0) by hitting ‘FREE”. This will take a while… it’s 2.5 GBs
- If this doesn’t work, you may also need to re-install homebrew. Do this by running the install command again and follow the instructions to uninstall, then re-install.
Node (npm) is the package manager for Javascript servers and tools. You can now use brew to install it:
- In terminal, run:
brew install node
Grunt is the package manager for javascript libraries. Use node (npm) to install it:
- In terminal, run:
npm install -g grunt-cli
Ember–cli is the easiest way to build and run ember apps. Use npm to install it:
- In terminal, run:
npm install -g ember-cli
Github for Mac is a user friendly app that makes using github really easy.
- Go to https://mac.github.com/ and install it on your machine
Our ads+data app kit uses all of the above technologies to bring the design language to life.
- Paste this link into your browser and hit enter: github-mac://openRepo/git@git.corp.yahoo.com:ember/embryo.git This will open Github for Mac, and prompt you to download the repository. Choose a location and clone!
We need to now download all the libraries. You can right click on the repository in Github for Mac to open this folder in Terminal:
- Once in terminal, run: npm install && bower install
We can now run the app!
- In the same terminal window, run: ember server
- After about 20-30 seconds, you can open your browser to see the app in action: http://localhost:4200
Feeling ambitious? You can now connect the Ads+Data Design Styleguide to this app and start making changes!
The style guide is where all of our CSS is stored, and apps everywhere reference it to get their design.
-
Paste this link into your browser: github-mac://openRepo/git@git.corp.yahoo.com:design/styleguide.git
-
Github for Mac will open. Hit the clone button, select the repository, and then switch to the branch libsass-compatible
Like step 7 above, right click on the repo and Open in Terminal. This time we will run different commands:
- In terminal, run:
bower link
Now we can link the style guide to the app kit, so that changes we make will reflect in our running app
- Right click on embryo in Github for Mac, Open in Terminal. Then run
bower link bootstrap-sass-official
That’s it! You can now make changes in the design CSS repository (under /sass/themes/yamp and /sass/yahoo) and they will reflect in the app kit. After each change, you will want to open /app/styles/app.less and resave the file to trigger the updates on localhost:4200.
I would also recommend using your favorite text editor for editing files. My favorite is http://atom.io from github.