Deploying .war file to tomcat 8 works fine in IDE but I lose all my JS and CSS when I deploy to my VPS

Question

I have a spring-boot application. When I start run it Tomcat 8.0_35 in my intellij IDE I have no issues, looks great. I decided to deploy in on my VPS and only the HTML renders. I replicated this issue on my localhost by manually dropping the .war file into webapps. Since I was getting all 404 errors I thought maybe I need to set up a webconfig class:

@Configuration
public class WebConfiguration extends WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter {

    private static final Logger log = Logger.getLogger(WebMvcAutoConfiguration.class);

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);

        registry.addResourceHandler("/css/**").addResourceLocations("/resources/css/");

        registry.addResourceHandler("/image/**").addResourceLocations("/resources/image/");

        registry.addResourceHandler("/images/**").addResourceLocations("/resources/images/");

        registry.addResourceHandler("/javascripts/**").addResourceLocations("/resources/javascripts/");

        registry.addResourceHandler("/libs/**").addResourceLocations("/resources/lib/");

    }

    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }

    @Bean
    public DispatcherServlet dispatcherServlet(){
        DispatcherServlet dispatcherServlet = new DispatcherServlet();

        dispatcherServlet.setThrowExceptionIfNoHandlerFound(true);

        return dispatcherServlet;
    }

    @Bean
    public ServletContextTemplateResolver templateResolver() {
        ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
        resolver.setPrefix("/WEB-INF/");
        resolver.setSuffix(".html");
        resolver.setTemplateMode("HTML5");
        resolver.setOrder(1);
        return resolver;
    }

}  

I needed the ServletContextTemplateResolver because I am using spring-mobile and I was having issues rendering my pages.

I am not seeing anything in the logs on tomcat either localhost.log and cataline.log

@SpringBootApplication
public class StidhamFinancialApplication extends SpringBootServletInitializer {

    public static void main(String[] args) throws UnknownHostException {
        SpringApplication app = new SpringApplication(StidhamFinancialApplication.class);

        Environment env = app.run(args).getEnvironment();
       System.out.println(String.format("Access URLs:\n----------------------------------------------------------\n\t" +
                "Local: \t\thttp://127.0.0.1:%1s\n\t" +
                "External: \thttp://%2s:%3s\n----------------------------------------------------------",
            env.getProperty("server.port"),
            InetAddress.getLocalHost().getHostAddress(),
            env.getProperty("server.port")));
    }

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources(StidhamFinancialApplication.class);
    }
}

All my JS, and CSS file are found in my IDE and everything seems to be configured correctly. I am not sure what to try next. I have been debugging this for days with no luck.

I uploaded it on git at https://github.com/drewjocham/financial

Any advice would be greatly appreciated.

Only thing the logs are complaining about is a few jar files:

org.apache.jasper.servlet.TldScanner$TldScannerCallback.scan No TLD files were found in [file:/Library/apache-tomcat-8.0.35/webapps/stidhamfinancial/WEB-INF/lib/jandex-1.1.0.Final.jar]. Consider adding the JAR to the tomcat.util.scan.StandardJarScanFilter.jarsToSkip property in CATALINA_BASE/conf/catalina.properties file.

in my logging.properties I added the following:

org.apache.jasper.compiler.TldLocationsCache.level = FINE

org.apache.catalina.startup.TldConfig.jarsToSkip=antlr-2.7.7.jar
org.apache.catalina.startup.TldConfig.jarsToSkip=spring-boot-1.3.5.RELEASE.jar
org.apache.catalina.startup.TldConfig.jarsToSkip=groovy-2.4.6.jar
org.apache.catalina.startup.TldConfig.jarsToSkip=javassist-3.18.1-GA.jar
org.apache.catalina.startup.TldConfig.jarsToSkip=aopalliance-1.0.jar

After doing some research but that doesn't seem to work. However I do not think this could be the issue.

Answer 1

Drew1208

I opened this Pull request that will solve your problem https://github.com/drewjocham/financial/pull/1

I added some hibernate configs to be able to run and also execute the tests. And also removed the '/' from the resources path.

---

UPDATE

I found the issue. The resources folder structure looks like that:
resources css style.css images team-6-med-blur.png

So in the file style.css the image path are relative to this file and not to the application context. Then you need to change from:
background-image:url('resources/images/stidhamfinancial/team-6-med-blur.png');
to
background-image:url('../images/stidhamfinancial/team-6-med-blur.png');

It will show the images.

Also I've opened this PR#2 in your repo.

Answer 2

Always use relative paths for referencing the resource.

Snippet from your index.html

    <link rel="stylesheet" type="text/css" href="/resources/css/superfish.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/css/nivo-slider.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/css/jquery.qtip.min.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/css/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/css/jquery.fancybox.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/css/jquery.fancybox-buttons.css"/>

Should be

    <link rel="stylesheet" type="text/css" href="resources/css/superfish.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/nivo-slider.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/jquery.qtip.min.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/jquery.fancybox.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/jquery.fancybox-buttons.css"/>

Explanation

When somebody uses "/" at the start of URL/resource, browser will try to load that resource from ROOT context of web server. A root context for web server may or may not be same as your application as application can be deployed at root context or any other context.

It is always advised to use relative paths to link your resource

You should use relative path for all static urls. I also found that many resources are not available in your github repo like superfish.css. Include those else they will result in 404