Parse Dashbard - spinning balls & white screen

I am trying to deploy the parse-community’s Docker container images. I had previously got this working with Bitnami versions of the images, however with further customisation needed, it might be simpler to base off the official images(?)

I have re-used as much of the parse-server’s configuration. MongoDB and Parse-server are in the same Docker stack (issued from docker-compose). The Dashboard is a separate stack. Both stacks initialise fine, according to the Docker logs.

If I browse to http://docker-host:1339/parse (yes, on a custom port number) after deployment, I get the typical:

{“error”:“unauthorized”}

Starting the dashboard after this, I authenticate. 4 spinning balls / colors appear, and then I get a permanent white screen. I had this previously with the Bitnami images / configuration but the Docker logs suggest my Parse-server has started successfully.

If I attempt the install guide’s first curl POST command, I also get the same message returned at the terminal:

{“error”:“unauthorized”}

parse-server stack:

version: '2.4'
services:
  mongodb:
    image: mongo:4.2
    environment:
      - PUID=1001
      - PGID=1001
      - TZ=Europe/London
    volumes:
      - vol_parse_mongodb:/data/db
  parse:
    image: parseplatform/parse-server:4.2.0
    environment:
      - PUID=1001
      - PGID=1001
      - PORT=${VAR_PARSE_PORT}
      - PARSE_SERVER_APPLICATION_ID=myappID
      - PARSE_SERVER_MASTER_KEY=mymasterKey
      - PARSE_SERVER_URL=http://docker-host:${VAR_PARSE_PORT}/parse
      - PARSE_SERVER_DATABASE_URI=mongodb://mongodb/parse
      - PARSE_ENABLE_CLOUD_CODE=yes
      - PARSE_SERVER_CLOUD=/parse-server/cloud/main.js
      - PARSE_SERVER_FILES_ADAPTER="@parse/s3-files-adapter"
      - S3_ACCESS_KEY=access_key
      - S3_SECRET_KEY=secret_key
      - S3_BUCKET=s3-bucket
      - S3_REGION=eu-west-2
      - S3_BUCKET_PREFIX=test1339
      - S3_DIRECT_ACCESS=true
      - PARSE_SERVER_PUSH={"ios":{"pfx":"/parse-server/pushcert/prod.p12","topic":"com.domain.Parse-1","production":false}}
      - VERBOSE=true
#      - PARSE_SERVER_LOG_LEVEL=error
    ports:
      - ${VAR_PARSE_PORT}:${VAR_PARSE_PORT}
    volumes:
      - vol_parse_app:/parse-server/config
      - vol_parse_cloud_data:/parse-server/cloud
      - vol_parse_push_cert:/parse-server/pushcert
    depends_on:
      - mongodb
    links:
      - mongodb:mongodb
    dns: 192.168.0.5
    dns_search: network.local
volumes:
  vol_parse_mongodb:
  vol_parse_app:
  vol_parse_cloud_data:
    external: true
  vol_parse_push_cert:
    external: true

networks:
  default:
    external:
      name: dockerlan

dashboard docker run command (not converted to Docker Compose file yet):

sudo docker run -d -p 4049:4040 -v /path/to/container/config/parse-dashboard-config.json:/src/Parse-Dashboard/parse-dashboard-config.json parseplatform/parse-dashboard --allowInsecureHTTP=1

with the attached config file:

{
  "apps": [
    {
      "serverURL": "http://docker-host:1339/parse",
      "appId": "myappId",
      "masterKey": "mymasterKey",
      "appName": "MyApp"
    }
  ],
  "users": [
    {
      "user": "user",
      "pass": "pass"
    }
  ],
  "useEncryptedPasswords": false
}

The parse-server’s Docker logs are:

Passing AWS credentials to this adapter is now DEPRECATED and will be removed in a future version See: https://github.com/parse-server-modules/parse-server-s3-adapter#aws-credentials for details,
allowClientClassCreation: true,
appId: myappID,
cacheMaxSize: 10000,
cacheTTL: 5000,
cloud: /parse-server/cloud/main.js,
customPages: {},
databaseURI: mongodb://mongodb/parse,
enableAnonymousUsers: true,
expireInactiveSessions: true,
filesAdapter: @parse/s3-files-adapter,
graphQLPath: /graphql,
host: 0.0.0.0,
logsFolder: ./logs,
masterKey: REDACTED,
masterKeyIps: ,
maxUploadSize: 20mb,
mountPath: /parse,
objectIdSize: 10,
playgroundPath: /playground,
port: 1339,
protectedFields: {"_User":{"*":[“email”]}},
push: {“ios”:{“pfx”:"/parse-server/pushcert/prod.p12",“topic”:“com.domain.Parse-1”,“production”:false}},
revokeSessionOnPasswordReset: true,
schemaCacheTTL: 5000,
serverURL: http://docker-host:1339/parse,
sessionLength: 31536000,
verbose: true,
allowCustomObjectId: false,
collectionPrefix: ,
directAccess: false,
enableExpressErrorHandler: false,
enableSingleSchemaCache: false,
mountGraphQL: false,
mountPlayground: false,
preserveFileName: false,
preventLoginWithUnverifiedEmail: false,
scheduledPush: false,
verifyUserEmails: false,
jsonLogs: false,
level: verbose,
,
[1] parse-server running on http://docker-host:1339/parse,

