HTML5 Dev Gal

Messing with HTML5, CSS3 and JavaScript.

Getting Started

Table of Contents

Downloading And Installing Stuff

Download the following:

  • node.js installer
  • Heroku Toolbelt. This can take a while to install as files get downloaded during the process. If the installer seems to hang or freeze with a full progress bar, just wait a couple of minutes and it will continue.
  • Sublime Text

Then install your new stuff.

Setting Up Your Application Environment

  1. Go to your Documents or My Documents folder.
  2. Create a directory called app in Windows Explorer.

Adding ssh-keygen To Your PATH

There is an application called ssh-keygen installed with Heroku Toolbelt. Unfortunatly you can’t run it in your Command Window unless you tell Windows where to find it.

You do this by adding it’s location to the Windows PATH environment variable:

  1. Click the Start button on the bottem left corner of your screen. On the right side of the Start Menu you’ll see Computer. Right click on Computer and choose Properties from the pop-up / context menu.

    Computer PropertiesComputer Properties

  2. Click Advanced Systems Settings on the left.

    Advanced System SettingsAdvanced System Settings

  3. Click the Advanced tab and then the Environment Variables. . . button.

    Environment Variables ButtonEnvironment Variables Button

  4. Double click PATH (or it might be Path). It can either be listed under User variables or System variables.

    Double click PATHDouble click PATH

  5. Add C:\Program Files (x86)\Git\bin into the Variable Value. Make sure you separate the value with ;.

    Add pathAdd path

Install Your Web App

  1. In Windows Explorer, simply hold Shift and right-click on the app folder.
  2. Choose Open Command Window here

    Shift + Right-Click on folderShift + Right-Click on folder

  3. Your black DOS Command Window should now be open and the current directory will be the C:\Users\-YourUserName-\Documents\app directory.

    Command WindowCommand Window

  4. In the new Command Window type the commands shown below.

    When asked to type commands in the Command Window, make sure to press the enter key after every line and wait till each command task is compleated before entering the next line.

      npm install -g express –S
      express
      npm install
      node app
    

Open up a browser and visit http://localhost:3000/ to see your bare bones, node.js, express app.

Adding Style To Your Site …