Skip to main content

Set up parse-dashboard

Prerequisites​

Before getting started, make sure you have followed this section Run parse-server locally and have a server already set up locally.

You will set up your own dashboard to check your data synced with mongodb.

parse dashboard

Install parse dashboard​

npm install parse-dashboard

Add configuration​

Inside your src folder create a new file parseDashboard.ts. Inside this file add the following code.

//@ts-nocheck
import ParseDashboard from 'parse-dashboard';
import config from './config';

export const parseDashboard = new ParseDashboard(
  {
    apps: [
      {
        appName: 'Moralis Server',
        serverURL: config.SERVER_URL,
        appId: config.APPLICATION_ID,
        masterKey: config.MASTER_KEY,
      },
    ],
  },
  { allowInsecureHTTP: true },
);

Back inside your index.ts file, import this configuration and create a new route for your dashboard.

// @ts-ignore
import ParseServer from 'parse-server';
import Moralis from 'moralis';
import config from './config';
import cors from 'cors';
import express from 'express';
import http from 'http';
import ngrok from 'ngrok';
import { parseServer } from './parseServer';
import { streamsSync } from '@moralisweb3/parse-server';

        // Import parseDashboard // 
import { parseDashboard } from './parseDashboard';

//.....
//......

app.use(
  streamsSync(parseServer, {
    apiKey: config.MORALIS_API_KEY,
    webhookUrl: '/streams',
  }),
);
app.use(`/server`, parseServer.app);

// Add the new route // 
app.use(`/dashboard`, parseDashboard);

//......

Test your dashboard​

You can now build the project and start it locally.

npm run build

Start the project.

npm run start

You can access http://localhost:1337/dashboard/ and your should see your app.

Secure access​

You can protect your dashboard from being accesses by the public using usernameand password.

Inside your parseDashboard.ts add the following.

//@ts-nocheck
import ParseDashboard from 'parse-dashboard';
import config from './config';

export const parseDashboard = new ParseDashboard(
  {
    apps: [
      {
        appName: 'Moralis Server',
        serverURL: config.SERVER_URL,
        appId: config.APPLICATION_ID,
        masterKey: config.MASTER_KEY,
      },
    ],
    users: [
      {
        user: "username123",
        pass: "password123",
      },
    ],
  },
  { allowInsecureHTTP: true },
);

Where user will be your username and pass will be your chosen password.

To test this you will have to rebuild and restart your local server.

npm run build
npm run start

Now head over http://localhost:1337/dashboard/ and you should be asked to login.