Environment specific SPA url

Experience Manager (PaaS/OnPrem)
1

Hi!

We’ve started our journey with a fully SPA approach and encountered a problem with our preview.
The documentation[1] is pretty clear, telling us to configure just 2 properties on the CMS side, which are:

  1. Virtual host responseheaders hst:responseheaders: ['Access-Control-Allow-Origin: https://localhost:3000'] to prevent cross origin problems.
  2. The actual preview url org.hippoecm.hst.configuration.channel.PreviewURLChannelInfo_url in channel settings

So, since we’re not going to redirect our domain to our localhost, I would like to configure these URL’s differently for each environment :slight_smile: This works perfectly fine with the virtual hosts, since we configure them for each domain anyways, but not for the channel settings… I am looking for options here. Personally I don’t get the reason for this property to be on such a unpractical location, if someone could explain me this as well that would be nice :slight_smile:.

Maybe a note to the Bloomreach Documentation Team, It would love to see more SPA best practices and examples. Especially for the most common / bigger modules such as Relavance, Eforms, Content blocks etc… Maybe it would be an idea to include some of these modules in the demo project.

Looking forward to any suggestions on how to solve this environment specific config issue!

Cheers,
Jesper

[1] https://documentation.bloomreach.com/14/library/concepts/spa-integration/configure-hst-for-spa-sdk.html

2

Since there is no clear answer to my question, I’ve come up with a workaround. I think it’s very strange that environment configuration is stored in the channel properties, hope this will be reviewed by Bloomreach. Although I would like to share my workaround with the community.

The workaround: Updating the channel settings with a Groovy Updater Script using environment variables.

Since the main problem is localhost/development environment I like to keep the default on localhost:3000 and configure an environment variable in my Kubernetes cluster with the development SPA url. In my example this is FRONTEND_URL.

Here the updater script:

definitions:
      config:
        /hippo:configuration/hippo:update/hippo:queue/EnvironmentPropertyUpdater:
          jcr:primaryType: hipposys:updaterinfo
          hipposys:batchsize: 10
          hipposys:description: ''
          hipposys:dryrun: false
          hipposys:loglevel: DEBUG
          hipposys:parameters: ''
          hipposys:query: //hst:myproject/hst:configurations//hst:workspace/hst:channel//element(*,hst:channelinfo)
          hipposys:script:
            type: string
            resource: EnvironmentPropertyUpdater.groovy
          hipposys:throttle: 500

and the groovy file:

package org.hippoecm.frontend.plugins.cms.admin.updater

import org.apache.commons.lang3.StringUtils
import org.onehippo.repository.update.BaseNodeUpdateVisitor

import javax.jcr.Node

class EnvironmentPropertyUpdater extends BaseNodeUpdateVisitor {

    public static final String CHANNEL_MANAGER_PREVIEW_URL_PROP = "org.hippoecm.hst.configuration.channel.PreviewURLChannelInfo_url"
    public static final String ENV_VAR_FRONTEND_URL = "FRONTEND_URL"

    boolean doUpdate(Node node) {
        log.debug "Updating channel settings > preview url (${node.path})"

        final String systemVarPreviewUrl = System.getenv(ENV_VAR_FRONTEND_URL)
        if (StringUtils.isNotBlank(systemVarPreviewUrl)) {
            node.setProperty(CHANNEL_MANAGER_PREVIEW_URL_PROP, systemVarPreviewUrl)
            log.debug(">> New frontend url: ${systemVarPreviewUrl}")
        }

        return true
    }

    boolean undoUpdate(Node node) {
        throw new UnsupportedOperationException('Updater does not implement undoUpdate method')
    }

}

Hope this helps out some of you!
Cheers
Jesper

3

Hi Jesper,

Apologies for not getting back on this! You are right, it is unhandy
at the moment. Following for now:

wrt

hst:responseheaders: [‘Access-Control-Allow-Origin: https://localhost:3000’]

You can change this to :

hst:responseheaders: [‘Access-Control-Allow-Origin: *’]

then the Access-Control-Allow-Origin will be set correctly. If you do
not want this with *, you can also use hst:allowedorigins, see [1].
Since the Access-Control-Allow-Origin can be set per hst:host you
can set it also explicitly correct per hst:host (and thus per
environment so for example only use Access-Control-Allow-Origin:
https://localhost:3000 on the localhost hst:host

Wrt PreviewURLChannelInfo_url, yes, this is unhandy. We already
identified this as well. In the value, we will support placeholder
values which will be replaced by a system property or if not present
by an hst config property. That way you can for example use

org.hippoecm.hst.configuration.channel.PreviewURLChannelInfo_url = ${spa_host}

and have an hst-config.properties property for spa_host where the
hst-config.properties can be different per enviroment (local, test,
acct, prod). Instead of a property also a system property will be
supported. See https://issues.onehippo.com/browse/CMS-14022. I will
make sure it gets backported as well.

Hope this helps, apologies for the slow response

Regards Ard

[1] https://documentation.bloomreach.com/14/library/concepts/page-model-api/configuration.html
[2] https://issues.onehippo.com/browse/CMS-14022

4

Thanks the for reply, good to know you’re seeing the same problem as I do and working towards a solution!

5

Yes, you are spot on!

I expect this issue to be tackled tomorrow. Hopefully it will be in a release soon after!

What you could also do for now is override the property via yaml configuration where for production you use a different yaml config than for local development

Regards Ard