I am a newbie to spring boot architecture. It says that to let the index pages to find static resources like js, we need to keep it under "src/main/resources/static".
Directory Structure:
Html files: src/main/webapp/WEB-INF/jsp/
js files: src/main/resources/static/js/
This is my index page:
<html ng-app="RollbackApp">
<head>
<title>My Rollback View</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script type="text/javascript" src = "js/app.js"></script>
</head>
<body>
<div ng-controller="rollbackController"><p>
<button ng-click="rollback()">RollBack</button>
</p></div>
</body>
</html>
Currently the index page is not able to load my "app.js"
My Mvc config class is as follows:
package com.manoj;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
/**
* Created by manojma on 10/13/2017.
*/
#Configuration
#EnableWebMvc
public class ApplicationWebMvcConfig extends WebMvcConfigurerAdapter {
#Override
public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}
#Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/static/");
}
#Bean
public InternalResourceViewResolver viewResolver() {
InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setPrefix("/WEB-INF/jsp/");
resolver.setSuffix(".html");
return resolver;
}
}
I am unable to find the reason, why it is not able to find my js files.
Please help me with this.!!
The issue is that your resource handler isn't configured correctly. You've set /resources/static/ as your resource location. However, considering that src/main/resources is put entirely on your classpath, you should leave away the /resources part. Additionally, you should mention that you're looking on your classpath, so you should probably use classpath:/static/.
#Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/static/");
}
Additionally to that, you've defined the resource handler to forward requests starting from /resources/**. That means that if you relatively request js/app.js, it won't work, since it won't trigger the resource handler. You need to use resources/js/app.js:
<script type="text/javascript" src="resources/js/app.js"></script>
However, if your goal is to just statically serve some HTML pages, it's a lot easier to just put the HTML pages into the src/main/resources/static folder as well. Spring boot already serves the index.html by default as the welcome page but it can be customized.
you have to be careful of overriding any of the defaults
I struggled with connecting my static resources to my jsp pages and this is what I finally used to get it working with Spring boot 2.0. You can see my properties and also what the urls look like when mapping to static resources like images or plain html.
Next we need to define the template prefix and suffix for our JSP files in application.properties. Thus add: (the context path 'pdx' is optional and you can pick a name to match your application)
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
server.servlet.context-path=/pdx
http://localhost:8080/pdx/images/thedocks.jpg access static resources in src/main/resources/static/images/thedocks.jpg
http://localhost:8080/pdx/ loads index.html in src/main/resources/static/index.html
http://localhost:8080/pdx/css/home.css loads css class in src/main/resources/static/css/home.css
http://localhost:8080/pdx/h loads my home controller with #Controller("/") and #GetRequest(“/h”) annotations.
my jsp page loads the static image like this
<img alt="the docks" src="/pdx/images/thedocks.jpg"/>
Related
I'm using Javalin to serve my static web pages, which I've never done before. I know it's possible in Nginx to remove the .html from the end of your url but still route to the correct page, for example mysite.com/login would replace mysite.com/login.html but still point towards my login.html file. Is this possible in Javalin?
I've tried looking into the config (StaticFileConfig) but couldn't seem to find anything that would solve this problem
Here are two examples of what was discussed in the comments to the question, for future visitors:
The first example assumes there is a simple HTML file in the application's resources/html folder.
The test.html file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>Hello world.</div>
</body>
</html>
The /test handler:
public static void main(String[] args) {
Javalin.create(config -> {
})
.get("/test", ctx -> {
ctx.contentType(ContentType.TEXT_HTML);
InputStream in = App.class.getResourceAsStream("/html/test.html");
ctx.result(in);
})
.start(8080);
}
If you choose to configure Javalin with Thymeleaf, and if you place your HTML file in the default location expected by Thymeleaf (resources/thymeleaf), then you can do this:
.get("/test", ctx -> {
Map<String, Object> model = new HashMap<>();
ctx.render("test.html", model);
})
In this case, the model used by Thymeleaf for rendering is empty because you don't need to make any substitutions in your HTML file (it's not a template). But it's a short step from this to using dynamic Thymeleaf templates.
I followed what andrewJames was saying and that worked for me. I was hoping there would be a cleaner way of doing this, as I'm just copy pasting the same code for every endpoint and changing the file path, but this works.
I have a spring boot app and a controller that server static webpage(React build):
#Controller
#RequestMapping("/test")
public class HomeController {
#GetMapping("/")
public String index() {
return "index.html";
}
...
index.html is located at: ../resources/static/index.html
also in application.yml:
spring:
mvc:
static-path-pattern: /test/**
I am having two problems(problem 2 is the main issue):
I must call the following url with the trailing '/' at the end: http://localhost:8100/test/ I would like for http://localhost:8100/test to also map me to the view(index.html).
during the load of the page I am getting the following error:
the problem as you can see is that the url called is:
http://localhost:8100/static/css/main.6c417d20.chunk.css
and not
http://localhost:8100/test/static/css/main.6c417d20.chunk.css
(please note that the reason for the 'static' in the url is that there is a folder named: static below the resources/static folder so there is no issue with the 'static' in the url)
is it a server side problem or is it something I should fix in the react?
I searched for an answer but didn't find anything helpful.
any help would be highly appreciated,
Tnx
So the answer to my question lies in the following links:
how to build react to a non root path(homepage):
build react non root path
registering zuul client to the following path(that contains all resources):
Zuul configuration with resources
so I am leaving this here in case someone has the same issue(the answer in the second link is for vue.js and webpack,the first link explains how to change root address in react).
Answer 1 : #RequestMapping has a String[] value parameter, so can specify multiple values like this:
#RequestMapping(value={"", "/", "welcome"})
Answer 2 : You are expecting test in URL which is controller mapping not the project context path so it should not come in static resources urls.
see this answer for more clarity adding css and js in spring boot.
I am using dompdf to generate PDFs for some of the views and that is working just fine. The problem is that I cannot include the css files anywhere, and only css included in the <style> tags inside the view itself is taken into consideration.
Here is the controller action:
public function view_pdf($id=null){
ini_set('memory_limit','512M');
$event = $this->Event->findById($id);
$evt_data=new \DateTime($event['Event']['date']);
$this->set('event', $event);
$this->layout='event';
}
Here is the layout:
require_once(APP . 'Vendor' . DS . 'dompdf' . DS . 'dompdf_config.inc.php');
spl_autoload_register('DOMPDF_autoload');
$dompdf = new DOMPDF();
$dompdf->set_paper = 'A4';
$dompdf->load_html(utf8_decode($content_for_layout), Configure::read('App.encoding'));
$dompdf->render();
echo $dompdf->stream('Event.pdf');
And here is the view itself (shortened version):
<style>
div.content-event{
background: gray;
color: black;
padding: 20px;
}
</style>
<div class="content-event" style="margin-bottom: 80px">
<div class="heading">
<div class="row">
<div class="col-md-12">
<h3><?php echo $event['Event']['name']; ?></h3>
</div>
</div>
</div>
I have tried to include the css files in the usual way, like: echo $this->Html->css('event');, in both the view and the layout, but this is just not taking any action.
Any help or guidance is much appreciated.
You can include CSS file like following:-
<link rel="stylesheet" type="text/css" href="<?php echo APP.'webroot'.DS.'css'.DS.'event.css'; ?>" media="all" />
Put your css file into webroot/css folder.
Archana's answer appears to be valid, but I wanted to provide a bit more context. When you load a document using $dompdf->load_html() dompdf has no information about the source of the file. When you provide links to external resources dompdf sets the currently executing file on the local file system as the base path.
Essentially URLs will be parsed in the following manner:
relative URLs (e.g. css/styles.css) will be evaluated relative to the currently executing file
absolute URLs (e.g. /css/styles.css) will be evaluated relative to the file system root
URLs with a domain (e.g. http://example.com/css/styles.css) will be evaluated as written
When you make the following call to HTMLHelper::css:
$this->Html->css('styles')
CakePHP will produce a style reference similar to the following:
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
Based on the parsing rules I outlined above that reference will be read from the filesystem root. And unless you have a root folder called "css" with your stylesheet in it that reference will be invalid. The reason Archana's answer works is that you're providing a path from the root of the file system to the file (e.g. /inet/www/cakesite/app/webroot/css/styles.css).
It's a bit easier to get a handle on external resource references if you specify a domain. In that manner dompdf will access the resource via your web server as would any web browser. This type of reference does require a bit more attention to your dompdf and server configuration.
You might find the following questions helpful on how to construct a URL:
Q: How to get the base Url in cakephp?
Q: base_url in CakePHP
I want to provide a file upload to Google App Engine with the "GWT Upload" (https://code.google.com/p/gwtupload/). During the upload I get an error. As UploadAction servlet I use the build in: gwtupload.server.gae.AppEngineUploadAction
The servlet is configured in the web.xml in the following way:
<context-param>
<!-- max size of the upload request -->
<param-name>maxSize</param-name>
<param-value>3145728</param-value>
</context-param>
<context-param>
<!-- Useful in development mode to slow down the uploads in fast networks.
Put the number of milliseconds to sleep in each block received in the server.
false or 0, means don't use slow uploads -->
<param-name>slowUploads</param-name>
<param-value>200</param-value>
</context-param>
<servlet>
<servlet-name>uploadServlet</servlet-name>
<!-- This is the default servlet, it puts files in session -->
<servlet-class>gwtupload.server.gae.AppEngineUploadAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>uploadServlet</servlet-name>
<url-pattern>*.gupld</url-pattern>
</servlet-mapping>
During upload the progress bar progresses some percentages and then shows the following error:
But there are no more details in the logs.
The error message shows the class gwtupload.server.gae.MemCacheFileItemFactory$CacheableFileItem with the method setHeader(). That's strange because I can't find the method in that class. What's happening here?
Edit:
This is basically all the custom code i use. On the server side i use the build in gwtupload.server.gae.AppEngineUploadAction servlet.
package com.uploadtest.client;
import gwtupload.client.IUploadStatus.Status;
import gwtupload.client.IUploader;
import gwtupload.client.IUploader.UploadedInfo;
import gwtupload.client.MultiUploader;
import gwtupload.client.PreloadedImage;
import gwtupload.client.PreloadedImage.OnLoadPreloadedImageHandler;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.RootPanel;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GWTUploadTest2 implements EntryPoint {
// A panel where the thumbnails of uploaded images will be shown
private FlowPanel panelImages = new FlowPanel();
public void onModuleLoad() {
// Attach the image viewer to the document
RootPanel.get("thumbnails").add(panelImages);
// Create a new uploader panel and attach it to the document
MultiUploader defaultUploader = new MultiUploader();
RootPanel.get("default").add(defaultUploader);
// Add a finish handler which will load the image once the upload finishes
defaultUploader.addOnFinishUploadHandler(onFinishUploaderHandler);
}
// Load the image in the document and in the case of success attach it to the viewer
private IUploader.OnFinishUploaderHandler onFinishUploaderHandler = new IUploader.OnFinishUploaderHandler() {
public void onFinish(IUploader uploader) {
if (uploader.getStatus() == Status.SUCCESS) {
new PreloadedImage(uploader.fileUrl(), showImage);
// The server sends useful information to the client by default
UploadedInfo info = uploader.getServerInfo();
System.out.println("File name " + info.name);
System.out.println("File content-type " + info.ctype);
System.out.println("File size " + info.size);
// You can send any customized message and parse it
System.out.println("Server message " + info.message);
}
}
};
// Attach an image to the pictures viewer
private OnLoadPreloadedImageHandler showImage = new OnLoadPreloadedImageHandler() {
public void onLoad(PreloadedImage image) {
image.setWidth("75px");
panelImages.add(image);
}
};
}
In addition to that i added the following jars to my clath path:
log4j-1.2.17.jar
gwtupload-gae-0.6.6.jar
gwtupload-0.6.6.jar
commons-fileupload-1.3.jar
commons-io-2.4.jar
Also zipped my whole sample project and uploaded it here:
https://skydrive.live.com/redir?resid=60B826E451F52B4D!118&authkey=!ALa1n2mL2sRR0wU
Edit 2:
Like Manolo pointed out: I was using "commons-fileupload-1.3.jar" instead of "commons-fileupload-1.2.1.jar". Changing the jar fixed my problem!
The problem is in the version of the commons-fileupload you are using, change it to the version 1.2.1, which is the one pointed in the gwtupload documentation.
It should work with 1.2.2 as well, but to use 1.3 requires new methods (setHeaders) which are not in the UploadListeners provided with gwtupload.
You should change in your project the target java (JDK compliance) to 1.6, since it is the last one supported in GWT to avoid problems, although it runs in 1.7.
i use light box but something wrong with this code to show light-box
instead of
image #1
i use this code for view
$thumb = $this->Html->image('images/thumb-1.jpg');
$full = $this->Html->image('/images/image-1.jpg', array('rel' => 'lightbox'));
echo $this->Html->link($thumb,$full, array('escape' => false));
but i see this error
Error: The action <img src=" is not defined in controller ImagesController
Error: Create ImagesController::<img src="() in file: app\controllers\images_controller.php.
<?php
class ImagesController extends AppController {
var $name = 'Images';
function <img src="() {
}
}
?>
Notice: If you want to customize this error message, create app\views\errors\missing_action.ctp
Translating the instructions:
Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your
header (in this order).
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
For Cake that means to put these lines into your default.ctp layout and the Javascript files into the webroot/js folder.
Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Again, put this in the layout and the css file into webroot/css.
Check the CSS and make sure the referenced prev.gif and next.gif
files are in the right location. Also, make sure the loading.gif and
close.gif files as referenced near the top of the lightbox.js file
are in the right location.
Make sure the images are in the right location in webroot/img, adjust paths as necessary.
Add a rel="lightbox" attribute to any link tag to activate the
lightbox. For example:
image #1
In you do this by adding attributes to the link helper:
$this->Html->link('image #1', '/img/images-1.jpg', array('rel' => 'lightbox'));
Since you have not listed any code you tried, so i assume you've not started integration. Check this link, it have what you need:
Lightbox using CakePHP