Setting up your environment for JavaScript development – Part I

In this post we’ll go through the details of how to get started with JavaScript development on a Windows machine. We’ll cover the following stuff:

  1. Upgrade your command line
  2. Install Node.JS and NPM
  3. Install Git
  4. Install Bower
  5. Making your life easier by adding these to your PATH

1. Upgrade your command line

When you’re doing modern JS development you’ll spend lots of time at the command line. You will constantly need to run stuff like acquiring packages, unit tests, minification and the rest.

The Windows command line is capable of doing the job, you’re better off with a more advanced solution. I would recommend using ConEmu which is a great substitution of cmd. It can handle multiple tabs which is quite a life saver. Of course there are lot more features, be sure to check it out.

2. Install Node.JS and NPM

Although I won’t write much about Node.JS we will be using its packet manager NPM. The two are linked together in one download. Go over to the download page of Node.JS and get the proper version.

After the installation go to your %APPDATA% folder. If everything is set up properly you should see an npm folder there (the whole path is supposed to be Users/username/AppData/Roaming/npm). Add this npm folder to your PATH variable.

3. Install Git

Git is a distributed version control system which is pretty popular. Since lots of people are using it and most JS packages are maintained in git repos on GitHub we’ll be using it as well.

You can download git from Git-scm.com or just the GitHub client for Windows. Either way, make sure that git.exe is in your PATH.

After git is installed you can test it by just typing git in your console and see the help page emerge. Be sure to do this before you proceed, since Bower will be using git internally.

4. Install Bower

Bower is a package manager for client-side web development stuff. Although you’ll find lots of packages in NPM as well it is mainly intended to be used with Node.JS. To install Bower we will use NPM. Open up a command line and type the following command:

npm install -g bower

You might figure it out that this command installs Bower to your system. It’s very important to use the -g switch which means that the package is installed globally. It will be placed to the npm folder you just added to your PATH so you’ll be able to work with Bower ASAP.

To test if everything is working properly create a new folder somewhere, point your console to that folder and issue the following:

bower install jquery

If everything went well you should see a newly generated folder bower_components and within it the latest version of jQuery. But using Bower this way is not leveraging its full potential. You would get the packages but would not get the mobility.

You need to configure Bower by adding a bower.json file to your project root. This file will contain some information about your project, and all the packages that Bower needs to use. You can generate it using the

bower init

command. Don’t worry if you don’t understand something, just hit enter and Bower will use reasonable defaults.

The main point of interest in a bower.json file is the list of dependencies. There are two main types – normal and dev dependencies. Normal dependencies are everything that your final product uses and requires to function. Like jQuery or Bootstrap. Dev dependencies are stuff that you need to develop your application but the app doesn’t depend on them. Like Jasmine and Karma for unit testing.

You don’t need to edit your bower.json file by hand every time you add a new dependency. There are two switches that update this file. If you are adding a normal dependency then use the –save switch:

bower install jquery-ui --save

If you are adding a dev dependency then use the –save-dev switch:

bower install qunit --save-dev

Conclusion

Now you have a solid setup with all the necessary tools to start working on your project. Although we’re far from finished – part 2 will cover Grunt, the JS task runner, and part 3 will deal with the extensive options of unit testing JS code. Stay tuned!

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s