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!
- Start by cloning
parse-dashboardfrom the official repo:
$ cd your/billion/dollar/ideas
$ git clone https://github.com/ParsePlatform/parse-dashboard.git
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:
./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
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
"appName": "Your App Name",
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:
"pass":"<Your Very Secure Password>"
Great! You are now configured. Next, you will need to get a server up and running on Heroku.
Create a Heroku App
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
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
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
parse-dashboard on NPM. Open up
package.json and add
"parse-dashboard": "^1.0.22" in the
13. Now modify
./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');
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.