*\ˈpa:siŋ* To be accepted as or believed to be, or to represent oneself successfully as, a member of an ethnic or religious group other than one's own, esp. one having higher social status; spec. (of a person of black ancestry in a racially segregated society) to be accepted as white.
These are the contents of this README:
- What's in here? — an introduction to the directories and files
- Getting Started — how to boostrap the project
- Running the App — how to run the project
- Learning More — links to more resources
What's in Here
This app was scaffolded with the
generator-webapp Yeoman generator. That generator creates a bunch of files, which can seem daunting and confusing. Hopefully this explains what the important things are and how it fits together.
package.json— this tells
npm(that's the Node Package Manager) how to manage the project's dependencies. When you run
npm install, the dependencies will be downloaded into a folder titled
bower.json— this is like
package.json, but it specifies the Bower dependencies. We use this to install things like Bourbon, Neat, jQuery, and jPlayer.
Now let's take a look inside of
index.html— this is the HTML file that powers the app. For this project, we just used a single HTML page, with no additional templates or frameworks.
styles/main.scss— this is the main Sass file that powers the project's stylesheet. It imports all of the other stylesheets in the folder, as well as Bourbon and Neat from the
bower_components(this happens because of this part of the Gruntfile). When the project is built, Grunt also compiles the Sass and autoprefixes the CSS.
Please note – this guide assumes you are using OS X. If you aren't, you hopefully know the equivalent commands to make these things happen. If you don't, find someone to help you!
1. Clone this project:
git clone email@example.com:northbynorthwestern/passing.git cd passing
2. Install Requirements
This project was built using
generator-webapp, so it requires you to have Node installed, as well as a few other things. If you already have Node installed, along with Bower, Grunt, Yeoman and Sass you can skip this step. If you don't have those things installed, that's awesome — let's install them!
To install Node, check out these instructions by the NPR Visuals team to get started (it's Chapter 3 of that page, but you should really read the whole thing). Once you have Node installed, you can install the other dependencies by running these commands.
npm install -g bower npm install -g grunt-cli npm install -g yo
-g means you are installing those modules globally on your machine, which means it doesn't matter which directory you are in. Contrast this command with a couple steps from now where we will use
npm install without the global flag, because we are installing that project's local dependencies.
You'll also need to have Sass installed. If you don't have it installed, it's as simple as:
sudo gem install sass
3. Install Project Dependencies
Once you have Node (and Bower and Grunt and Yeoman and Sass) installed (phew!), we can install the project's dependencies with this command:
npm install && bower install
You should see two new folders in your project,
bower_components where these files have been installed.
And that should be it! You're ready to run the app on your local machine.
Running the App
There are a few different terminal commands you can use build the app:
grunt serve- preview locally
grunt serve:dist- build and preview the distribution, locally
grunt build- build the distribution (without tests)
grunt- build the distribution (with tests)
grunt test- test the app
After running one of the
serve commands, the project will open up (automatically) in your browser at
http://localhost:9000. If you need to deploy the app, any one of the
build commands will create a directory in the project called
dist. You can just copy and paste the outputted files onto your webserver. (We uploaded them to an Amazon S3 bucket using Cyberduck).
Grunt compiles the Sass, minifies images, stylesheets and scripts, autoprefix your CSS, along with a host of other nifty little things to make the project load faster and automate development. To learn more about what each of these commands does, check
Gruntfile.js, in the project's root directory.
If you want to learn more about the tools we used to build this project, here are some good links.
Sass, Bourbon and Neat