Setting up your environment A to Z

Introduction

In the previous series of articles, I explained about the different pieces required to get started with web development. This article will walk you through all the steps to go  from a blank machine to a full-fledged web development box. It will cover the installation of the different tools you will need, but will not get into the details of  what those tools do (see here) or how they work.

Preparing

The first thing I like to install on a new machine is Chocolatey. While not fully required, it makes life much easier. To install Chocolatey, open a PowerShell console as administrator. First, type:

Get-ExecutionPolicy

If you do not get Unresctricted or ByPass, type in:

Set-ExecutionPolicy Unrestricted

Once this is done, type:

iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))

This command will install Chocolatey. When finished, close the console and re-open it as administrator. Type the command:

choco

This should return something like:

chocolatey version

The tools

First, some command-line tools are required.

As you will be dealing with web packages, you will need Node and npm. To install those, type:

choco install nodejs.install

Close and re-open PowerShell as administrator, and type

npm -v

This should return something like:

npm -v

Now that npm is working, install Bower using

npm install -g bower

Close and re-open PowerShell as administrator, and type

bower -v

This should return something like:

bower -v

To get Bower to work, git is required. To install it:

choco install git

Close and re-open the PowerShell console, and type

git --version

This should return something like:

git --version

If you wish to use some pre-defined application scaffolders, Yeoman is an interesting option. To install yeoman, open a PowerShell console as administrator and type

npm install -g yo

Close and re-open the PowerShell console, and type

yo --version

This should return something like:

yo --version

The editor

After installing all required command line tools, it’s now time to install one (or several) editor(s). If you do not know which one to choose, check my other article. If you are undecided, try them out to make your opinion and see what you prefer.

Visual studio code

To install Code,  open a PowerShell console as administrator and type:

choco install visualstudiocode

Code is very young, and therefore does not have any plugin system or anything. So basically that’s all there is to to do to get it working.

Brackets

To install Brackets, open a PowerShell console as administrator and type:

choco install brackets

The great thing about Brackets is that it offers a lot of useful extensions allowing you to customize your IDE and make it work the way you want. To install extensions, go to File > Extension manager.

brackets

Following extensions are worth installing:

  • Beautify: allows to format your code (indentation, parentheses, etc.)
  • Brackets Bower: helps you to manage your bower dependencies directly from inside Brackets
  • Brackets CSS Class Code hint: provides intellisense on css classes from you css files in html files
  • Brackets Css Color Preview: previews the colors within css file
  • Brackets File Icons: displays icons according to file type in the tree view
  • Brackets Snippets (by edc): allows you to define your own code snippets
  • Documents Toolbar: adds a tab bar of opened document at the top of the window
  • Duplicate Files & Folders: adds some file management support in the tree view
  • Emmet: adds Emmet support to Brackets
  • File Tree Exclude: excludes some file sand folders (e.g. node_modules) from the tree view
  • Markdown Preview: adds preview of markdown files
  • Recent projects: displays recent projects under File
  • Whitespace Normalizer: normalizes spaces/tabs, end of line, etc.

Following extensions are specific to some tools/frameworks, but are great:

  • Angular Snippets: provides snippets for Angular (JavaScript)
  • AngularJS Code Hints: provides intellisense for Angular directives in html (ng-repeat, ng-if, etc.)
  • Brackets Git: integrates git
  • Brackets TypeScript: adds TypeScript Support
  • Brackets-Gulp: adds Gulp support

Visual Studio

My personal favourite, but I might be influenced by the fact that I come from a C# background, and thus knew the IDE already. It is also heavier than the previously mentioned editors. My advice would be to use Visual Studio if you already used it before, or if you are sure you will go on with web development on your machine.

To install Visual Studio Community, open a PowerShell console as administrator and type

choco install visualstudiocommunity2013

Visual Studio offer a wide range of extensions as well. Extensions can be installed via TOOLS > Extensions and updates…

VS2013

Following extensions will greatly improve your experience with web development in Visual Studio:

  • Package Intellisense: provides research for bower and npm packages via inetllisense in package.json and bower.json files
  • Web Essentials For Visual Studio 2013: offers a wide range of tools, such as auto-compilation of TypeScript files, less support, html intellisense for css classes, and a lot more
  • SideWaffle: offers a set of templates for projects and files for the most common web-related frameworks and application types

If you plan to use a task runner like Grunt or Gulp:

  • Task Runner Explorer: adds a window to run tasks directly inside Visual Studio

Besides NuGet extensions, following extensions are pretty useful:

  • Node tools for Visual Studio: offers a set of useful features to develop Node applications from inside Visual Studio
  • ReSharper: offers a lot of features such as code review, code style definition, naming conventions, refactoring, etc. ReSharper is not specific to web development, and is not free. But it really is worth the money according to me

Wrap-up

You still there? Wow, good job hanging in! I have some great news for you: you are now ready to get started!

If you want to peek at a working application to get familiar with your newly setup environment, I suggest you install the hottowel yeoman generator, and generate a hot towel application. You can then open that folder in your editor (Code/Brackets), or create a new project and include all files in it (Visual Studio).

 

Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: