Create a Static web project using Eclipse

Introduction

Sometimes you just want to make a simple, static web page from HTML, CSS, and JavaScript.  No fancy server-side code; just a pure-client web page.

I’ve found a lot of tutorials, but none quite gave all the steps I needed to develop using Eclipse. So here they are.

Install the prerequisites

  1. Install and configure Eclipse for Java EE development (or a simpler Eclipse)

Create the web project

  1. In Eclipse,
  2. Select the menu item Window / Perspective / Open Perspective / Web
  3. In the upper-right of the Eclipse window, right-click on the tab labeled JavaEE and select Close. You won’t need the JavaEE Perspective, because you’re not developing server-side code.
  4. Select File / New / Static Web Project
  5. Choose a project name and type that.
  6. In the Target Runtime field, click the New Runtime… button
  7. Select Basic / HTTP Preview. It’s important that you select the Preview and not HTTP Server.
  8. Check (select) the box marked Create a new local server
  9. Click Finish
  10. Click Next
  11. For Context Root, choose the url prefix you want.  For example, if you type /mypages, your web pages will appear at http://localhost/mypages/…
    1. Note: you can’t leave this field blank
    2. Note 2: if you use / the web pages will appear at http://localhost//…  Note the double-slash.  That’s probably not what you want.
  12. Click Finish

Add your project to the web preview server

  1. In Eclipse, select Window / Show View / Server
  2. Right-click on the HTTP Preview server and select Add and Remove…
  3. In the resultant view, click on your project’s name
  4. Click Add
  5. Click Finish

Create your first web page

  1. In Eclipse,
  2. In the Project Explorer pane, expand your project tree so that the WebContent folder is visible
  3. Right-click on WebContent and select New / HTML File
  4. For File Name, type a name of your choice.  For example, hello.html
  5. Click Next
  6. Finish
  7. In the open html window, add a title and body
  8. Save the html file

Test your web page

  1. In the servers pane,
  2. Right-click on the HTTP Preview server and select Debug
  3. Browse to your html file: http://localhost:8080/MyWebPages/hello.html  The url of the file consists of
    1. http://localhost:8080 = the host and port the server is running on.  You can find the port number in the console output. Something like Started ServerConnector@7ae84a03{HTTP/1.1}{0.0.0.0:8080}
    2. MyWebPages = the Context Root you set earlier
    3. hello.html = the file name of your html file
  4. The browser should show the title and body that you added earlier.

Add more web content

Under the WebContent folder you can create more HTML, CSS, and Javascript files: Right-click on the WebContent folder and select:

  • For a Javascript file, New / Other… / Javascript / Javascript Source File
  • For a CSS file, New / Other… / Web / CSS File
  • For an HTML file, New / HTML File