Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@fightingtheboss

fightingtheboss/fed-setup.md

Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fightingtheboss/84c0e23da219ea866e17 to your computer and use it in GitHub Desktop.
Save fightingtheboss/84c0e23da219ea866e17 to your computer and use it in GitHub Desktop.
Download ZIP
Front-End Development instructions for setting up Git, Node and Yeoman
Raw
fed-setup.md

Hey Bitmakers,

Now that we've covered the fundamentals of CSS, I'll be introducing the topic of CSS pre-processors, specifically Sass, that augment CSS with a bunch of superpowers, the use of which is more or less an industry best practice at this point. Here I'll provide steps to prepare your system for projects that use Sass for this class and beyond.

There are three pieces we'll need to get your system ready for Sass projects:

  1. Git is a free and open source distributed version control system that we'll depend on to track changes, back up and collaborate on code we write in class.

  2. NodeJS is a platform that allows us to run the V8 JavaScript engine, the very same one that the Chrome web browser uses to interpret JavaScript, on the command line on our computer. We need it to run some tools that will help us scaffold new projects and render our Sass files into regular CSS.

  3. Yeoman is a combination of three tools that will help you quickly create new projects with everything you need to get working on your prototypes quickly. The three tools are Yo, a scaffolding tool that will setup project directories and files for you, Grunt, a task runner, and Bower, a package manager that will fetch JavaScript and stylesheets from around the web for use in your project.

PRE-FLIGHT: THE COMMAND LINE INTERFACE

The command line interface is like the text-based version of Finder or Windows Explorer. It allows you to navigate your file system and run commands and programs by calling them by name rather than by clicking on icons. Before we get going with the course, if you're not familiar with using the command line interface of your operating system (as I'm sure most of you aren't), it'll be useful to learn the basics so that you'll feel more comfortable going forward with the course. This is one of the fundamental tools that developers use and some of the tools we'll be using in the course will require some basic familiarity with how it works.

To get up to speed, follow the tracks on this site, at least until you hit "Moving a file" (you can keep going if you want to learn more, obviously!). It shouldn't take too long and it'll be worth the investment.

To get setup, follow these steps:

WINDOWS USERS

You must be running at least Windows 7 for the software for this course to install properly

  1. Install Git
  • On the second step Adjusting your PATH Environment, select the second option (Run Git from the Windows Command Prompt)
  • Accept defaults everywhere else
  1. Install GitHub for Windows [OPTIONAL]
  • Accept all of the default options
  • This is a nice companion to the command line, it will give you graphical interface to your Git repositories
  1. Go to http://nodejs.org and click the big Install button to download the Windows installer
  2. Install NodeJS via the installer
  • Accept all of the default options
  1. Go to your command line
  • On Windows, open the Command Line by typing powershell in the Run box of the Start Menu (you can open the Run box by pressing WindowsKey+R). This will only work if you're running Windows 7 or later.
  1. Type npm install -g yo grunt-cli bower generator-bitmaker-prototyping and hit enter
  • You must be connected to the Internet for this step to work
  • You'll see a ton of output from doing this and it may take a little while

If you run into any problems you can ask us for help by emailing the Google Group or sending us a note at fed@bitmakerlabs.com

MAC & LINUX

  1. Go to your command line
  • On Mac and Linux, open the Terminal program (or iTerm if you've installed it). On Mac, you can use Spotlight (Cmd-Space) or find it in Applications -> Utilities -> Terminal.
  1. Run the following command at the command prompt:
  • Follow the instructions carefully throughout the installation
  • It may prompt you for your computer's login password once or twice
    • When typing your password on the command line, you won't see any text on the screen, but don't worry, it's accepting your password
  • Pay close attention to the output!
  • You must be connected to the Internet for this to work
  • Most Mac users will need to install Command Line Tools from the Apple Developer website. You'll need to login with your iTunes credentials and find the correct version of Command Line Tools for your version of OS X
    • You can find your version of OS X by clicking on the  icon at the top left and choosing 'About this Mac'
    • If you're running OS X 10.6.8 (Snow Leopard) or older, these instructions won't work for you! See us during class or office hours for help.

curl https://raw.githubusercontent.com/bitmakerlabs/front-end-development/master/install.sh | sh

If you run into any problems you can ask us for help by emailing the Google Group or sending us a note at fed@bitmakerlabs.com

ALMOST THERE!

As long as there are no errors, your system should now be ready to run a generator to setup a new project. There are a bunch of them out there, but they're often too complicated for our purposes. We've got a custom one made that creates a very basic project for us to work with.

Here are the final setup instructions for scaffolding out new projects. This is the workflow we'll be using from now on when developing with Sass. We'll discuss this in class and do the following steps together, these instructions are just for future reference.

Any time you're creating a new project

  1. Run the Bitmaker Prototyping Generator by running yo bitmaker-prototyping
  2. Answer the questions it asks you and watch it go!
  • Give your project a cool name or the generator will pick one at random for you
  • Accepting the defaults is probably a good way to start
  • At the end it will have created a project folder using your project name (it'll turn spaces into dashes and make it all lowercase)
  • Once it's done, switch into that project directory (cd <project-name>) and run grunt to get to work!
  1. Open that project directory in your editor of choice to take a look at what it created for you.

You'll find that all the files you need to edit are under an app/ directory in your project folder. You can safely ignore the rest of the stuff for now, it's just supporting files that help make the magic happen.

Now that the project is setup, run the grunt command at the command line to start up a server that will serve your page in a browser and watch for changes to your files. Whenever a file changes, the page in the browser will automatically reload.

We'll see how this helps us get up to speed quickly in class. Please try to get this setup done before coming to class as it will make our brief time together a lot smoother.

If you did run into errors or problems with the above instructions, send a message to the group and I'll work with you to sort it out. Sending it to the group allows anyone with similar problems to benefit from the responses. I've tested this out on both a Mac and an old Windows XP machine so hopefully everything will "just work".

As always, if you have problems with the above instructions or questions in general, don't hesitate to ask.

Mina

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment