Problem with embeding vaadin application into webpage

General
1

I’m pretty new to server side development. Vaadin’s functionality is really attractive and I’m doing a test with embedding vaadin application into a webpage.

This is what I did:

  1. Create a new vaadin project inside eclipse
  2. On the project tree in eclipse, right click “Run on Server”
  3. The application is opened in a browser window.
  4. Copy the webpage source code and create a index.html file
  5. Add a
    HELLO WORLD!
    to the webpage.
  6. Place the index.html file in the “Web Content” folder
  7. Right click “Run on Server” and restart the server

The problem is that the generated contents does not change, still the welcome page generated from servlet.
What should I do to launch my index.html?

2

Hi, your problem is that Vaadin generates the index page in server side and does not use index pages from webcontent folder. In Book of Vaadin there is a chapter about embedding Vaadin application to html page:


Embedding Vaadin application to HTML page

Another option would be to use CustomLayout in to which you can set your own html code and use special tags to add Vaadin components to


CustomLayout

Hope these help.

3

If you want to have any static files in the application, you need to map the Vaadin application servlet to a sub-url, for example:

    <servlet-mapping>
        <servlet-name>Myproject Application</servlet-name>
        <url-pattern>/myapp/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Myproject Application</servlet-name>
        <url-pattern>/VAADIN/*</url-pattern>
    </servlet-mapping>

If a Vaadin servlet is mapped to a sub-url, you always need to map the /VAADIN/* to the servlet as well (just once is enough if you have multiple servlets).

Then start the application at [tt]
http://localhost:8080/myproject/myapp
[/tt] and copy&paste the HTML to the [tt]
index.html
[/tt] and it should work with [tt]
http://localhost:8080/myproject/
[/tt].

4

Thanks, but CUSTOM LAYOUT is a kind of template based solution, which is not what I want for the moment. I want the servlet to be embedded into a existing static page.

5

Thanks so much! Finally I figured out, that I have to change the web.xml as below and put myindex.html into the root “/*” folder, then everything works coorectly now.

	<servlet-mapping>
		<servlet-name>myapp</servlet-name>
		<url-pattern>/myapp/*</url-pattern>
	</servlet-mapping>

Now if I put http://localhost:8080/myindex.html, it will show correctly the static page.