Deployed with Helm but blank web GUI

[rsmithcooper]

I am testing out Verdaccio and did a quick deployment using the Helm chart and everything comes up just fine but when i navigate to the URL, the GUI is just a blank white page.

If i try to use the example they gave below, setting some basic values, all i get is the same white page but with "html before webpack scripts" on it.

https://verdaccio.org/docs/webui

I have no web dev experience and am just an infra guy who was asked to spin up a private NPM registry and I wanted to test this out. Is there not some default GUI?

[juanpicado]

What do you see in the chrom dev tools ?

[rsmithcooper]

Below is the values.yml I used. I deployed my ingress separately and seems to be working just fine.

image:
  repository: verdaccio/verdaccio
  # tag: 5.21.1
  pullPolicy: IfNotPresent
  pullSecrets: []
    # - dockerhub-secret

nameOverride: ""
fullnameOverride: ""

service:
  annotations: {}
  clusterIP: ""

  ## List of IP addresses at which the service is available
  ## Ref: https://kubernetes.io/docs/user-guide/services/#external-ips
  ##
  externalIPs: []

  loadBalancerIP: ""
  loadBalancerSourceRanges: []
  port: 4873
  type: ClusterIP
  # nodePort: 31873

## Node labels for pod assignment
## Ref: https://kubernetes.io/docs/user-guide/node-selection/
##
nodeSelector: {}

## Affinity for pod assignment
## Ref: https://kubernetes.io/docs/concepts/scheduling-eviction/assign-pod-node/#node-affinity
##
affinity: {}

## Tolerations for nodes
tolerations: []

## Additional pod labels
## ref: https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/
##
podLabels: {}

## Additional pod annotations
## ref: https://kubernetes.io/docs/concepts/overview/working-with-objects/annotations/
##
podAnnotations: {}

replicaCount: 1

## Define Probes
## ref: https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/#configure-probes
livenessProbe: 
  enabled: false
  # periodSeconds: 10
  # timeoutSeconds: 1
  # successThreshold: 1
  # failureThreshold: 3
readinessProbe: 
  enabled: false
  # periodSeconds: 10
  # timeoutSeconds: 1
  # successThreshold: 1
  # failureThreshold: 3

resources: {}
  # requests:
  #   cpu: 100m
  #   memory: 512Mi
  # limits:
  #   cpu: 100m
  #   memory: 512Mi

ingress:
  enabled: false
  className: ""
  paths:
    - /
  # Use this to define, ALB ingress's actions annotation based routing. Ex: for ssl-redirect
  # Ref: https://kubernetes-sigs.github.io/aws-load-balancer-controller/latest/guide/tasks/ssl_redirect/
  extraPaths: []
# hosts:
#   - npm.blah.com
# annotations:
#   kubernetes.io/ingress.class: nginx
# tls:
#   - secretName: secret
#     hosts:
#       - npm.blah.com

## Service account
serviceAccount:
  # Specifies whether a service account should be created
  create: false
  # Annotations to add to the service account
  annotations: {}
  # The name of the service account to use.
  # If not set and create is true, a name is generated using the Chart's fullname template
  name: ""

# Extra Environment Values - allows yaml definitions
extraEnvVars:
#  - name: VALUE_FROM_SECRET
#    valueFrom:
#      secretKeyRef:
#        name: secret_name
#        key: secret_key
#  - name: REGULAR_VAR
#    value: ABC

## Secret Environment Variables
## Use this to pass sensitive key:values to the container via k8s secret
secretEnvVars: {}
  # SECRET_ENV_VAR: secretValue
  # corp_artifactory: foo
  # npmjs: bar

## Existing Secret
## Existing secret containing environment variables to be passed to the container
existingSecret: ""

# Extra Init Containers - allows yaml definitions
extraInitContainers: []

