DSpace 7.0 Custom Themes (also posted in developers forum)

[Stevenson Gossage]

Hi everyone,

We are using DSPace 7.0, with 2 environments and have been running perfectly well for a few months using 2 AWS ec2 instances, each running Amazon linux VMs with and instance has its own complete dspace installation including DB, front and back end and solr etc. (one instance is for our dev environment and and one for our sandbox environment). We are having some problems with the custom themes where all of a sudden (after restarting our dev instance), our custom theme in our development environment is no longer being applied when we compile for prod (yarn run build:prod and start it via pm2 start dspace-angular.json), but it is applied when we use development mode i.e. yarn run start:dev. We normally only use the production mode in dev and only tried dev mode to trouble shoot this issue with our theme.

To eliminate all possible points of failure we have tried the following:

1. in angular.json we remove all styles but the following:

 "styles": [

              "src/styles/startup.scss",
              {
                "input": "src/themes/wetoverlay/styles/theme.scss",
                "inject": false,
                "bundleName": "wetoverlay-theme"
              }
          ],

2. We deleted  environment.dev.ts and environment.prod.ts  and instead, we are only using environment.common.ts

3. We renamed "src/themes/dspace" to "src/themes/dspaceorig"

4. after starting development mode the auto-generated contents of environment.ts are:

          

export const environment = {"production":false,"ui":{"ssl":false,"host":"localhost","port":4000,"nameSpace":"/","rateLimiter":{"windowMs":60000,"max":500},"baseUrl":"http://localhost:4000/"},"rest":{"ssl":true,"host":"www. myospr.com","port":443,"nameSpace":"/server","baseUrl":"https://www.myospr.com/server"},"cache":{"msToLive":{"default":900000},"control":"max-age=60","autoSync":{"defaultTime":0,"maxBufferSize":100,"timePerMethod":{"PATCH":3}}},"auth":{"ui":{"timeUntilIdle":900000,"idleGracePeriod":300000},"rest":{"timeLeftBeforeTokenRefresh":120000}},"form":{"validatorMap":{"required":"required","regex":"pattern"}},"notifications":{"rtl":false,"position":["top","right"],"maxStack":8,"timeOut":5000,"clickToClose":true,"animate":"scale"},"submission":{"autosave":{"metadata":[],"timer":0},"icons":{"metadata":[{"name":"dc.author","style":"fas fa-user"},{"name":"default","style":""}],"authority":{"confidence":[{"value":600,"style":"text-success"},{"value":500,"style":"text-info"},{"value":400,"style":"text-warning"},{"value":"default","style":"text-muted"}]}}},"universal":{"preboot":true,"async":true,"time":false},"debug":false,"defaultLanguage":"en","languages":[{"code":"en","label":"English","active":true},{"code":"fr","label":"Français","active":true}],"browseBy":{"oneYearLimit":10,"fiveYearLimit":30,"defaultLowerLimit":1900,"types":[{"id":"title","type":"title"},{"id":"dateissued","type":"date","metadataField":"dc.date.issued"},{"id":"author","type":"metadata"},{"id":"subject","type":"metadata"}]},"item":{"edit":{"undoTimeout":10000}},"collection":{"edit":{"undoTimeout":10000}},"themes":[{"name":"wetoverlay"}],"mediaViewer":{"image":true,"video":false}}

5. after starting production mode (yarn run build:prod followed by pm2 start dspace-angular.json) the auto-generated contents of environment.ts"

export const environment = {"production":true,"ui":{"ssl":false,"host":"localhost","port":4000,"nameSpace":"/","rateLimiter":{"windowMs":60000,"max":500},"baseUrl":"http://localhost:4000/"},"rest":{"ssl":true,"host":"www. myospr.com","port":443,"nameSpace":"/server","baseUrl":"https://www. myospr.com/server"},"cache":{"msToLive":{"default":900000},"control":"max-age=60","autoSync":{"defaultTime":0,"maxBufferSize":100,"timePerMethod":{"PATCH":3}}},"auth":{"ui":{"timeUntilIdle":900000,"idleGracePeriod":300000},"rest":{"timeLeftBeforeTokenRefresh":120000}},"form":{"validatorMap":{"required":"required","regex":"pattern"}},"notifications":{"rtl":false,"position":["top","right"],"maxStack":8,"timeOut":5000,"clickToClose":true,"animate":"scale"},"submission":{"autosave":{"metadata":[],"timer":0},"icons":{"metadata":[{"name":"dc.author","style":"fas fa-user"},{"name":"default","style":""}],"authority":{"confidence":[{"value":600,"style":"text-success"},{"value":500,"style":"text-info"},{"value":400,"style":"text-warning"},{"value":"default","style":"text-muted"}]}}},"universal":{"preboot":true,"async":true,"time":false},"debug":false,"defaultLanguage":"en","languages":[{"code":"en","label":"English","active":true},{"code":"fr","label":"Français","active":true}],"browseBy":{"oneYearLimit":10,"fiveYearLimit":30,"defaultLowerLimit":1900,"types":[{"id":"title","type":"title"},{"id":"dateissued","type":"date","metadataField":"dc.date.issued"},{"id":"author","type":"metadata"},{"id":"subject","type":"metadata"}]},"item":{"edit":{"undoTimeout":10000}},"collection":{"edit":{"undoTimeout":10000}},"themes":[{"name":"wetoverlay"}],"mediaViewer":{"image":true,"video":false}}

As far as I can tell the only difference between the auto-generated environment.ts files is the boolean value for "production"; however, in dev mode we get our custom "wetoverlay" theme but in prod mode we get the original dspace theme

6. the contents of my dspace-angular.json (for starting DSpace in prod):

{
    "apps": [
        {
            "name": "dspace-angular",
            "cwd": "/mypath/dspace-angular",
            "script": "yarn",
            "args": "run serve:ssr",
           "interpreter": "none"
        }
    ]
}

Thanks for your help,

Stevenson

[Tim Donohue]

Hi Stevenson,

This is an odd error to me, and nothing is jumping out as "wrong" in the setup you've shared.  It almost sounds like an unexpected configuration is being loaded...but your environment.ts file "looks" correct.

I'm not sure what to suggest here.  You could see if you can find a way to replicate this issue on a different machine when just running `yarn run serve:ssr` (like your PM2 setup does).  If you can replicate it elsewhere it's possibly a bug. If you cannot, then maybe it'll help narrow things down and lead you to what the differences may be between a local setup and your EC2 environment.

But, I did want to point out that we've overhauled the configuration a bit in 7.2 -- it's now a YAML config file which is loaded *at runtime* (i.e. at the time when you start the UI via Node or PM2), and allowing you to also use environment variables.  You *might* consider looking at an upgrade to see if the new configuration structure either fixes the issue, or helps in debugging the issue.  (You could also wait for 7.3 which is currently scheduled for release in early June.)

Tim