Set up a Parse-Dashboard in 10 minutes

Is your New Year’s resolution to go all in on the open source parse-server? You’ll want to set up a parse-dashboard to give you easy access to your database. If you have more questions about parse or how to migrate from parse, check out How to migrate from Parse part 1, 2, & 3.

parse-dashboard is a component of the Parse Platform. It is very similar to the dashboard on Parse’s hosted service, but you’ll have to roll your own server to get it up and running.

In this guide, I’ll show you a quick and easy way to get your parse-dashboard up and running on Heroku. The priority of this guide is to get you up and running so you can focus on what matters most — writing code.

Let’s get started!

Configuring parse-dashboard

1. Start by cloning parse-dashboard from the official repo:

$ cd your/billion/dollar/ideas
$ git clone https://github.com/ParsePlatform/parse-dashboard.git

2. cd into the parse-dashboard directory you just cloned. Use ls to see the contents. There are only three files you need to be concerned with:

./package.json
./Parse-Dashboard/index.js
./Parse-Dashboard/parse-dashboard-config.json

3. Open ./Parse-Dashboard/parse-dashboard-config.json in your favorite text editor. This file allows you to easily configure parse-dashboard for any number of apps and users. You have two tasks while you’re in here: configure an app and configure a user.

4. To configure an app you need to fill in the serverURL , appId, masterKey, and appName fields. Optionally you can include an app icon using the iconName property. You may also want to mark your production apps by using "production": "true". (note: "production": "false" will also cause this app to appear as a production app in the parse-dashboard UI)

"apps":[
  {
      "serverURL": "https://YOUR-APP.herokuapp.com/parse",
      "appId": "YOUR-APP-ID",
      "masterKey": "YOUR-MASTER-KEY",
      "appName": "Your App Name",
      "iconName": ""
      "production": "true"
  }
]

5. Notice that apps is an array. If you want to add more apps then just add a comma after the first app and copy paste your way to success. This is handy if you have both a dev and prod environment that you want parse-dashboard to interface with.

6. Since you’re deploying to Heroku, you’ll also need to configure at least one user. This will add authentication that prevents your masterKey from leaking to anybody with the URL for your parse-dashboard. Add a users array to your config:

{
  "apps": [...],
  "users": [
   {
    "user":"<Your Name>",
    "pass":"<Your Very Secure Password>"
   }
  ],
  "iconsFolder": "icons"
}

Great! You are now configured. Next, you will need to get a server up and running on Heroku.

Create a Heroku App

7. If you haven’t already, create an account on Heroku and install the Heroku Toolbelt.

8. In your terminal window make sure you are in the root off the parse-dashboard project. Use Heroku Toolbelt to create a new server:

$ heroku create <your-app-parse-dashboard>

9. Now, enable PARSE_DASHBOARD_ALLOW_INSECURE_HTTP. I know what you’re thinking: this is scary. And it should be. But you’re well prepared. Heroku is handling HTTPS and you added authentication in step 6. Use the following command to set the config var:

$ heroku config:set PARSE_DASHBOARD_ALLOW_INSECURE_HTTP=true

10. Use Git to deploy parse-dashboard to the new Heroku app:

$ git commit -am "initial configuration"
$ git push heroku master

11. Visit the URL for your parse-dashboard (https://<your-app-parse-dashboard>.herokuapp.com). Blank screen? No worries, parse-dashboard has a few scripts that need to run before it can run on a Heroku server. Fortunately, the team at Parse has made this super easy. All you need to do is make a tiny modification.

12. You will point index.js to parse-dashboard on NPM. Open up package.json and add "parse-dashboard": "^1.0.22" in the "dependencies" section.

13. Now modify index.js. Open ./Parse-Dashboard/index.js in your favorite text editor. Go to line 13. It should look like this:

const parseDashboard = require('./app');

Change it to:

const parseDashboard = require('parse-dashboard');

Now, index.js will utilize the parse-dashboard NPM package which handles deploying to Heroku seamlessly.

14. Deploy to Heroku:

$ git commit -am "added parse-dashboard from NPM"
$ git push heroku master

15. Visit the URL for your parse-dashboard again. You should be presented with a login window. After you type in your credentials you should see the familliar UI of the hosted Parse Dashboard, only this time it’s running on your Heroku server.

Hurray! That’s all. Now you can cross off your New Year’s resolutions for going open source and doing less work.

Go Nimbly is the premier marketing and sales consultancy for SaaS companies. Founded and headquartered in San Francisco, Go Nimbly provides customers with a customized team to manage everything from strategy to execution for their marketing and sales systems. To learn more, visit gonimbly.com.