Can you please check the error message in the web browser console and also the network request you have in your browser when you try to open the dashboard?

Nothing appears in the Docker logs for this browser request, via Portainer.

In Safari JS Console:

I also had this issue. Reason was, one of my parameters for parse dashboard (for example app Id Master key) was invalid.

This error also happens when you pass https url but your server uses http

Yes a security for security purpose http is blocked by default.
Here a config that i use in production:

Note: trustProxy allow to use http (my apps run behind a SSL Nginx Proxy #Kubernetes)

const dashboard = new ParseDashboard(
    {
        apps: [
            {
                serverURL: process.env.PUBLIC_PARSE_URL,
                appId: process.env.APP_ID,
                masterKey: process.env.MASTER_KEY,
                appName: 'A Super App',
                graphQLServerURL: process.env.PUBLIC_GRAPHQL_URL,
            },
        ],
        trustProxy: true,
        users:
            process.env.NODE_ENV !== 'production'
                ? undefined
                : [
                        {
                            user: process.env.DASHBOARD_ADMIN,
                            pass: process.env.DASHBOARD_PASSWORD,
                        },
                  ],
    },
    { dev: true, cookieSessionSecret: process.env.DASHBOARD_SESSION_SECRET || 'test' },
)

@uzaysan thanks for the comment. I think this too. Can you identify any incorrect parameters?

My experience so far has been that if the Docker log’s show the list of set parameters / variables after deploying, as I provided above, the container should work… When I have set them incorrectly, at least on the Bitnami images, the process errors and I am able to troubleshoot the failure.

@Moumouls I tried adding the "trustProxy": true, line to my Dashboard’s config file - it did not change any behaviour. I actually thought I was specifying the http override in my Docker run command with the --allInsecureHTTP=1 parameter.

Have you try the dev: true option too ?

1 Like

Tried adding --dev to the end of the docker run command. Same behaviour (white screen).

Do you have to deploy dashboard to same machine with parse server?

I installed parse-dashboard to my personal computer. When I need it I run this command.
parse-dashboard --dev --appId yourAppID --masterKey yourSecretMasterKey --serverURL yourParseServerURL

Then you will se this message:
The dashboard is now available at http://0.0.0.0:4040/

Then use dashboard in browser. Just install it to your personal computer. It worked fine for me. I think It will work for you.

Some unrelated question: Why did you install dashboard to same machine with parse server? What are the reason behind this? Advantages? Pros? Cons?

All running on a single host for pure simplicity. Its the singular computer on my local LAN with Docker running, enough capacity, SW RAID configuration to persist data, etc. And also because I don’t have any components installed on my local laptop, such as docker.

Once initial dev / PoC work is completed, it would be migrated to an AWS environment - which should be able to largely copy/paste the final configurations.

@splitlamp did you reference the docker setup I sent you in the adapter discussion? That one spins up parse and dashboard in the same compose file. It will be exactly the same, except you use mongo instead of postgres. Your dashboard start command isn’t correct for docker, you need to start up in dev mode. In the link on the previous post, I start dashboard in docker using parse-dashboard --dev, you will need to do the command line equivalent or add to your docker-compose file the way I did.

I will say that I had a white screen issue similar to what you are describing at one point when using parseplatform/parse-dashboard:latest. Instead, parseplatform/parse-dashboard:2.0.5 didn’t give me a white screen.

Note that docker setup in my link above is a simpler version of my actual production setup. For the setup I have 10+ parse apps (some mongo, some postgres) running behind Nginx as a proxy and load balancer to 3 machines. Dashboard is running on all 3 and requests are load balanced to each. Each system has a SW raid as you mentioned.

To run behind a proxy, you will need to do some additional things that @Moumouls mentioned (the environment variables would need to be added to your index.js as he showed). You can use what I have below for this dashboard:

dashboard:
    image: parseplatform/parse-dashboard:latest
    environment:
      - PARSE_DASHBOARD_TRUST_PROXY=1
      - PARSE_DASHBOARD_COOKIE_SESSION_SECRET=Supply yours
      - MOUNT_PATH=/dashboard
    volumes:
      - ../parse/dashboard_docker/parse-dashboard-config-uk.json:/src/Parse-Dashboard/parse-dashboard-config.json
      - ../parse/dashboard_docker/icons:/src/Parse-Dashboard/icons
    command: parse-dashboard --dev
    restart: always

Note that you will also have to configure your MOUNT_PATH to be exactly the same as what you have in Nginx or Dashboard won’t work properly.

For some reason, when I use parseplatform/parse-dashboard:latest behind a proxy and when load balancing, I get the white screen one I first access my dashboard, but then it works correctly. When doing an individual setup similar to yours, I had to use parseplatform/parse-dashboard:2.0.5

For @uzaysan I’m not sure why running dashboard on a different machine matters? Running dashboard on the same machine, different machine should suffice. I only see a con with your method, which is, you are required to have a second machine that needs to be setup

To start, thanks all for assisting. I seem to have fixed the problem, but I am really confused as to why…

I was following @cbaker6’s post from my other thread (thanks for that too, by the way), re-reading. I decided to create a new Docker instance based from @cbaker6’s docker-compose.yml.

Part way through re-writing this, I had a thought and bounced over to my original docker config. I edited the dash’s parse-dashboard-config.json, the appId property - hadn’t noticed it was incorrect. After issuing the command and waiting for the container to start, I retried the browser (local browser, @uzaysan, connecting over my LAN) and it loaded after authenticating, the spinning balls disappear promptly.

The bit that doesn’t make any sense, is I then retried the curl command from the opening post, edited based upon the documentation:

curl -X POST \
-H "X-Parse-Application-Id: APPLICATION_ID" \
-H "Content-Type: application/json" \
-d '{"score":123,"playerName":"Sean Plott","cheatMode":false}' \
http://localhost:1337/parse/classes/GameScore

Changed, to my container’s config.

This time, it worked and saved to the DB. The original error message went away:
{“error”:“unauthorized”}

I just cannot fathom why… It was the same command as I pressed up within my bash shell session’s history. But the only config I changed was within the dashboard’s config which shouldn’t have caused the POST command to fail.

Thanks a lot. I was using https when trying to start the dashboard and couldn’t find out why it wasn’t working.

Hello, I am also running into this issue when setting up a local environment with parse-server and parse-dashboard.

When connecting to my local parse-server which is running on http://localhost:1337/parse
I get the {“error”:“unauthorized”} message in the browser.

I installed parse-server using the guide from the docs Parse Server Guide | Parse

The only errors I see are the ones in the browser when looking in the console such as: Screenshot 2021-11-03 at 14.21.39

I have created a stack overflow article describing the process and issue. I am running on Mac OS.

When I use parse-dashboard with alternative connection information to our AWS cloud everything works and the parse app shows the data.

Any help would be appreciated.

Thanks

Would you mind to share your settings for parse server and parse dashboard?

Absolutely, here is the log from starting the parse-server:
allowClientClassCreation: true
appId: micpPYay5siq0wmzdvNk2oAfo22VYK2qD79fiptZ
appName: myname
cacheMaxSize: 10000
cacheTTL: 5000
cloud: ./cloud/main
customPages: {}
databaseURI: mongodb://127.0.0.1:27017/parse
enableAnonymousUsers: true
expireInactiveSessions: true
graphQLPath: /graphql
host: 0.0.0.0
logsFolder: ./logs
masterKey: REDACTED
masterKeyIps:
maxUploadSize: 20mb
mountPath: /parse
objectIdSize: 10
playgroundPath: /playground
port: 1337
protectedFields: {"_User":{"*":[“email”]}}
revokeSessionOnPasswordReset: true
schemaCacheTTL: 5000
sessionLength: 31536000
allowCustomObjectId: false
collectionPrefix:
directAccess: false
enableExpressErrorHandler: false
enableSingleSchemaCache: false
mountGraphQL: false
mountPlayground: false
preserveFileName: false
preventLoginWithUnverifiedEmail: false
scheduledPush: false
skipMongoDBServer13732Workaround: false
verifyUserEmails: false
jsonLogs: false
verbose: false
level: undefined
serverURL: http://localhost:1337/parse

This is the standard command i am loading the parse-dashboard with:
parse-dashboard --appId micpPYay5siq0wmzdvNk2oAfo22VYK2qD79fiptZ --masterKey myMasterkey --serverURL “http://localhost:1337/parse” --appName myname

try add --dev option to your parse dashboard command. As far as I know dashboard doesnt allow http connection and require ssl certificate. You can bypass this with enabling development mode. Your command should be

parse-dashboard --dev --appId micpPYay5siq0wmzdvNk2oAfo22VYK2qD79fiptZ --masterKey myMasterkey --serverURL “http://localhost:1337/parse” --appName myname

Thank you for responding on this one. Yes adding --dev has been tried without success.

I see that you said you are getting error unauthorized when you go to http://localhost:1337/parse on browser. Maybe one of your parameters are wrong. App Id seems correct. Check your master key. And also remove (") from server url and check again.