Vaadin 12 Spring Boot Production Mode

Flow
1

Hi All,

I’ve almost successfully packaged my Spring Boot Vaadin 12 App as a WAR file for JBoss 7 in production mode.

The issue I have (other than IE11 :slight_smile: ) is that although the frontend resources get compiled into their respective frontend-es5 and -es6 directories, the references to resources (images) in the html styles I’ve added, get changed to frontend-es5/frontend.

So for example:

In main-styles.html under src/main/resources/META-INF/frontend/styles/ I have the following…

 	.logo-label {
            background: url("frontend://styles/images/logo.svg");
        }

But when ‘inspecting’ the css in the browser I get this:

 	.logo-label {
            background: url('http://localhost:8080/myapp/frontend-es5/frontend/styles/images/logo.svg');
        }

Where as the image actually exists at http://localhost:8080/myapp/frontend-es5/styles/images/logo.svg

I’m not sure why frontend:// is being changed to frontend-es5/frontend and not just frontend-es5/

Does anybody have any pointers?

Thanks,

Stuart

2

If you have main-styles.html in frontend/styles and want to refer to frontend/styles/images/logo.svg, can’t you use background: url('images/logo.svg')?

I have no idea why frontend:// is changed at all in your main-styles.html because the frontend:// protocol should only exist in the Java world

3

Hi Artur.

Yes I did have background: url(‘images/logo.svg’) but I got the same result. I guess the fontend:// protocol need to be changed when compiling for production so all the resources are in the right place for each browser, fontend-es5 and -es6. I’m just not sure why the references are frontend-es6/frontend…

Stuart