Java – Spring boot not serving static content (angular-cli) to serve app on tomcat

javaspringspring-bootspring-mvctomcat

I am struggling with an issue where spring-boot isn't serving front-end files(created through angular) on 8080. I ran ng build that converted .ts ng component files to .js and generated in outputPath:/resource/static folder( I set outputPath in angular.json file).
Created a controller to serve content from resources/static.

    @Controller
    public class AppController {
        @GetMapping("/")
        public String index() {
            return "index";
        }
     }

main class (src/mainjava/webapp/app):

@Configuration
@EnableAutoConfiguration
@ComponentScan({"webapp"})
public class Application extends WebMvcAutoConfiguration {

    public static void main(String[] args) {
    SpringApplication app = new SpringApplication(Application.class);
    app.run(args);
}
}

Ran ng build --base-href . generates files as shown in below image.

index.html :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Welcome app</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

Note: This is a gradle project.Front-end code resides in : src/main/java/webapp/frontend dir

Application.yml in /resources

server:
  servlet:
    context-path: /
  port: 8080

On tomcat start:

Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
2018-09-13 12:45:34.372  INFO 96027 --- [           main] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
2018-09-13 12:45:34.384  INFO 96027 --- [           main] .m.m.a.ExceptionHandlerExceptionResolver : Detected @ExceptionHandler methods in exceptionHandle
2018-09-13 12:45:34.405  INFO 96027 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page: class path resource [static/index.html]
2018-09-13 12:45:34.566  INFO 96027 --- [           main] o.s.j.e.a.AnnotationMBeanExporter        : Registering beans for JMX exposure on startup
2018-09-13 12:45:34.568  INFO 96027 --- [           main] o.s.j.e.a.AnnotationMBeanExporter        : Bean with name 'dataSource' has been autodetected for JMX exposure
2018-09-13 12:45:34.575  INFO 96027 --- [           main] o.s.j.e.a.AnnotationMBeanExporter        : Located MBean 'dataSource': registering with JMX server as MBean [com.zaxxer.hikari:name=dataSource,type=HikariDataSource]
2018-09-13 12:45:34.620  INFO 96027 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''

I even tried adding html file under /resources to see if tomcat serves any contents from this folder. I can't access page1.html as well so not sure how would angular/ng content be different that it can't serve when tomcat is up and running.

resources/static

Do I need any other configuration to have spring-boot serve angular frontend code? Any suggestion is appreciated.

@DavidT Answers to your Ques:

Yes in
build.gradle:compile('org.springframework.boot:spring-boot-starter-web:2.0.2.RELEASE')
static content here:
MYPROJECT/MYPROJECT-web/src/main/resources/static/
Since spring-boot didn't pick angular static content from path, I
referred online resources that suggested to add a controller
specifically to serve it. [I have 3 ng components accessible-
login: http://localhost:4200/,home: http://localhost:4200/home,sale:http://localhost:4200/sale. But
to access on tomcat port I thought to put files under static; rest
angular will take care of routing.]
When run ng build from frotnend dir, generates angular files under frontend/src dir. Either I can manually copy, paste manually to put in static folder or change outputPath to point to resources/static in angular.json which directly put it there on running ng build cmd. Exact
files in above resources/static screenshot.
I haven't used javascript console but opening index.html with browser
option from IntellijIdea, inspect on webpage I see error-

Refused to execute script from '' because its MIME type
('text/html') is not executable, and strict MIME type checking is
enabled.

Replacing <script type to "text/html" removes these errors from inspect but still no UI on http://localhost:8080/.

The strange part is when I pasted the same index.html file from that demo project to mine in static folder, it doesn't display anything when browsed to http://localhost:8080. But noticed when open this file from browser option in IntellijIdea (this URI in browser: http://localhost:63342/MY-PROJ/MY-PROJ-WEB-main/static/index.html , then it shows the content

Is <base href="/"> an issue or scripts tags?

Best Answer

Steps to success without being complicated like in the link above:

