Hi, this is more of a general SPA question. Whenever I redeploy my kvision app in Google app engine,...

# kvision

[Kumaran Masilamani]

Hi, this is more of a general SPA question.
Whenever I redeploy my kvision app in Google app engine, I get the old app in my browser with javascript errors.

In Chrome it loads the new app pages, but the app is not working and threw this error in the console:
vf {message: "Invalid parameters", cause: undefined, name: "vf", stack: "vf: Invalid parameters↵
at $T.invoke_508 (https…tps//<my domain>/main.bundle.js25:78621)"}
and when I click through, it fails in the last part of this js function
function isJsdom() {
return ((((!(typeof navigator === 'undefined') ? navigator != null : false) ........ ? navigator.userAgent.match('\\bjsdom\\b') : false;
}

In Firefox, it loads the old application, still, somewhere it is caching.
I have given this index.html

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

I tried clearing the site-specific cache from the browser.

PS: In the incognito mode of Chrome and Firefox, no problem at all.

Any help, highly appreciated.

[Robert Jaros]

is your index.html file served from /public/ static frontend jar?

[Robert Jaros]

you could instead serve it directly from spring boot application as a spring-controlled resource with full access to http cache headers:

@Bean
    open fun indexRoute() = coRouter {
        GET("/") {
            ok().contentType(MediaType.TEXT_HTML).cacheControl(CacheControl.noCache().mustRevalidate()).render("index").awaitSingle()
        }
        GET("/index.html") {
            ok().contentType(MediaType.TEXT_HTML).cacheControl(CacheControl.noCache().mustRevalidate()).render("index").awaitSingle()
        }
    }

[Robert Jaros]

With template engine defined:

@Bean
    fun xmlTemplateResolver(appCtx: ApplicationContext): SpringResourceTemplateResolver {
        val templateResolver = SpringResourceTemplateResolver()
        templateResolver.setApplicationContext(appCtx)
        templateResolver.prefix = "classpath:/templates/"
        templateResolver.suffix = ".html"
        templateResolver.characterEncoding = "UTF-8"
        return templateResolver
    }

    @Bean(name = ["springTemplateEngine"])
    fun templateEngine(appCtx: ApplicationContext): SpringTemplateEngine {
        val templateEngine = SpringTemplateEngine()
        templateEngine.setTemplateResolver(xmlTemplateResolver(appCtx))
        return templateEngine
    }

[Robert Jaros]

you can put index.html in src/backendMain/resources/templates directory

[Robert Jaros]

Assuming you are using spring boot on the backend side, of course.

[Robert Jaros]

If it still gives you problems with main.bundle.js caching you can use this solution:
https://stackoverflow.com/a/61096182

[Kumaran Masilamani]

Great thanks.

[Tomasz Krakowiak]

Hmm... caching greatly improves loading time of the site. If possible I would recommend inserting build-time timestamp / build number / version number instead of current date.

[Robert Jaros]

It's definitely true.

[Robert Jaros]

In my opinion the best solution would be to configure webpack to generate bundle file name with hash.
https://webpack.js.org/guides/caching/

[Robert Jaros]

and to automatically update script directive in the index.html file

[Robert Jaros]

But I don't know how to do this 🙂

[Kumaran Masilamani]

for now I added ?appVersion=20210402.1421. Till I find a way to automate, I will manually set this before deployment.

[Tomasz Krakowiak]

Is your index.html file a template or static file?

[Kumaran Masilamani]

It is a static file under web/index.html

[Tomasz Krakowiak]

Than I guess the least effort would be to use https://webpack.js.org/plugins/html-webpack-plugin/

[Kumaran Masilamani]

Will try that.. Cheers