I'm new to Spring Boot and struggling to deploy a simple HTML web app (AngularJS) to Tomcat 8. This web app simply serves some HTML/CSS/JS content with no REST calls to a backend. It has been "compiled" using Webpack -- this produces JS/CSS bundles and a single index.html file that points to them via <script> / <link> tags -- and has been tested on ExpressJS and Spring Boot w/ Embedded tomcat and works as expected. But going down the path of a stand-alone WAR and deploying to Tomcat 8 does not seem to work properly.
For the Spring Boot project, I've included all the HTML/CSS/JS files in the src/main/resources/public folder (no subfolders) and have also configured the pom.xml as follows (basic config):
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example.my-app</groupId>
<artifactId>my-app</artifactId>
<version>0.0.1</version>
<packaging>war</packaging>
<name>my-app</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.4.0.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
"Main" class:
package com.example.my.app;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.context.web.SpringBootServletInitializer;
#SpringBootApplication
public class MyAppApplication extends SpringBootServletInitializer {
#Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(MyAppApplication.class);
}
public static void main(String[] args) {
SpringApplication.run(MyAppApplication.class, args);
}
}
Here are the steps I used to do the Tomcat deployment:
mvn clean package to generate the WAR
Copy the WAR to path/to/tomcat8/webapp
Start Tomcat
http://localhost:8080/my-app => auto-loads index.html
Unfortunately all I see are 404 errors because it couldn't find some JS/CSS file. Is there a config I'm missing?
Updated:
Here is the index.html file (auto-generated via Webpack):
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>My App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="./assets/images/favicon.ico" />
<link href="/main-aa49893f83cc830596563d81f09a9611.css" rel="stylesheet"><link href="/main-5949f1f257a55a77e48bc4ab62fbc99a.css" rel="stylesheet"></head>
<body ng-app="myapp">
<ui-view></ui-view>
<script type="text/javascript" src="vendor-353ddb48f4ffe6546d59.js"></script><script type="text/javascript" src="app-353ddb48f4ffe6546d59.js"></script></body>
</html>
Here are the errors I'm seeing in Chrome Web Inspector when visiting localhost:8080/my-app/index.html:
http://localhost:8080/main-5949f1f257a55a77e48bc4ab62fbc99a.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/main-aa49893f83cc830596563d81f09a9611.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/vendor-4ba9083ed9802279c207.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/app-4ba9083ed9802279c207.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/vendor-4ba9083ed9802279c207.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/app-4ba9083ed9802279c207.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/main-aa49893f83cc830596563d81f09a9611.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/main-5949f1f257a55a77e48bc4ab62fbc99a.css Failed to load resource: the server responded with a status of 404 (Not Found)
One more thing I forgot to mention. When I generate the war using mvn clean package, all the files that are under src/main/resources/public are placed into the WEB-INF/classes/resource subfolder. According to research, these files are not publicly visible (i.e. if I try to access localhost:8080/my-app/foo.css, it'll give 404). Is this why the index.html file is unable to "see" the JS/CSS files it depends on?
I ended up figuring it out but not using Spring Boot to package the WAR file. There was another project lying around on my local that used plain old Maven + pom.xml + web.xml to create WARs, which I used as a reference to figure out why the current project was not working. There were multiple issues:
When you deploy onto Tomcat 8 using default config, it will append the name of the WAR file (what they refer to as Context) to its path. In this case, it was http://localhost:8080/my-app. The "compiled" AngularJS app's index.html had a <base href="/"> tag that needed to point to /my-app/ instead of /. This was the main reason why the JS/CSS files were not visible in Web Inspector > Sources.
<link> tag's src attribute was not supposed to contain a leading /
In the case of the Spring Boot App I posted above, it comes with an Embedded Tomcat and deploys the app at the Root Context so there's no need to change any paths in the index.html file.
Similar to Spring Boot, I also had no issues running the app in ExpressJS since a "sub-context" was not created. Again, there was no need to modify any files in this case.
There were other errors related to finding resources like .ttf files but at least the app was able to run.
Update:
Looks like its possible to serve the WAR file from the Tomcat 8 root by adding the following near the bottom of the server.xml file:
<Context path="" docBase="my-app" debug="0" reloadable="true"></Context>
This will prevent the need to modify the index.html file.
Awesome :)
The most common issue with the setup you have described, without more context, is that you are most likely using absolute URLs to point at your js / css files. As such when you put them into the servlet container under /my-app they no longer reference properly as they are trying to go to the root /. You need to use relative URLs when describing the location of the resource files on the path.
I had the same problem, and it is related to Webpack more than to Spring-boot.
In your webpack.common.js / webpack.prod.js you have to set :
metada.baseUrl = './';
and inject this in your <base> link in index.html
And you also have to set
output.publicPath: './'
With both variable set, this worked for me.
Uhmm i've tried some of this on my spring-boot project.
First i'd add a dependency on my project pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
then i'd add an index.html on src/main/resources/templates
after that you should add a controller to point to that index
#Controller
public class AppController {
#RequestMapping("/")
String index() {
return "index";
}
}
For more information see this guide. Spring-boot and Thymeleaf
Related
Im working on uploading images with spring but I get error when I try save file in one of my projects folder.
Errors:
java.nio.file.NoSuchFileException: \resources\images\photo001.png
There was an unexpected error (type=Internal Server Error, status=500).
\resources\images\photo001.png
I have this path:
String path = "\\resources\\images\\";
String path2 = "c:\\temp\\";
Path2 works but I would like to save my files in project without passing whole path starting from C:...
What pass should I pass to save it in resources/images in my project?
My project looks like that:
https://i.imgur.com/Dn6wXAK.png
Try 'images/'
All files in src/main/resources are copied into classes/ so in your jar or war there is no folder /resources.
You also should not use the windows specific backslash '\' instead use the
Use /images/ instead this makes your build portable so it can run on Linux also.
Senio, if you are using Spring Boot then there is a project called Spring Content that will allow you to create an image store in very few lines of code.
All you would need to do is add the following Spring Content dependencies (assuming maven):-
<dependencies>
<!-- Standard Spring Boot -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.3</version>
</dependency>
<!-- Spring Content -->
<dependency>
<groupId>com.github.paulcwarren</groupId>
<artifactId>spring-content-fs-boot-starter</artifactId>
<version>0.0.10</version>
</dependency>
<dependency>
<groupId>com.github.paulcwarren</groupId>
<artifactId>spring-content-rest-boot-starter</artifactId>
<version>0.0.10</version>
</dependency>
</dependencies>
In your Spring Boot Application class, create an ImageStore interface. Annotate it as a REST resource. This causes Spring Content to inject an implementation (of this interface for the filesystem) as well as REST endpoints saving you from having to write any this code yourself:-
#SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
#StoreRestResource(path="images")
public interface ImageStore extends Store<String> {}
}
By default Spring Content FS will create a store under java.io.tmpdir. So you will also need to set the SPRING_CONTENT_FS_FILESYSTEM_ROOT environment variable to point to the root of your "store"; c:\temp\resources\images.
Start the application and you will be able to upload images by POSTing (or PUTting) to:-
/images/some/path/image-1.jpg
(This also supports GET (download) and DELETE.)
You'll find uploaded images under c:\temp\resources\images\some\path\image-1.jpg
HTH
I just published an Angular app to Azure Web Apps, after confirming general operation locally. However, I now get the following error (HTTP Error 404.0 - Not Found), specifically the D:\home\site\wwwroot\bin\www file:
However, using the Kudu tools, I can see that the file is indeed there:
What could cause this error?
By default, IIS blocks serving content from certain folders, including bin. You can either a) move the www folder out of the bin directory, or b) you could add the following configuration to the web.config:
<configuration>
<system.webServer>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin" />
</hiddenSegments>
</requestFiltering>
</security>
</system.webServer>
</configuration>
The 404.0 Error on bin\www was a bit of a misdirection. After putting a console.log in the www file and watching output, I found out that indeed bin\www was being called properly. The problem was further in and related to the serving of static content, initially the index.html file.
I was previously using the following to serve up index.html:
var serveStatic = require('serve-static');
...
app.use(serveStatic('.', { 'index': ['index.html'] }));
For some reason, while this worked locally, this didn't work once published to Azure Web App. So I decided to use a method that had worked for others. First I moved index.html to /public, and then used express.static:
app.use(express.static(__dirname + '/public'));
It should also be noted, that the associated web.config file must also have information related to the static content, for example: How to enable static files (and less support) when hosting a nodejs app within IIS using IISNode
I am looking at Hosting angular JS / HTML 5 web app on google app engine as a single page app. All my services are also on google app engine within the same project.
I have generated the basic directory structure for angularJS using yeoman generator.
Just created a directory under the /war/ folder of app engine project and placed the angular code in that.
EVERYTHING IS WORKING FINE !!!
Then Question ?
Is this the right way to place a HTML page directly in the WAR folder of an App engine ? Or should I be placing HTML files under the SRC folder of an app engine project and pull them into war during deploy time ?
Lets say million users try to access this single page web app, will such a hosting model help in scaling up ? Will app engine create more instances to serve this page.html ?
Note: I am 'NOT' using anything GWT for UI. Its just a single page app under a war folder !
Appreciate your inputs.
Srik
I believe this is entirely up to your preferences. I put my angular apps in /src/main/node and copy the output of grunt during maven package phase like so:
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.4</version>
<configuration>
<archiveClasses>true</archiveClasses>
<webResources>
<!-- in order to interpolate version from pom into appengine-web.xml -->
<resource>
<directory>${basedir}/src/main/webapp/WEB-INF</directory>
<filtering>true</filtering>
<targetPath>WEB-INF</targetPath>
</resource>
<resource>
<directory>${basedir}/src/main/node/dist</directory>
<filtering>false</filtering>
<targetPath>/</targetPath>
</resource>
</webResources>
</configuration>
</plugin>
While this seems the cleanest solution for me, you may not feel the same way. It really doesn't matter how your static content gets into your war as long as it does.
There will be no instances for this. Static content (like html, js, css files) are served through Google's static content proxy, which is a content delivery network. So yes it will scale but you don't need instances for static content.
we would like to improve build configuration/integration of Java + JavaScript projects.
back-end : Java app, Spring framework, REST API + maven as build tool
front-end : HTML + CSS + JavaScript, (based on ng-boilerplate project template - it separates nicely all modules,services,directives,shared assets) and it's using few JavaScript tools like npm, Bower, Karma + Grunt
Workspace configuration is pretty simple - each project in separate directory :
/workspace
/JavaBackend
/JsFrontend
Problem is that developers are dealing with “Origin null is not allowed by Access-Control-Allow-Origin" messages in browsers as they run AJAX queries from front-end (from file://..../JSApp/build/index.hml) and Java App server is on localhost:8080. We could switch browser security off or modify headers to allow cross origin requests but we think it's not good way how to achieve that.
We don't want to have JS resources inside of Java project in /src/main/webapps/ as in production environment apps will be deployed on different machines and each app has it's own build server.
Do you have experience with similar project configuration ? What would you recommend to us ?
Meanwhile we will experiment with Tomcat 7 to check if it can e.g. serve external static resources (js stuff) out of context of java app
For development purposes, I would let Tomcat include the front-end folder in the server.xml by means of a <Context> tag. The folder can be arbitrary and even in another repository (e.g. /GitRepos/ApplicationGui/app).
...
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true">
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" pattern="%h %l %u %t "%r" %s %b" prefix="localhost_access_log." suffix=".txt"/>
<Context docBase="/workspace/JsFrontend" path="/"/>
<Context docBase="FlexibleOrders" path="/FlexibleOrders" reloadable="true" source="org.eclipse.jst.j2ee.server:FlexibleOrders"/>
</Host>
</Engine>
</Service>
</Server>
In production, I would recommend to make a Maven artefact out of the front-end. It can be then included via dependency in the backend like this:
<dependency>
<groupId>org.enterprise</groupId>
<artifactId>application-gui</artifactId>
<version>1.0.0-SNAPSHOT</version>
</dependency>
See this blog for a complete configuration for production:
http://wiki.switajski.de/2016/01/24/how-to-create-maven-artifact-with-static-web-resources.html
I am trying to get RPC testing using GWT. I am using the default StockWatcher project that is mentioned here, I download the project, I import it, everything works fine.
I then run junitcreator in the StockWatcher project:
/Users/stephen/Work/gwt/gwt-mac-1.6.4/junitCreator -junit /Users/stephen/Applications/eclipse/plugins/org.junit_3.8.2.v20080602-1318/junit.jar -module stockwatcher -eclipse StockWatcher com.google.gwt.sample.stockwatcher.StockWatcherTest
this creates the StockWatcherTest.java in the appropriate test directory, and gives me some hosted and web mode launch files.
I then also added junit.jar to the classpath for this project.
I then modify StockWatcherTest.java to test whether I am capable of making a asynchronous request to the server. Everything looks fine, but when I try to run StockWatcherTest.java in hosted mode, I get the following error:
Starting HTTP on port 0 HTTP
listening on port 49569
The development shell servlet received a
request for 'greet' in module
'com.google.gwt.sample.stockwatcher.StockWatcher.JUnit.gwt.xml'
[WARN] Resource not found: greet;
(could a file be missing from the
public path or a tag
misconfigured in module
com.google.gwt.sample.stockwatcher.StockWatcher.JUnit.gwt.xml
?)
com.google.gwt.user.client.rpc.StatusCodeException:
Cannot find resource 'greet' in the
public path of module
'com.google.gwt.sample.stockwatcher.StockWatcher.JUnit'
Here is my StockWatcherTest.java class
package com.google.gwt.sample.stockwatcher.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.junit.client.GWTTestCase;
import com.google.gwt.user.client.rpc.AsyncCallback;
/**
* GWT JUnit tests must extend GWTTestCase.
*/
public class StockWatcherTest extends GWTTestCase {
/**
* Must refer to a valid module that sources this class.
*/
public String getModuleName() {
return "com.google.gwt.sample.stockwatcher.StockWatcher";
}
/**
* Add as many tests as you like.
*/
public void testSimple() {
GreetingServiceAsync greetingService = GWT.create(GreetingService.class);
greetingService.greetServer("Bob",
new AsyncCallback<String>() {
public void onFailure(Throwable caught) {
// Show the RPC error message to the user
System.out.println(caught);
fail("big time failure");
finishTest();
}
public void onSuccess(String result) {
System.out.println("success, biatch");
assertTrue(true);
}
});
delayTestFinish(1000);
}
}
Here is com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.6.2//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.6.2/distro-source/core/src/gwt-module.dtd">
<module rename-to='stockwatcher'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->
<!-- Other module inherits -->
<!-- Specify the app entry point class. -->
<entry-point class='com.google.gwt.sample.stockwatcher.client.StockWatcher'/>
</module>
and here is web.xml in my generated war
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>StockWatcher.html</welcome-file>
</welcome-file-list>
<!-- Servlets -->
<servlet>
<servlet-name>greetServlet</servlet-name>
<servlet-class>com.google.gwt.sample.stockwatcher.server.GreetingServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>greetServlet</servlet-name>
<url-pattern>/stockwatcher/greet</url-pattern>
</servlet-mapping>
</web-app>
So what am I doing wrong? Any help is appreciated. Thank you.
1-you need to add "finishTest();" at the end of the "onSuccess" method.
2-And to resolve the exeption you got : add in your StockWatcher.gwt.xml the path to your servlet greet.
servlet path='/greet' class='com.google.gwt.sample.stockwatcher.server.GreetingServiceImpl'/
Another solution is using GWT SyncProxy (support both sync & async) to test GWT RPC services in JRE
See the post at http://www.gdevelop.com/w/blog/2010/01/10/testing-gwt-rpc-services/ for details
i made some simple tests for the stock watcher. you can see them at: http://tayek.com/StockWatcher.zip