Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to serve static files in my web application on Tomcat

I have this servlet based web application project in eclipse and want to append some html tags like <script src="Chart.js">.

The folder structure is:

  • C:/apache-tomcat-7.0.53/
  • my workspace is in D:/../../workplace/CpdApplication/src/cpd/MyServlet.java
  • cpd contains: MyServlet.java, Chart.js and other files.
  • CpdApplication/WebContent/META-INF/web.xml

I have some path problems, and I can't resolve them, I searched over and over again and still not working, I get a 404 (Not Found) for http://localhost:8080/CpdApplication/Chart.js.

The problem is when I want to append <script src='Chart.js'></script>, Tomcat cannot resolve the Chart.js static file.

like image 209
que1326 Avatar asked Apr 09 '14 14:04

que1326


4 Answers

I have some path problems, and I can't resolve them, I searched over and over again and still not working, I get a 404 (Not Found) for .../CpdApplication/Chart.js

Indeed, when writing <script src="/Chart.js"/> you are telling the browser to make its own, separate HTTP request to get the JavaScript file. For this to work:

  • The servlet container needs to be able to serve static files
  • To this end, you need to have a servlet-mapping inside your web.xml to serve static files (ie. the default servlet).

This should do:

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/js/*</url-pattern>
</servlet-mapping>

Then place your Chart.js in the following folder: WebContent/js/ and it should work.

EDIT: Of course, you'll need to update the <script> tag in your HTML. Also, make sure that you redeploy your web app to update web.xml on your servlet container (Tomcat I presume).

like image 135
VH-NZZ Avatar answered Oct 17 '22 10:10

VH-NZZ


This is works for me. Thanks 沖原ハーベスト

welcome.jsp

  <head>
    <script src="resources/js/jsx/browser.min.js"></script>
    <script src="resources/js/react/react.min.js"></script>
    <script src="resources/js/react/react-dom.min.js"></script>
    <script src="resources/js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  </head>

File hierarchy tree

enter image description here

Web.xml

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/resources/*</url-pattern>
</servlet-mapping>
like image 24
Vahe Gharibyan Avatar answered Oct 17 '22 10:10

Vahe Gharibyan


It seems to me like Chart.js is stored in the same folder with your servlet source.

Usually you should have a structure like this one (I have simplified it):

/css/your-css.css
/js/your-script.js
/src/your-package/YourServlet.java

Whenever you run your application, your compiler creates a set of files that will be copied to your web container. The copied files do not include your src folder, but instead a copy of your built (compiled) classes. All other files (with some exceptions that we should not care about right now) must be outside your src folder in order to get copied.

Try moving your JS inside a js directory outside your src directory. Then, link it like this:

<script src='/Your-Context-Path/js/Chart.js'>

There must be a function to get your context path automatically, I think it is

ServletContext.getContextPath()

You can read about it here.

That should make the trick.

like image 35
Andres Avatar answered Oct 17 '22 11:10

Andres


As @Andy replied, you need to set all your resource (JS, CSS, images, etc.) in a folder in your application, then access to them using <context_path>/folder/to/your/resource/<resource_name>.<ext>. Here's a sample of how to do it:

  • Create a folder inside the root folder (usually named web or WebContent) of your web application with name res.
  • Inside res, create a folder called js to put all the JavaScript files there. You may create a css folder to handle all your CSS stylesheets, img for images, and on.
  • In your view, this mean, your JSP, you should access to your resources via context path.

This is how your application folders should look:

- WebContent
  - res
    - js
      Chart.js

In your JSP:

<script src="${request.contextPath}/res/js/Chart.js"></script>

Since you're creating the view content from your Servlet (a shoot on the foot, by the way), use request#getContextPath() to attach it:

"script src=\"" + request#getContextPath() + "/res/js/Chart.js\"></script>";
like image 2
Luiggi Mendoza Avatar answered Oct 17 '22 12:10

Luiggi Mendoza