diff --git a/.github/graphql-playground.png b/.github/graphql-playground.png new file mode 100644 index 0000000000..be5eab1b9b Binary files /dev/null and b/.github/graphql-playground.png differ diff --git a/Parse-Dashboard/index.js b/Parse-Dashboard/index.js index 782a783884..953ae31cba 100644 --- a/Parse-Dashboard/index.js +++ b/Parse-Dashboard/index.js @@ -16,6 +16,7 @@ const program = require('commander'); program.option('--appId [appId]', 'the app Id of the app you would like to manage.'); program.option('--masterKey [masterKey]', 'the master key of the app you would like to manage.'); program.option('--serverURL [serverURL]', 'the server url of the app you would like to manage.'); +program.option('--graphQLServerURL [graphQLServerURL]', 'the GraphQL server url of the app you would like to manage.'); program.option('--dev', 'Enable development mode. This will disable authentication and allow non HTTPS connections. DO NOT ENABLE IN PRODUCTION SERVERS'); program.option('--appName [appName]', 'the name of the app you would like to manage. Optional.'); program.option('--config [config]', 'the path to the configuration file'); @@ -47,6 +48,7 @@ let explicitConfigFileProvided = !!program.config; let configFile = null; let configFromCLI = null; let configServerURL = program.serverURL || process.env.PARSE_DASHBOARD_SERVER_URL; +let configGraphQLServerURL = program.graphQLServerURL || process.env.PARSE_DASHBOARD_GRAPHQL_SERVER_URL; let configMasterKey = program.masterKey || process.env.PARSE_DASHBOARD_MASTER_KEY; let configAppId = program.appId || process.env.PARSE_DASHBOARD_APP_ID; let configAppName = program.appName || process.env.PARSE_DASHBOARD_APP_NAME; @@ -87,6 +89,9 @@ if (!program.config && !process.env.PARSE_DASHBOARD_CONFIG) { ] } }; + if (configGraphQLServerURL) { + configFromCLI.data.apps[0].graphQLServerURL = configGraphQLServerURL; + } if (configUserId && configUserPassword) { configFromCLI.data.users = [ { @@ -104,8 +109,8 @@ if (!program.config && !process.env.PARSE_DASHBOARD_CONFIG) { }; } else { configFile = program.config; - if (program.appId || program.serverURL || program.masterKey || program.appName) { - console.log('You must provide either a config file or required CLI options (app ID, Master Key, and server URL); not both.'); + if (program.appId || program.serverURL || program.masterKey || program.appName || program.graphQLServerURL) { + console.log('You must provide either a config file or other CLI options (appName, appId, masterKey, serverURL, and graphQLServerURL); not both.'); process.exit(3); } } diff --git a/README.md b/README.md index c40abf4005..085092d242 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https * [Multiple apps](#multiple-apps) * [Single app](#single-app) * [Managing Multiple Apps](#managing-multiple-apps) + * [GraphQL Playground](#graphql-playground) * [App Icon Configuration](#app-icon-configuration) * [App Background Color Configuration](#app-background-color-configuration) * [Other Configuration Options](#other-configuration-options) @@ -136,6 +137,56 @@ Managing multiple apps from the same dashboard is also possible. Simply add addi } ``` +## GraphQL Playground + +Parse Dashboard has a built-in GraphQL Playground to play with the auto-generated [Parse GraphQL API](https://github.com/parse-community/parse-server#graphql). + +You can setup the GraphQL Playground by passing the `--graphQLServerURL` option to the `parse-dashboard` CLI: + +``` +parse-dashboard --dev --appId yourAppId --masterKey yourMasterKey --serverURL "https://example.com/parse" --graphQLServerURL "https://example.com/graphql" --appName optionalName +``` + +The `graphQLServerURL` option is also available through an environment variable called `PARSE_DASHBOARD_GRAPHQL_SERVER_URL`: + +``` +HOST: "0.0.0.0" +PORT: "4040" +MOUNT_PATH: "/" +PARSE_DASHBOARD_SERVER_URL: "http://localhost:1337/parse" +PARSE_DASHBOARD_GRAPHQL_URL: "http://localhost:1337/graphql" +PARSE_DASHBOARD_MASTER_KEY: "myMasterKey" +PARSE_DASHBOARD_APP_ID: "myAppId" +PARSE_DASHBOARD_APP_NAME: "MyApp" +``` + +You can also setup the GraphQL Playground in your `parse-dashboard-config.json` file: + +```json +{ + "apps": [ + { + "serverURL": "http://localhost:1337/parse", + "graphQLServerURL": "http://localhost:1337/graphql", + "appId": "myAppId", + "masterKey": "myMasterKey", + "appName": "My Parse Server App" + }, + { + "serverURL": "http://localhost:1337/parse2", + "graphQLServerURL": "http://localhost:1337/graphql2", + "appId": "myAppId", + "masterKey": "myMasterKey", + "appName": "My Parse Server App 2" + } + ] +} +``` + +After starting the dashboard, you can visit http://0.0.0.0:4040/apps/MyTestApp/api_console/graphql in your browser: + +![Parse Dashboard GraphQL Playground](.github/graphql-playground.png) + ## App Icon Configuration Parse Dashboard supports adding an optional icon for each app, so you can identify them easier in the list. To do so, you *must* use the configuration file, define an `iconsFolder` in it, and define the `iconName` parameter for each app (including the extension). The path of the `iconsFolder` is relative to the configuration file. If you have installed ParseDashboard globally you need to use the full path as value for the `iconsFolder`. To visualize what it means, in the following example `icons` is a directory located under the same directory as the configuration file: