Setting up IDE for Node.js

Being a .Net developer I am used to using features like intellisense, debugging tools and integrated test runner. While there are extensions in Visual Studio to enhance these features, the default setup is quite rich and works out of the box.

However, it is not the same for Node.js environment. After trying out a few editors, I choose to use WebStorm from JetBrains. In this post, I will explain how to configure WebStorm for the following features:

  • Enable intellisense for external libraries (eg. ExpressJS)
  • Use code snippets
  • Auto run unit tests as code changes

Enable intellisense for ExpressJS

While WebStorm provides a decent intellisense support for the core libraries and code within the project, it doesn’t do the same for third party libraries by default.

To enable intellisense for a third party library, go to Preference > JavaScript > Libraries.

Since ExpressJS is not available on the list, we need to download it.

WebStorm officially support only few libraries. However, if you choose the TypeScript community stubs option, you will find a long list of libraries. From here we can download & install intellisense support for ExpressJS.

Code Snippets

One of my favourite feature in Visual Studio IDE was code snippets. Luckily WebStorm also provides the option to create new snippets.

To create a new code snippet, highlight the text and go to Tools > Save As Live Template... This will bring up the following window:

First, choose the shortcut for your snippet in the Abbreviation field. Next, replace the words with variables that you want to set dynamically. That’s it, we have our own code snippet.

Configure Test Runner

There are many test frameworks available in javascript. I find QUnitJasmine and Mocha are getting popular these days.

Here I will explain how we can configure WebStorm to run jasmine tests. Then, we will enable it to automatically run the tests when we make changes in source code.

Lets create a simple calculator project with the following folder structure:

Now, setting up karma to run tests is really simple. We need to create a config file to specify some details. The easiest way to do that is from the terminal.

Simply run the karma init command from the terminal and provide the inputs. It will generate the karma.conf.js file.

For this demo project, the inputs look like this:

Please note that if you are running this for the first time, you may need to install karma-cli. You can do that using npm install -g karma-cli

To run the tests, right click on the karma.conf.js file and select the Run option. This will run the tests and open up the test results window.

Now, we can also configure it to run the tests when we change the source code. To enable it, click the auto-run button below the Run button. The auto test delay can also be adjusted from the settings.

I hope this helps you configure your Node.js development environment. As I learn more, I will share my experience on managing the codebase in the coming days.

Creating Responsive and Mobile Friendly UI

Now a days smart phones and tablets are widely used for web browsing. At the same time, people are also using 4K displays and 27″ monitors. While these may be the two end of the spectrum, most laptop users are still using displays between 11″ and 17″.

Due to this dramatic change in screen real state, we not only need to adjust the amount of content visible on screen but often also need to reorganize the layout.

Recently I was developing a web application were I had to support all these screen sizes. At first, it looked like a lot of work. However, after doing some research I found Bootstrap. It is a front-end framework for developing responsive and mobile friendly UI.

Key features of Bootstrap:

  • Nice look & feel: It comes with nice fonts & icons out of the box. Also provies a standard color scheme for warning, error, info messages and buttons.
  • Well designed controls: Bootstrap themes generally comes with controls designed with css & html5 elements. UI controls like sliders, multi-select dropdowns or switch controls are available out of the box.
  • Responsive UI: The framework was designed with responsiveness in mind. Its provides a well designed css classes to easily adjust web contents depending on screen sizes.

Also it handles the browser specific css issues behind the scene just like jQuery does it for DOM manipulation.

I bought this theme from a store for $18 and implemented in just few days; something that otherwise would take weeks. And, since they all use the Bootstrap framework I could easily switch to a different theme.

Change IE version for the WPF Web Browser Control

While working on a desktop application, I found that the WPF WebBrowserControl by default renders the pages in IE7 mode. Even when we are running the application on a latest Windows machine (e.g. Windows 8 or Windows Server 2012), it still uses IE7.

The problem is, most of the latest HTML5 & CSS3 features won’t work in IE7 and it also has other rendering issues. Likely we can changes this from windows registry. However, as we will see shortly it is application specific and have to add an entry for each application.

Based on the OS version, we need to add a value in registry in the following path:

  • 32bit Windows: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION
  • 64bit Windows: HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION

The following screen shot shows how we can configure the the web browser control in “WebScanner.exe” to use IE10 instead of the default IE7.

We can also specify other IE versions. A full list of available IE versions and the values for the registry key is available here at msdn.

Installing marvel to use Sense

I recently started working with ElasticSearch for its awesome text search capability. It was pretty easy to install and there is almost no configuration required to get started. I explained the steps here.