configMap: |
  # This is the config file used for the docker images
  # It allows all users to do anything, so don't use it on production systems.
  #
  # Do not configure host and port under `listen` in this file
  # as it will be ignored when using docker.
  # see https://github.com/verdaccio/verdaccio/blob/master/docs/docker.md#docker-and-custom-port-configuration
  #
  # Look here for more config file examples:
  # https://github.com/verdaccio/verdaccio/tree/master/conf
  #

  # path to a directory with all packages
  storage: /verdaccio/storage/data

web:
  enable: true
  title: Verdaccio
  primary_color: '#4b5e40'
  gravatar: true 
  scope: '@scope'
  sort_packages: asc 
  darkMode: false
  rateLimit:
    windowMs: 50000
    max: 1000
  pkgManagers:
    - npm
    - yarn
    - pnpm
  login: true
  scriptsBodyAfter:
    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
  metaScripts:
    - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
    - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
    - '<meta name="robots" content="noindex" />'
  scriptsbodyBefore:
    - '<div id="myId">html before webpack scripts</div>'
  html_cache: true
  showInfo: true
  showSettings: true
  showThemeSwitch: true
  showFooter: true
  showSearch: true
  showDownloadTarball: true
  showRaw: true

  auth:
    htpasswd:
      # Do not change this path if secrets htpasswd is used.
      file: /verdaccio/storage/htpasswd
      # Maximum amount of users allowed to register, defaults to "+infinity".
      # You can set this to -1 to disable registration.
      #max_users: 1000

  # a list of other known repositories we can talk to
  uplinks:
    npmjs:
      url: https://registry.npmjs.org/
      agent_options:
        keepAlive: true
        maxSockets: 40
        maxFreeSockets: 10

  packages:
    '@*/*':
      # scoped packages
      access: $all
      publish: $authenticated
      proxy: npmjs

    '**':
      # allow all users (including non-authenticated users) to read and
      # publish all packages
      #
      # you can specify usernames/groupnames (depending on your auth plugin)
      # and three keywords: "$all", "$anonymous", "$authenticated"
      access: $all

      # allow all known users to publish packages
      # (anyone can register by default, remember?)
      publish: $authenticated

      # if package is not available locally, proxy requests to 'npmjs' registry
      proxy: npmjs

  # To use `npm audit` uncomment the following section
  middlewares:
    audit:
      enabled: true

  # log settings
  log: {type: stdout, format: pretty, level: http}
  # log: {type: file, path: verdaccio.log, level: info}

persistence:
  enabled: true
  ## A manually managed Persistent Volume and Claim
  ## Requires Persistence.Enabled: true
  ## If defined, PVC must be created manually before volume will be bound
  # existingClaim:

  ## Verdaccio data Persistent Volume Storage Class
  ## If defined, storageClassName: <storageClass>
  ## If set to "-", storageClassName: "", which disables dynamic provisioning
  ## If undefined (the default) or set to null, no storageClassName spec is
  ##   set, choosing the default provisioner.  (gp2 on AWS, standard on
  ##   GKE, AWS & OpenStack)
  ##
  # storageClass: "-"

  accessMode: ReadWriteOnce
  size: 8Gi
  ## selector can be used to match an existing PersistentVolume
  ## selector:
  ##   matchLabels:
  ##     app: my-app
  selector: {}

  volumes:
  #  - name: nothing
  #    emptyDir: {}
  mounts:
  # - mountPath: /var/nothing
  #   name: nothing
  #   readOnly: true

podSecurityContext:
  fsGroup: 101
securityContext:
  runAsUser: 10001

priorityClass:
  enabled: false
  # name: ""

existingConfigMap: false

# Secrets
secrets:
  # list of users and password for htpasswd plugin
  # This this is mounted as /verdaccio/auth/htpasswd on pods
  htpasswd: []
  # - username: "test"
  #   password: "test"
  # - username: "blah"
  #   password: "blah"

# Annotations to set on the deployment
annotations: {}

and below is the dev tools output:

Again, I don't know much about web dev or what I was supposed to declare in the configMap to get a GUI, when it was just enabled, it was a blank white screen. I presumed there was some default interface. Just wanted to deploy it and pass it off for testing. Any help is appreciated with just getting some basic GUI.