Step by step tutorial on how to setup your Node.js project in Eclipse IDE

This tutorial shows you how to setup a professional web application project using Node.js and Express framework in a Eclipse IDE

Prerequisites

First Download and install Node.js on your machine if you haven’t already.

Then install Express framework using Node.js Command Line:
$ npm install -g express
Now Download Eclipse IDE for EE Developers, the Juno package from here. It can be any other Eclipse packages but I recommend using Eclipse EE Juno packages as it comes with many web development packages.

Eclipse IDE

Eclipse IDE

Install Node Eclipse

Update: node eclipse has a new eclipse IDE called Enide, prepackaged with all necessary softwares.

download Enide from¬†http://www.nodeclipse.org/enide/studio/2014/ and come back for rest of tutorial here to learn how to use it ūüôā

1. Drag and drop  into a running Eclipse (menu area) to install Nodeclipse. Or from Eclipse Menu click Help > Install new softwares

Eclipse Help Menu

Eclipse Help Menu

2.  Enter the update site URL into the Work with text Box: http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=1520853

UPDATE: for the latest version read this page http://www.nodeclipse.org/updates/ 

¬†Uncheck “Contact all updates site during install to find required software”¬†to make installation quicker.

InstallingNodeEclipse

InstallingNodeEclipse

You should see centre box filled with the list of plugins, first three are essential and the rest are optional. Select the appropriate and click next.

3. Review features and accept the licence.

4. You will be ask if you would like to restart Eclipse, click Restart Now.

5. After Eclipse restarts switch to Node perspective: menu > windows > open perspective > other and select Node perspective.

Creating a new Node Project

from Eclipse menu select: file > new > Node Express Project

newNodeProject

newNodeProject

Choose a name and location for your project and select a template for your your HTML files. You have two options of Jade template or ejs template. I recommend ejs but it is totally up to you. If you don’t have experience about these templates read more here:

EJS Template                 Jade Template

Select your template and click finish.

You should see Eclipse starts to add required library for everything shown in console panel as well as a nice structured Node.js app under Project Explorer panel.

Node.js App in Eclipse

Node.js App in Eclipse

In order to run the project as localhost we need to add a run configuration.

From Eclipse menu select: Run > Run Configurations

runConfigurations

run Configurations

Select Node Applications from Left side list and click on ‘add new configuration’ icon.

you should see the right side settings appears. Click on search and search for app.js which is our Node application in this project then click run.

On the console you should see a message like: Express server listening on port 3000

Now you can see your web app running on localhost port 3000

congratulations, you have your Node.js app running on: http://localhost:3000

Node Express App

Node Express App

Explaining Project Structure

If you are familiar with a Model View Controller (MVC) project structure, this is very similar to it.

Node Project Structure

Node Project Structure

  • Looking at the project explorer panel, from the top we have JavaScript resources folder. This is where all JavaScript libraries default to Eclipse is located.
  • Then we have public folder. This is where all the public files such as css and JavaScript files that anyone can access are located.
  • Next folder is ‘routes’. This is where you implement your routing system with their own functionalities.
  • Next is ‘Views’ folder where all the view files are located. Depending on your template system you choose when creating the new project it can be ejs file or jade files.
  • Then we have our core Node.js application functionalities inside the app.js file. This is the file that we run in order to run the applications.
  • Finally we have the package.json file which is our standard Node.js file for managing all the packages and libraries.

I hope this was useful. In next tutorial I will show you guys how to use this project and build a complex Node.js web app that is responsive to all devices using the famous twitter bootstrap.

Any question please leave a comment ūüôā