To execute queries ElasticSearch provides a json based REST API. After trying out few tools like Postman, Curl, etc. I found Sense - a chrome plugin, probably the best tool/IDE to get started with ElasticSearch queries.

Unfortunately, Sense was recently removed from the Chrome Store. It is now part of marveland marvel is a commercial plugin for ElasticSearch. But still its free to try in development.

Installing marvel

Since I installed ElasticSearch using Homebrew, I can get the installation path using the following command:

brew info elasticsearch

The output should look like this:

In this case, we need to move to /usr/local/Cellar/elasticsearch/1.1.1/bin/ path. Then run plugin -i elasticsearch/marvel/latest to install marvel.

After installation, we can use the Sense tool from the following URL:
http://localhost:9200/_plugin/marvel/sense/index.html

One good thing is that we can use Sense from any browser now.

 

Get Started with ElasticSearch

ElasticSearch is a highly scalable search & analytics engine. It is an open source project build on top of Apache Lucene.

This post explains how to install ElasticSearch on Mac. Then it focuses basic insert, update and search operations using the REST API. ElasticSearch also runs on Windows machines.

Installation:

On a Mac machine, we can install ElasticSearch using Homebrew. Simply run the following command from Terminal:

brew install elasticsearch

Verify installation:

ElasticSearch comes with REST API. By default it uses port 9200. So we can test the installation by visiting http://localhost:9200 from any browser. If everything is installed properly, the output should look similar to the following screen shot.

Server Status

Communicating with ElasticSearch:

We can talk to ElasticSearch using it’s JSON based REST API. We could use any HTTP client like curl in command line, Fiddler, etc. However, for this tutorial I am using Sense – a Chrome pluginSense is a developer console for ElasticSearch.

The developer of Sense removed it from Chrome Store. It is now part of Marval, an ElasticSearch plugin. This post explains how to install Sense.

Basic Database operations:

We will use the following dataset of a few book titles and try out some basic database operations. First, we will create an index and insert the data into database. Then we will run a simple search, update and delete operation.

Title Author PublishDate Link
ElasticSearch Server Rafal Kuc; Marek Rogozin’ski Rafal Kuc; Marek Rogozin’ski http://…
Mastering ElasticSearch Oct 25, 2013 Rafal Kuc; Marek Rogozin’ski
ElasticSearch Cookbook Alberto Paro Dec 24, 2013
The LogStash Book James Turnbull Dec 22, 2013

Creating an index and inserting data:

An index in ElasticSearch is similar to a database in SQL Server. An index contains documents. A document can be compared to a row in a traditional SQL database.

We can insert a document using the HTTP PUT method. Since it is the first entry and we didn’t explicitly create the index, ElasticSearch will automatically create the index for us. You can download the create script from here and paste into Sense console. Now if we hover the mouse over the command, it will show a green play button. Click the green play button to execute each insert command.

Inserting data using Sense

Alternately, we could first create an index by sending a PUT request to the server with the index name. Then we could also create mapping (somewhat similar to a schema in SQL) to define fields. In such case, if the data contains additional fields, ElasticSearch will automatically update the mapping for us.

ElasticSearch provides a wide range of search functionalities. It has its won DSL (Domain Specific Language) to define queries. Right now, we are going to try out some basic search options.

At minimum, we can specify the search text as a query parameter. Lets run a search on books index for any match on “ElasticSearch”. As you see in the following screen shot, we can run the query from a browser. The response provides a number of additional information in JSON format including a “_score”. The value in score represents how closely it matches with the query.

In the same way, we could also get documents by ID. For example, a GET request to this URL “http://localhost:9200/books/book/1” would return JSON object representing the book with ID=1.

While we can run search queries from the browser, we should use the query DSL to utilize the full potential of ElasticSearch. This webcast nicely explains the query DSL. Lets run a match query using the DSL on the Sense plugin in Chrome:

As we type for a search query, the plugin shows useful hints to complete the query. The following query will run a full text search on the title field in books index to find any match for the word “ElasticSearch”.

Update & Delete:

We use the same PUT command to update a document as we do for insert. ElasticSearch inserts a document if it doesn’t exist already; otherwise it updates the properties and increments the version no#.

To delete a document, we need to send a HTTP DELETE request. For example, the following request will delete the book with ID = 4

What Next:

Now that we covered the steps on how to get up and running with ElasticSearch, I would like to focus on few specific features in the upcoming post. Some of my favorite features are FullText search, spelling suggestion and structure of the query DSL.