# Environment specific SPA url

**URL:** <https://community.bloomreach.com/t/environment-specific-spa-url/2127>\
**Category:** Experience Manager (PaaS/OnPrem)\
**Created:** [September 25, 2020, 12:34pm UTC](https://community.bloomreach.com/t/environment-specific-spa-url/2127 "2020-09-25T12:34:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jesper\_Volkers](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/jesper_volkers/32/146_2.png) [@Jesper\_Volkers](https://community.bloomreach.com/u/Jesper_Volkers)\
**Post date:** [September 25, 2020, 12:34pm UTC](https://community.bloomreach.com/t/environment-specific-spa-url/2127/1 "2020-09-25T12:34:01Z")

</div>

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 🙂 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 🙂.

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](https://documentation.bloomreach.com/14/library/concepts/spa-integration/configure-hst-for-spa-sdk.html)

---

<div class="post-metadata">

**Author:** ![Jesper\_Volkers](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/jesper_volkers/32/146_2.png) [@Jesper\_Volkers](https://community.bloomreach.com/u/Jesper_Volkers)\
**Post date:** [September 30, 2020, 2:23pm UTC](https://community.bloomreach.com/t/environment-specific-spa-url/2127/2 "2020-09-30T14:23:16Z")

</div>

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:

```auto
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:

```auto
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

---

<div class="post-metadata">

**Author:** ![ard.schrijvers](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/ard.schrijvers/32/309_2.png) [@ard.schrijvers](https://community.bloomreach.com/u/ard.schrijvers)\
**Post date:** [September 30, 2020, 2:58pm UTC](https://community.bloomreach.com/t/environment-specific-spa-url/2127/3 "2020-09-30T14:58:54Z")

</div>

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](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](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](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](https://documentation.bloomreach.com/14/library/concepts/page-model-api/configuration.html)  
[2] [https://issues.onehippo.com/browse/CMS-14022](https://issues.onehippo.com/browse/CMS-14022)

---

<div class="post-metadata">

**Author:** ![Jesper\_Volkers](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/jesper_volkers/32/146_2.png) [@Jesper\_Volkers](https://community.bloomreach.com/u/Jesper_Volkers)\
**Post date:** [September 30, 2020, 3:15pm UTC](https://community.bloomreach.com/t/environment-specific-spa-url/2127/4 "2020-09-30T15:15:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ard.schrijvers](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/ard.schrijvers/32/309_2.png) [@ard.schrijvers](https://community.bloomreach.com/u/ard.schrijvers)\
**Post date:** [September 30, 2020, 3:27pm UTC](https://community.bloomreach.com/t/environment-specific-spa-url/2127/5 "2020-09-30T15:27:31Z")

</div>

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