Running Mender GUI standalone - Errors - Need Help

#1

Hi Team,

We would like to customize the Mender GUI to connect to Mender Hosted Server or Mender Server hosted in the cloud. So we cloned the Mender GUI repo from github and installed gulp and tried “gulp build”. This built the project but we are not sure how to run this on localhost and connect to hosted Mender server. When we “Serve” the built code, it gives us following errors:

2(index):1 GET http://localhost:5000/dist/env.js net::ERR_ABORTED 404 (Not Found)
userReducer.js:21 Uncaught TypeError: Cannot read property 'isEnterprise' of undefined

Has anyone tried to just use Mender GUI and successfully able to run standalone? Any guidance will be appreciated.

#2

Hi,
the GUI expects to run inside the container/ docker image it’s distributed in (so the gulp remark is mostly relevant to development on the GUI), which is why you are seeing the error. The mentioned env.js file is a reference to server side configuration that configures the GUI and is set on container startup based on the environment the container is started in (defined here).
But it should be possible to use the GUI outside of the container, if you create the env.js and put it into the dist folder aswell. For your setup I think the content of the env.js should look like

mender_environment = {
    hostAddress: "$HOSTNAME",
    hostedAnnouncement: "",
    isDemoMode: "0",
    features: {
      hasMultitenancy: "1",
      isEnterprise: "0",
      isHosted: "1"
    },
    integrationVersion: "2.3.0",
    menderVersion: "2.2.0",
    menderArtifactVersion: "3.3.0",
    menderDebPackageVersion: "2.2.0",
    metaMenderVersion: "master",
    services: {
      deploymentsVersion: "",
      deviceauthVersion: "",
      guiVersion: "custom",
      inventoryVersion: ""
    },
    demoArtifactPort: "85",
    disableOnboarding: "0"
}

However once this is done you will have to configure your webserver to forward all requests made to paths starting with /api/ to Hosted Mender, since the GUI expects to be run alongside the backend. Or you could prepend the base urls in all the redux action files (these here) to make them point to https://hosted.mender.io/api/… .

It should be possible to run the GUI as standalone, but I’m not entirely sure about possible other implications.

#3

Thank you @mzedel for detailed reply. If we want to run the GUI outside of the container, how can we run it with standard npm or yarn start. So in order to run GUI in standalone:

  1. Clone the GUI repo
  2. Add the env.js as above
  3. Change the redux action files to point them to hosted.mender.io/api/
  4. yarn install, yarn start?
  5. will the hosted.mender username and auth just work? How do we get around CORS?

Will that work?

#4

Just curious, why is it out of the question running it in a container locally?

#5

The steps were almost right, I think the steps should be:

  1. Clone the GUI repo
  2. Change the redux action files to point them to hosted.mender.io/api/
  3. run npm ci && npm run build (or npm run watch during development)
  4. Add the env.js as above (to the dist folder)

with regards to the last point though… that might cause CORS issues indeed - in this case the request rewriting in your webserver config might be easier - that depends a lot on what server you use to serve the files from dist

@oleorhagen what I could image would be to include this in an existing solution, slightly adjusted to better blend in - but of course @jinman knows best, and I’m also curious to know!

#6

@oleorhagen @mzedel we are trying to integrate the mender UI (and really dumbing it down) for industrial customers in our existing solution which is serverless and react app and runs on pure S3/Cloudfront. We cannot run it under a container, unfortunately.

Thanks for the steps. We changed the redux action files to point them to hosted. Unfortunately, we are unable to get passed the CORS issue. We will try to use corsproxy or some other proxyservice that works with S3 hosted static website. Any thoughts will be appreciated.

Thanks
Jin

#7

@mzedel, unfortunately, we are unable to get this to work. using a CORS proxy (lcp --proxyUrl https://hosted.mender.io), gives us an 405 Bad Request ({“error”:“Method not allowed”}). Any thoughts?

#8

Unfortunately I didn’t get to check that issue earlier in depth, but today I finally got around to look into it. Although I didn’t come across the 405 error you are seeing @jinman, I got rejected by the Hosted Mender api gateway with a 400, caused by the wrong origin header being set. The local cors proxy config only allowed me to get around the preflight requests.

To get around the origin header check, this header would have to be overwritten in the proxy (which might cause browser issues) or the origin would have to be whitelisted from our side (defined here: https://github.com/mendersoftware/mender-api-gateway-docker/blob/master/common.nginx.conf#L14 - not sure if/ where the whitelist lives). That’s at least all that I could find.

Consuming the apis from a cli is possible, but circumventing the browser security is most likely not the way to go. So I fear what you want to do might not be possible.