1
Write a post

Parse Dashboard on Heroku in 3 Steps

Published Apr 20, 2016Last updated Jan 18, 2017
Parse Dashboard on Heroku in 3 Steps

With the imminent shutdown of Parse, the team behind it have been hard at work open sourcing a replacement in the form of Parse Server. In addition, the team has also open-sourced the Parse Dashboard - the management dashboard that lets you view, query and manage all the data in your Parse instances.

There are plenty of articles for setting up Parse Server on different platforms but not much about setting up Parse Dashboard. In this article, we'll go through the steps of getting Parse Dashboard deployed on Heroku free account in 15 minutes.

Before we start

You'll need the following:

1) Get started

We're going to be doing everything in a shell/terminal.

$ mkdir my-parse-dashboard

$ cd my-parse-dashboard

$ git init

$ npm init

$ npm install --save parse-dashboard

For npm init you can enter anything that makes sense.

2) Create 2 files

Now we need to create 2 files: parse-dashboard-config.json and a Procfile:

parse-dashboard-config.json

{
  "apps": [
    {
      "serverURL": "https://api.parse.com/1", // For an app still hosted on Parse.com
      "appId": "myAppId",
      "javascriptKey": "myJavascriptKey",
      "restKey": "myRestKey",
      "appName": "My Parse.Com App",
      "production": true
    },
    {
      "serverURL": "https://my-self-hosted.parse-server.com/parse",
      "appId": "myAppId",
      "masterKey": "myMasterKey",
      "appName": "My Parse Server App"
    }
  ],
  "users": [
    {
      "user":"user1",
      "pass":"pass" // change this to something secure
    }
  ]
}

The serverUrl property can be either:

  • your own hosted version of parse-server on Heroku, AWS, Digital Ocean or wherever you have it setup
  • An app still hosted on Parse.com - in this case you'll need to get the keys, from the existing dashboard on Parse.com

There are more examples and documentation here for the config file format: https://github.com/ParsePlatform/parse-dashboard

Procfile

The contents of this should be one line:

web: ./node_modules/.bin/parse-dashboard --config ./parse-dashboard-config.json --allowInsecureHTTP

This file tells Heroku how to launch your app.

Important Note: In general the --allowInsecureHTTP flag should not be set as it means the data will be sent over HTTP and could susceptible to MITM attacks. However on Heroku this is needed because all apps are sat behind a proxy which terminates secure HTTPS requests for you. There is a ticket open on the dashboard project to improve this support for this https://github.com/ParsePlatform/parse-dashboard/issues/288. You should always access your app using the https protocol when.

3) Commit it and let's go live!

Now it’s time to commit all of this to git:

$ git add package.json Procfile parse-dashboard-config.json

$ git commit -m "My First Commit"

Then run:

$ heroku login 

$ heroku create

$ git push heroku master

$ heroku ps:scale web=1

$ heroku open

This will create a new app, a URL for you, push all the code to Heroku, kick off the web server and open your web browser to your new Parse Dashboard!

Your Heroku Hosted Parse Dashboard

That’s it ☺ Not too bad, was it?

Discover and read more posts from Matt Goldspink
get started
Enjoy this post?

Leave a like and comment for Matt

25Replies
Karl Schiffmann
5 months ago

Everything went fine until going to open the app… and it crashed. Do we need to have a “registryUrl” defined? Any ideas? Thanks for your time…

This is line 10 of index.js:

var regUrl = registryUrl(scope);

Here is a part of the log on Heroku:

2017-03-03T22:26:42.662906+00:00 app[web.1]: at module.exports (/app/node_modules/package-json/index.js:10:15)

2017-03-03T22:26:42.662906+00:00 app[web.1]: at Object.<anonymous> (/app/node_modules/parse-dashboard/Parse-Dashboard/app.js:12:1)

2017-03-03T22:26:42.662908+00:00 app[web.1]: at Object.Module._extensions…js (module.js:579:10)

2017-03-03T22:26:42.662908+00:00 app[web.1]: at Module.load (module.js:487:32)

2017-03-03T22:26:42.785368+00:00 heroku[web.1]: State changed from starting to crashed

2017-03-03T22:26:42.763461+00:00 heroku[web.1]: Process exited with status 1

Po Tato
a year ago

i had follow ur example login work but the dash board cant connect to my app server on heroku, it said server is unreachable. oh and i had delete this line

{

“serverURL”: “https://api.parse.com/1”, // For an app still hosted on Parse.com

“appId”: “myAppId”,

“javascriptKey”: “myJavascriptKey”,

“restKey”: “myRestKey”,

“appName”: “My Parse.Com App”,

“production”: true

},
because i dont want parse app on my dashboard is there anything i had done wrong ?

Roman
9 months ago

In case anyone else had this issue, I was able to resolve it in my case by changing the serverURL from http to https for my heroku hosted parse server.

Tim Whiting
9 months ago

I had been having the same problem for days and only now thought to look down and see if there were comments. Please could you update this in the original tutorial to save others this distress!

Matt Goldspink
9 months ago

Hi @tim_whiting:disqus - sorry for the trouble it caused you. What exactly was the issue? Is it that your server is being hosted on “https” and not “http”?

Roman
9 months ago

Yup, even though you could access it using http via browser, in the config file it had to be set to https.

Matt Goldspink
9 months ago

Thanks for confirming @Roman I haven’t upgraded our dashboard since the article was written, so I’m guessing this is something that might have changed. It’s updated now.

Yan Zhang
a year ago

Thanks a lot for your tutorial! I made my installation successfully on Heroku !

Show more replies

Get curated posts in your inbox

Learn programming by reading more posts like this