Went to https://start.spring.io/
Selected a gradle project
Added Web dependency
Downloaded and unarchived the result (didn’t change name from demo)
Create: demo/src/main/resources/static/index.html with the following contents:
```
<html><body>YOU ARE IN!</body></html>
```
Issue the following in the demo directory to run your application: ./gradlew bootRun
Open a browser and go to http://localhost:8080/

You now have proof that putting something into MY PROJECT/src/main/resources/static/ will produce the contents of your HTML file.

So I have the following questions:

Did you add SpringMVC into your spring boot project using something like compile('org.springframework.boot:spring-boot-starter-web')?
Did you put your static content into MY PROJECT/src/main/resources/static/?
Why do you need a controller to serve static content if one is provided for you? Especially one that is mapped to /?
Is angular putting *.html files into MY PROJECT/src/main/resources/static/?
What does the javascript console say? Is runtime.js found?

Please see https://spring.io/guides/gs/serving-web-content/ in section Add a Home Page

Please see https://stackoverflow.com/questions/24661289/spring-boot-not-serving-static-content content for other ideas of what not to do (and why).

This was originally posted on https://www.quora.com/How-can-spring-boot-serve-angular-static-files/answer/David-Talalayevsky

Related Solutions

Spring Boot not serving static content

Not to raise the dead after more than a year, but all the previous answers miss some crucial points:

@EnableWebMvc on your class will disable org.springframework.boot.autoconfigure.web.WebMvcAutoConfiguration. That's fine if you want complete control but otherwise, it's a problem.
There's no need to write any code to add another location for static resources in addition to what is already provided. Looking at org.springframework.boot.autoconfigure.web.ResourceProperties from v1.3.0.RELEASE, I see a field staticLocations that can be configured in the application.properties. Here's a snippet from the source:
```
/**
 * Locations of static resources. Defaults to classpath:[/META-INF/resources/,
 * /resources/, /static/, /public/] plus context:/ (the root of the servlet context).
 */
private String[] staticLocations = RESOURCE_LOCATIONS;
```
As mentioned before, the request URL will be resolved relative to these locations. Thus src/main/resources/static/index.html will be served when the request URL is /index.html. The class that is responsible for resolving the path, as of Spring 4.1, is org.springframework.web.servlet.resource.PathResourceResolver.
Suffix pattern matching is enabled by default which means for a request URL /index.html, Spring is going to look for handlers corresponding to /index.html. This is an issue if the intention is to serve static content. To disable that, extend WebMvcConfigurerAdapter (but don't use @EnableWebMvc) and override configurePathMatch as shown below:
```
@Override
public void configurePathMatch(PathMatchConfigurer configurer) {
    super.configurePathMatch(configurer);

    configurer.setUseSuffixPatternMatch(false);
}
```

IMHO, the only way to have fewer bugs in your code is not to write code whenever possible. Use what is already provided, even if that takes some research, the return is worth it.

Edit July 2021:

WebMvcConfigurerAdapter has been deprecated since Spring 5. Implement WebMvcConfigurer and annotate with @Configuration.

Go – Django: accessing ManyToManyField objects after the save

This is how I worked around this, indeed baffling, behavior. Connect a signal receiver to models.signals.m2m_changed event, this get's triggered each time a m2m field is changed. The inline comments explain why.

class Gig(models.Model):
    def slugify(self):
        # Add venue name, date and artists to slug
        self.slug = slugify(self.venue.name) + "-"
        self.slug += self.date.strftime("%d-%m-%Y") + "-"
        self.slug += "-".join([slugify(artist.name) for artist in self.artists.all()]) 
        self.save()


@receiver(models.signals.m2m_changed, sender=Gig.artist.through)
def gig_artists_changed(sender, instance, **kwargs):
    # This callback function get's called twice. 
    # 1 first change appears to be adding an empty list
    # 2nd change is adding the actual artists
    if instance.artist.all() and not instance.slug:                                                                                                                                                               
        instance.slugify()

Best Answer

Related Solutions

Spring Boot not serving static content

Go – Django: accessing ManyToManyField objects after the save

Related Topic