Question

49

Spring Boot add HTML and JavaScript

rated 0 times [ 56] [ 7] / answers: 1 / hits: 101739 / 9 Years ago, wed, november 25, 2015, 12:00:00

I'm trying to run Spring boot app with some HTML5 and JavaScript and I have a problem.

I have project structure like this:

My Spring MVC Controller is calling file offer.html and that works ok.

My offer.html file look like this:

<!DOCTYPE html>

<html lang=en ng-app=coByTu>

<head>

    <title>Page</title>

    <script type=text/javascript src=../js/lib/angular.js />

    <script type=text/javascript src=../js/src/offer.js />

</head>

<body>



</body>

</html>

And when I'm typing my app URL http://localhost:8080/offerView

response from server is:

I have no idea why my app doesn't see this script files, could any one have any idea what i did wrong?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyaleenag

Add To Favorites

Follow

Total Points: 678

Total Questions: 121

Total Answers: 105

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

harleyaleenag questions

1 How to use redis client in nestjs?

Thu, May 5, 22, 00:00, 2 Years ago

1 After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thu, Oct 22, 20, 00:00, 4 Years ago

1 TypeScript type for value of key in object

Wed, Aug 19, 20, 00:00, 4 Years ago

1 GDPR: youtube-nocookie embedded URL's, need visitors' permission?

Tue, May 19, 20, 00:00, 4 Years ago

1 How to wait for fetch to complete before rendering page in React.js

Thu, Mar 5, 20, 00:00, 4 Years ago

View All

answered 9 Years ago mariselas · Accepted Answer

Basically all content that needs to be served staticly (such as javascript files) should be placed under the static folder.
https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

I've thrown together a quick working example to show how it is done:
https://github.com/ericbv/staticContentWithSpringBoot

File structure:

HTML file:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Page</title>

    <script type="text/javascript" th:src="@{/js/lib/angular.js}" />

    <script type="text/javascript" th:src="@{/js/src/offer.js}" />

</head>

<body>

Using th:src will make sure that the links are context aware

Edit:
added the th:src to make the references context aware