Customizing Eclipse for Web Development

With the introduction of Android ADT bundle ,android installation has become an easy task as we can get both android and eclipse installed in a single step. But  now as we all now hybrid applications have started to rule the mobile application world, and hence handling javascript and HTML files using the same IDE what we are using for android development makes sense. Yes, eclipse can be customized for web development  by the following steps.

Step 1

Open eclipse. Click on Help menu. Select Install New Software. This would take us to the following screen.

Screenshot from 2014-03-19 23:09:18

Step 2

Click on add button. It would lead us to the screen placed below.

Screenshot from 2014-03-19 23:08:58

In the name field just give any repository name, for example –  web development.

for  location type the url to eclipse plugin site of appropriate version. Since I am working on eclipse juno,  the location field contains the following url:

Then press OK button. This will take us to the previous screen.

Step 3

The above step the make the plugins for juno version available for us. Now we need to choose the appropriate ones that meet our requirement. ie plugins for html javascript development. For this do the following steps.

Help ———> Install New Software

In the resulting window you can see Work With field. From its option list select the one we have just added, in the previous step. ( here web development – ). This will lead us to the following screen. Select the plugin for web development only.

Screenshot from 2014-03-22 13:48:42

Step 4

Now this selected option gives rise to a number of sub options. Choosing all sub options won’t be a good idea. Just choose only the required ( for html and javascript development)  plugins for the installation.

Select Eclipse Web Developer Tools and Javascript Development Tools.

Click Next button.

Screenshot from 2014-03-18 22:41:59

Step 5

Now we will get following screen.

Screenshot from 2014-03-18 22:42:17

Now click the Next Button and you can see  a screen like below.

Now accept the conditions.

Screenshot from 2014-03-18 22:43:12

Click on Finish button. and now you can see that the softwares are being installed.

Screenshot from 2014-03-18 22:43:28

Step 6

Now everything need for HTML and javascript development are installed in our eclipse.

just Restart the Eclipse

Creating first web project in Eclipse   

1. just go to File menu. Click new.

2. Click on Static Web project. If you don’t have such options just  click on Project and select Web and then click Static Web project.

3.  By default the Eclipse IDE would be in java perspective. We need to switch it to Web perspective. On the top right corner of the IDE you will be able to see Java and Web perspective options. Just click on the Web perspective, in order to make it active.


Now proceed with project creation and development just like what you have been doing in Eclipse for android or java.