Hi,
i tried migrating from Vaadin 14 to 15 today (Using Spring Boot 2.2.4 and Vaadin Mavin Plugin (15.0.0)).
When starting i get the following error:
====================================================================
Vaadin is running in DEBUG MODE.
In order to run your application in production mode and disable debug features, you should enable it by setting the servlet init parameter productionMode to true.
See https://vaadin.com/docs/v15/flow/production/tutorial-production-mode-basic.html for more information about the production mode.
====================================================================
2020-03-04 15:02:05.892 INFO 15276 --- [nio-8080-exec-1]
c.v.f.s.DefaultDeploymentConfiguration :
====================================================================
Using Vaadin 15 (Flow 3) bootstrap mode.
- 'index.html' is not found from '.\frontend\index.html'.
Generating a default one in 'target/index.html'. Move it to the '.\frontend' folder if you want to customize it.
- 'index.ts' is not found from '.\frontend\index.ts'.
Generating a default one in 'target/index.ts'. Move it to the '.\frontend' folder if you want to customize it.
====================================================================
2020-03-04 15:02:06.113 ERROR 15276 --- [nio-8080-exec-1]
c.v.flow.server.DefaultErrorHandler :
java.io.FileNotFoundException: http://localhost:62036/VAADIN/index.html
What is the index.html /.ts for and what do i have to do to get my Vaadin 14 Project running with Vaadin 15
(I am not in need of any Client Side TypeScript)
Good to hear that you are trying out Vaadin 15, and sorry to hear you have a bump in the migration journey. Just want to double-check that did you do something else as well in addition to updating the Vaadin version from 14 to 15?
I increased the Vaadin Version (bom, dependency and maven plugin).
I added AppShell.java (related to the API changes of configurePage) and followed the migration guide until it says:
If you do not plan adding any TypeScript views, migration from Vaadin 14 to Vaadin 15 is done at this point.
Do you have a message like com.vaadin.flow.server.DevModeHandler : Started webpack-dev-server. Time: 8146ms in your log? Looks like the webpack dev server was not started correctly.
I was able to resolve my problem.
I deleted my local workspace folder of my project, re-cloned my git repository and ran
mvn compile
After that everything worked again. (Probably there was an error with old files/folders generated by Vaadin 14)
Nevertheless there are still some problems:
I get the following error after each initial Page load:
Error loading frontend://dndConnector.js
Also my custom loading animation is not working correctly. It seems the new AppShellConfigurator isn’t initializing. Here my code to deactivate standart loading (i think the optional is not present (In Vaadin 14 it was not an optional)):
@PageTitle("Title")
@Push(PushMode.AUTOMATIC)
public class AppShell implements AppShellConfigurator {
@Override
public void configurePage(AppShellSettings settings) {
/**
* Disable standard loading animation (replaced with loadingIndicator.css in frontend folder
*/
Optional<LoadingIndicatorConfiguration> conf = settings.getLoadingIndicatorConfiguration();
conf.ifPresent(loadingIndicatorConfiguration -> {
loadingIndicatorConfiguration.setApplyDefaultTheme(false);
});
}
}
For the Error loading frontend://dndConnector.js issue, I wasn’t able to reproduce with a simple starter, but I made a ticket(https://github.com/vaadin/flow/issues/7753), since there shouldn’t be any fontend:// anymore.
Jonas TM, the issue Error loading frontend://dndConnector.js normally is due because of wrong stuff in node_modules folder, if you execute rm -rf node_modules then mvn clean it should disappear.
Jonas TM:
Also my custom loading animation is not working correctly. It seems the new AppShellConfigurator isn’t initializing. Here my code to deactivate standart loading (i think the optional is not present (In Vaadin 14 it was not an optional)):
@PageTitle("Title")
@Push(PushMode.AUTOMATIC)
public class AppShell implements AppShellConfigurator {
@Override
public void configurePage(AppShellSettings settings) {
/**
* Disable standard loading animation (replaced with loadingIndicator.css in frontend folder
*/
Optional<LoadingIndicatorConfiguration> conf = settings.getLoadingIndicatorConfiguration();
conf.ifPresent(loadingIndicatorConfiguration -> {
loadingIndicatorConfiguration.setApplyDefaultTheme(false);
});
}
}
In Vaadin 15 the server-side UI instance is created separately, possibly after the app shell is initialized. However, the loading indicator config is tied to the UI instance. That’s why the loading indicator config inside the AppShell’s configurePage method is an empty Optional in your case. Let’s use the https://github.com/vaadin/flow/issues/7754 issue to improve that.
implement the VaadinServiceInitListener interface, and override the serviceInit() event handler there:
@CssImport("loading-indicator.css")
public class AppShell implements AppShellConfigurator, VaadinServiceInitListener {
@Override
public void serviceInit(ServiceInitEvent serviceInitEvent) {
serviceInitEvent.getSource().addUIInitListener(uiInitEvent -> {
uiInitEvent.getUI().getLoadingIndicatorConfiguration()
.setApplyDefaultTheme(false);
});
}
}
create a plain text file named com.vaadin.flow.server.VaadinServiceInitListener inside the src/main/resources/META-INF/services folder, and add there the full-qualified name of the class that implements the VaadinServiceInitListener interfance
With you solution i was able to use my custom loading animation. Thanks!
Manuel Carrasco:
The issue Error loading frontend://dndConnector.js normally is due because of wrong stuff in node_modules folder, if you execute rm -rf node_modules then mvn clean it should disappear.
Sadly deleting the node_modules folder and running mvn clean did not remove the error. It is still showing after each initial page load!
(Update: When packaged in production mode the error is shown just in the console)