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

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

Update:

Node Eclipse is no longer supported and is not working for new versions of Eclipse.

The next best option is to use https://code.visualstudio.com/ for any node and front-end development.

But you can still use Node Eclipse in older version of Eclipse and it works great.

Download Node Eclipse from https://nodeclipse.github.io/updates/ 

Or

For your existing eclipse IDE

1. Start Eclipse (RECOMMENDED WAY: A BIT QUICKER).

2. Drag and drop   into a running Eclipse (menu area) to install Nodeclipse.

Installing Node Eclipse
Installing Node Eclipse

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, click Confirm and accept the licence then click on finish.

4. Installation will take a while and then 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 šŸ™‚