What do we need to start modern front-end development? Here's my setup (on Windows machine):

  1. Git for windows
  2. GitHub profile
  3. Cmder - console emulator
  4. Bash setup (.bashrc, .bash_aliases)
  5. Node.js (for npm) - javascript runtime
  6. Gulp - automated task runner
  7. Brackets - coding editor

That's it. Let's see how to install and configure this awesome open-source software!

1. Git for Windows

  1. Visit website www.git-scm.com.
  2. Click the "Downloads for Windows" button on the green monitor image.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default, just be sure to select "Use Git from the Windows Command Prompt" and "Checkout Windows-style, commit Unix-style line endings" options when prompted.

2. GitHub profile

  1. Visit website www.github.com.
  2. Choose your username, email and password.
  3. Click "Sign up for GitHub".
  4. When welcome page is displayed, click "Finish sign up" button.
  5. Check your inbox and verify your email addres (click on the link).
  6. I suggest connecting to GitHub via SSH protocol, for which you can follow these instructions: http://www.numencode.com/post/connect-to-github-via-ssh-protocol/

3. Cmder

  1. Visit website cmder.net and navigate to the Download section.
  2. Download Mini version, because you already have Git for Windows installed.
  3. When you receive ZIP archive, extract it to a Cmder folder inside your "Program Files" on your system disk (eg. C:\Program Files (x86)\Cmder).
  4. Run cmder.exe file and click "Unblock and Continue" when "Warning!" prompt window appears.
  5. Cmder should be running now. Right click the Cmder's titlebar and choose "Settings..." (or press Win - Alt - P) and the settings panel should open.
  6. On the left navigation select "Startup / Tasks" and click "Add default tasks..." button.
  7. On the "Predefined tasks" menu select {Bash::Git bash} and add text '-new_console:d:C:\www' where 'C:\www' is your working projects root folder (can be any folder you want). The whole setting should look like this:
    "%ConEmuDrive%\Program Files\Git\git-cmd.exe" --no-cd
    --command=usr/bin/bash.exe -l -i -new_console:d:C:\www
  8. Now select "Startup" element on the left navigation and select {Bash::Git bash} option on the "Specified named task".
  9. Click "Save settings" on the bottom right corner and you're set to go.

4. Bash setup

  1. Visit https://gist.github.com/numencode/3ce8d0f9b386ab2342ec0a0c2c5ff728 
  2. Download files .bashrc and .bash_aliases to your computer (Click "Raw" button, press Ctrl - S).
  3. Move the two files to your Windows user folder (eg: C:\Users\JohnDoe).
  4. Open file .bash_aliases with text editor and change alias 'www' to your own projects path.
  5. Check other aliases in file .bash_aliases and customize them if you like.
  6. Start Cmder and type any alias to see if it's working. If you go to any Git project folder, you should be able to see Git branch name.

5. Node.js and npm

  1. Visit website www.nodejs.org.
  2. Choose the green "Download for Windows" button - you can choose between a "LTS" (long-term-support) version or the latest one, where I suggest the "Current" one.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default.
  5. Once the installation is completed, open Cmder and test the Node and npm by running commands:
     node -v
    npm -v

6. Gulp - automated task runner

  1. Gulp can be installed with npm.
  2. Open Cmder and run the command
    npm install gulp -g
    which will install gulp globally to your computer.
    You might have to run Cmder as an administrator to take this action!
  3. Test Gulp installation by running command:
     gulp -v
  4. At the moment, version 4.0.0-alpha.2 can be installed locally for your project. I strongly suggest using Gulp4, for which you can follow these instructions: http://www.numencode.com/post/upgrade-gulp-to-v4/

Brackets - coding editor

  1. Visit website www.brackets.io.
  2. Click the link "Download Brackets without Extract" under the big blue Download button.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default.

Now it's time to install some great plugins for Brackets.

  1. Open Brackets editor and navigate to "File / Extension Manager..."
  2. You will see three tabs on the top (Available, Themes, Installed), choose "Themes" and search for "Coders Theme" which is really great.
  3. There's a lot of useful plugins to choose from on "Available" tab, from which I recommend these:
    • Bootstrap 3 Snippets
    • Bootstrap Skeleton
    • Brackets-Gulp
    • Color Highlighter
    • LESS StyleSheets Formatter (nm|tU)
    • LESSHints
    • Show Git Branch for project
    • Tabs - Custom Working