× {{alert.msg}} Never ask again
Receive New Tutorials
GET IT FREE

Parse Dashboard on Heroku in 3 steps

– {{showDate(postTime)}}
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?



Author
Matt Goldspink
Matt Goldspink
5.0
Lead engineer with 10+ years development experience & background in delivering training courses
I have been delivering technical training courses for over 7 years on a variety of subjects - I can help by giving full courses, pair programming to help you learn or if you have a specific problem...
Gigs Matt Goldspink can do for you:
Technical Interview Practice

Questions about this tutorial?  Get Live 1:1 help from Node.js experts!
Yuriy Linnyk
Yuriy Linnyk
5.0
14+ years, Full-stack Javascript Developer. I enjoy explaining basics patiently, or move to advanced topics in my expertise anytime.
★ 50% OFF for beginners - read more... ☺︎ Web development is my life, since 2002. For over decade I'm excited to work on the full stack of web...
Hire this Expert
Ashish
Ashish
4.9
Mobile & Full Stack Developer | Consultant | Trainer | Technical Speaker | Startup Founder CTO | JavaScript | jQuery | NodeJS | AngularJS | MongoDB | MeteorJS | ElasticSearch | Firebase | Android | Ionic | Mocha | Digitalocean | MySQL Programmer
Hey Howdy :-) ! Here is my quick video introduction, check this out : https://www.youtube.com/watch?v=xi8cKpGmzZg I have 8 years of...
Hire this Expert

Or Become a Codementor!

Live 1:1 help from expert developers

Codementor is your live 1:1 expert mentor helping you in real time.

comments powered by Disqus
Codementor is your live 1:1 expert helping you in real time