Error 404 in WLP

Hi,

I’m currently writing on a Project for a customer. The backend is mostly written and looks good. For the frontend I’ve used HTML and now the customer wants a more fancy and nice frontend like Vaadin.
So now I’ve kicked out the html part and try to build a Vaadin frontend.
And a fail at the MainPage-Tutorial from the Learning-Section.
If I build a new project and only include the MainPage.java there is no problem and I can click the button.
But if I copy this class into my existing Project and start the server I only get an error 404 from the Websphere. I can’t see the difference.
Yesterday I’ve tried Vaadin Framework 8 and there I was getting a site but in Framwork 8 I had to map the Project to “*” and in Vaadin flow I can’t find such a mapping or routing (no other than @Route"").
Hope you guys can help me.

Best regards
Daniel

Based on your description, I’m not sure exactly what you’re trying to do or what’s happening, but if you have an existing Java backend, you could use the Multimodule Maven archetype https://vaadin.com/docs/v8/framework/getting-started/getting-started-archetypes.html for Vaadin 8 and put your custom code in the backend module there. Then you can just build your UI in the ui module and it should work nicely.

Hi,

as I’ve written Framework 8 works and is loaded properly if I map it to “*” but I’ve been told I should use Vaadin 12 and because the frontend is just at the beginning I thought it shouldn’t be hard to switch to 12. But now I’m getting the problem that WLP can’t find a site.
Probably it’s some module I’ve loaded for the jsp to work which only has to be deactivated. I don’t know a lot about frontends. It’s the first time I’m making my own frontend by scratch for a project.

You’re using JSP in the same project as Vaadin?

Yes,

but now I’ve made a new EnterpriseApplicationProject, because the old one didn’t response anymore and now I have an working Vaadin app.

But I have one more question:
where do I deposit my ressources like html-files or images so I can load them with resolveRessource or @HtmlImport

Maybe this blog post will help with the resources: https://vaadin.com/blog/vaadin-10-and-static-resources

Hi,

now I’ve tried:
/AssetToConnector/src/main/resources/META-INF/resources/frontend/css
/AssetToConnector/src/main/webapp/frontend/css
/AssetToConnector/WebContent/META-INF/resources/frontend/css

and none of it worked.

I’m starting to despair.

Help.

Hi Daniel. Combining JSP and Vaadin Flow in the same project sounds “interesting”. I’d want to know why you want to do that ?

We are currently working on Embedding Flow application support https://github.com/vaadin/flow/issues/4316 and it should enable you to embed a Flow application inside a JSP generated page. The feature is currently WIP and while we have some documentation and examples for it, we are expecting to improve the API still and have not yet included it in any release other than the 1.5-SNAPSHOTs.

Hm, I think I haven’t made my point.

The first Frontend was in JSP the new one should be completely in Vaadin Flow.
The jsp-Frontend is still usable but it is nothing related with the Vaadin.

I only want’t to use css and my application can’t find (or it seems so) the html file I give him with
@HtmlImport(“css/shared-styles.html”)

Or can someone show me something that has to work for implementing own css.

Best regards
Daniel

Ah, I see. Here is a working example where the file is imported with
https://github.com/vaadin/bookstore-starter-flow/blob/master/bookstore-starter-flow-ui/src/main/java/com/vaadin/samples/MainLayout.java#L20
and is located in
https://github.com/vaadin/bookstore-starter-flow/blob/master/bookstore-starter-flow-ui/src/main/webapp/frontend/css/shared-styles.html

I think it should be also prefixed with frontend:// for the import, so that it works properly when packaged to production and the path changes between ES5 and ES6 versions.

Hi,

thanks for the Sample. The question is now: Haw can I test if Vaadin found the html? Can I build a line in the html so Vaadin will always show me some Hello World in a label?

You can test it by applying some CSS that is targeting some visible element in the DOM, like setting the background-color for the body element. For more information about theming basics you can check https://vaadin.com/docs/v12/flow/theme/theming-crash-course.html

Another good way for detecting whether your file has been loaded is by opening the browsers developer tools, you should see an 404 error in the console if it is not found.

If you’re looking for more on how to make hello world with an label using HTML+Java, I think you should check https://vaadin.com/docs/v12/flow/polymer-templates/tutorial-template-basic.html.

Thanks for the courses.

Now I’ve copied shared-styles.html to
/AssetToConnector/WebContent/frontend/css/shared-styles.html
and the system uses my background-color.

Don’t know if this directory is perfect, but it’s working and I can develop.

Regards Daniel