Hello guys. I have a trouble with IE11. When i use flow in my project IE looks white screen. How can i correctly deploy my website into IE11 ? Any advice
Hi.
In order for the Flow application to work in IE11 you should make a few extra steps:
- prepare the frontend part of your application (at least JavaScript files need to be transpiled)
- start the application in the production mode
If you’re using Maven for your application, we’ve already got the tools and support for it, you just need to add a few more lines in your pom.xml
Here’s the documentation: https://github.com/vaadin/flow-and-components-documentation/blob/master/documentation/production/tutorial-production-mode-basic.asciidoc
For a complete working example you can refer to one of our starters (and try it out yourself): https://github.com/vaadin/skeleton-starter-flow/blob/master/pom.xml#L87
You can see issue comments on
[Vaadin Bakery App Starter for Flow and Spring not visible on IE11]
(https://github.com/vaadin/vaadin.com/issues/44#issuecomment-398162692)
I hope that can be useful for you
It still the same i used mvn spring-boot:run -Dvaadin.productionMode but its not working maybe my file structure a little bit buggy ? Or maybe its css problem
Cannot help you with the current information.
Could you please provide more details?
Project file structure, your pom.xml configuration and IE development console errors (opened with key F12) is a good start.
Hello Kirill, thanks for reply. Here is my pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>mn.waa</groupId>
<artifactId>waa_mn</artifactId>
<version>1.0.1.RELEASE</version>
<packaging>jar</packaging>
<properties>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<!-- Dependencies -->
<vaadin.version>10.0.1</vaadin.version>
</properties>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.3.RELEASE</version>
</parent>
<pluginRepositories>
<pluginRepository>
<id>vaadin-prereleases</id>
<url>https://maven.vaadin.com/vaadin-prereleases</url>
</pluginRepository>
</pluginRepositories>
<repositories>
<repository>
<id>vaadin-prereleases</id>
<url>https://maven.vaadin.com/vaadin-prereleases</url>
</repository>
<repository>
<id>Vaadin Directory</id>
<url>http://maven.vaadin.com/vaadin-addons</url>
</repository>
</repositories>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>${vaadin.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-spring-boot-starter</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.vaadin.artur</groupId>
<artifactId>spring-data-provider</artifactId>
<version>2.0.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-autoconfigure</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
<exclusions>
<exclusion>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-juli</artifactId>
</exclusion>
<exclusion>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-jdbc</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
</dependency>
<dependency>
<groupId>com.google.guava</groupId>
<artifactId>guava</artifactId>
<version>24.1-jre</version>
</dependency>
<dependency>
<groupId>org.reflections</groupId>
<artifactId>reflections</artifactId>
<version>0.9.10</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.imgscalr/imgscalr-lib -->
<dependency>
<groupId>org.imgscalr</groupId>
<artifactId>imgscalr-lib</artifactId>
<version>4.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
</dependency>
<dependency>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>iron-form</artifactId>
<version>2.1.3</version>
</dependency>
<dependency>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>iron-ajax</artifactId>
<version>2.1.2</version>
</dependency>
<dependency>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>paper-toast</artifactId>
<version>2.0.0</version>
</dependency>
<!-- Video view -->
<dependency>
<groupId>org.webjars.bowergithub.borjagodoy</groupId>
<artifactId>video-view</artifactId>
<version>0.1.3</version>
</dependency>
<!-- App layout -->
<dependency>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>app-layout</artifactId>
<version>2.1.1</version>
</dependency>
<!-- wysiwyg-e -->
<dependency>
<groupId>org.webjars.bowergithub.miztroh</groupId>
<artifactId>wysiwyg-e</artifactId>
<version>2.1.3</version>
</dependency>
<!-- Google Map -->
<dependency>
<groupId>org.webjars.bowergithub.googlewebcomponents</groupId>
<artifactId>google-map</artifactId>
<version>2.0.4</version>
</dependency>
<!-- Iron collapse -->
<dependency>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>iron-collapse</artifactId>
<version>2.2.1</version>
</dependency>
<!-- Paper icon button -->
<dependency>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>paper-icon-button</artifactId>
<version>2.2.0</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<id>productionMode</id>
<activation>
<property>
<name>vaadin.productionMode</name>
</property>
</activation>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>flow-server-production-mode</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>copy-production-files</goal>
<goal>package-for-production</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<jvmArguments>-Dvaadin.productionMode</jvmArguments>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>
</project>
And here is my project structure
![File Structure]
(http://tinyimg.io/i/mZTUrGa.PNG)
I see nothing suspicious neither in the pom.xml nor in the project structure, which is already good.
If you could try and see the actual error that IE11 shows, it might help.
You need to open the application in IE11 and press F12.
Network tab will show the resources it tries to load and if they were loaded successfully.
Console tab will show if any error occurred when loaded resources were run in the app.
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589530(v=vs.85)
That might tell more why you’re seeing the blank page.
Is it depends on css ? If i style incorrectly my app ?
I seriously doubt that this is the case: with missing CSS most probably you would have some content rendered (assuming that there is a content in the page in the first place).
This is how the application works:
- In development mode, frontend files are served directly into the browser, when asked from Flow.
Frontend files are treated as everything that is in theMETA-INF/frontenddirectory and in the project dependencies (components likevaadin-button)
This is fine for modern browsers, but not for IE11: due to the fact that components use modern JavaScript and standards, those directly served files may not work in IE11 without special processing (transpilation), that is done by the vaadin-maven-plugin in your project.
-
So, in order to make them suitable for IE11, we use
vaadin-maven-puginthat processes all the frontend files, optimizes them and creates a special version for IE11, all done automatically, and those are put into different directories,frontend-es5(for IE11) andfrontend-es6(for modern browsers).
Those directories are used in the production mode. -
When you start the app in the production mode, it starts to look for those directories, ignoring old paths (
META-INF/frontendand project dependencies contents) and serves the files to the browser, depending on the browser version, either fromfrontend-es5orfrontend-es6
So in that case what can go wrong is either:
- Misplaced or not generated directories (
frontend-es5orfrontend-es6) (Network tab errors) - Those directories not being added to Spring hence it does not serve those to browser (Network tab errors)
- Some error when loading the optimized script for IE11 (Console tab errors)
Ideally, nothing of the above should happen and we have developed a number of applications that verify that.
Apparently, in your case, sometihng is happening though and the way to understand this is to start looking at those console tabs in IE11.
i just saw some font errors on tabs. And network tab looks good all http requests status 200. Hmmm i am so confused now.
I look into rendered html profile that opacity style applied on HTML.
Can you also show the Network tab in the same window?
Sorry for late reply. Here is my network tab screen shot.
Ok, good thing is that the production mode is working properly, it loads the file from frontend-es5 with 200 status.
Bad thing is on the first screenshot, with JS errors from the files it loads.
It’s a bug in frontend tools we use to minify and compile the frontend resources, but in order to reproduce it, we need some project, since we don’t have this error in our projects.
As a workaround, you can try to set minify = false in the plugin config:
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>copy-production-files</goal>
<goal>package-for-production</goal>
</goals>
</execution>
<configuration>
<minify>false</minify>
</configuration>
</executions>
</plugin>
Sorry for late reply. I was on vacation. So i tried as you suggest it throws a error.
Hi, sorry, my bad, <configuration> Maven tag should be outside <executions> one.
Here’s the fixed version (added more parameters to keep the processed code more readable):
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>copy-production-files</goal>
<goal>package-for-production</goal>
</goals>
</execution>
</executions>
<configuration>
<minify>false</minify>
<bundle>false</bundle>
<hash>false</hash>
</configuration>
</plugin>
Heya, Sorry for late reply. I tried this way but still same.
I tried this way but its throws a error. See the below snippet.
java.lang.IllegalArgumentException: Failed to find bundle 'frontend://name', specified in manifest 'frontend://vaadin-flow-bundle-manifest.json'. Remove file reference from the manifest to disable bundle usage or add the bu
ndle to the path specified.
And i created a json file in frontend folder is it ok ?
and i am running with it mvn spring-boot:run -DVaadin.productionMode -PproductionMode.
I uploaded my file screenshot.
The error message says that frontend://name import reference was not found, do you have any import in the project with that string? Another option is that the json file you’ve created manually has incorrect imports in it.
As for the launch, -Dvaadin.productionMode would be enough.
Do you have any project repository? For instance, if you publish the sources on GitHub, I can have a look and see what’s missing in the configuration.
Company project is private so i can’t handle the source codes. I will contact you