Debugging cloud code of an already existing parse-server app on back4app

Back4App is a service that provide backend conveniently for developers. Although it provides many convenient tools and methos to help with implementing our product, I find it pretty difficult to set up and debug an already existing parse-server app on back4app locally base on its documents. So I write this article to put all my experiences into a single document that help you save time to concentrate on the real work.

To be clear, we will not debug directly on back4app. Instead, we’re gonna clone the app and its database to local, then we just simply debug on local. Also the target operating system of this post is macOS, so if you use other operating system, there will be some issue if you follow this guide.

Step 1 – Collect packages information from back4app

First, open parse dashboard of the app you want to debug, navigate to App Setting > Server Setting > Manage Parse Server > Setting:

Now you will see list of parse server versions and its packages versions. Notice the one is currently selected, note down the version of parse server and its packages versions somewhere as we will use it later:

Step 2 – Install MongoDB

Next, we’ll gonna mongodb to serve as database for parse server. Open terminal and run the following command:

brew tap mongodb/brew
brew update
brew install mongodb-community@6.0
brew services start mongodb/brew/mongodb-community

Step 3 – Install parse server

Let’s switch to install parse server. Download and save the this url into local. Open it using any text editor and find the text "parse-server": . Then set the corresponding parse server as you found earlier to the parse-server value:

Now switch to terminal, navigate to the location of the file above (which should be bootstrap.sh) and run the following command:

sh bootstrap.sh

A dialogue will show and ask you to enter some information. You can just follow its hint and fill, pretty simple:

Note: save Application Id and Master Key somewhere as we will use it later.

After the installing process finishes, cd to the directory of the app, remember the list packages on back4app? Since parse-server does not install these packages out of the box, you have to do it by yourself. Choose the packages you want to use and install it with the corresponding package version to make sure your local development environment is the same with back4app. Such as you want to install stripe, as you remember earlier, the version of stripe on back4app is 7.1.0. So the install command to run on terminal should be:

npm install -save stripe@7.1.0

Now run the following command:

npm start

If everything is correct, you’ll see the terminal show the following content, which inform that a parse-server is running on http://localhost:1337/parse:

Step 4 – Install cloud code on parse server

Alright, the parse server is installed successfully, now open dashboard of back4app, navigate to Cloud Code > Functions & Web Hosting, then copy the code main.js file and paste it into the corresponding main.js file in the app directory you created earlier:

Switch to terminal, press Control+C to stop parse server and run npm start to restart parse server to deploy cloud code functions.

Step 5 – Install Parse Dashboard

You have a parse server run locally. But what about a dashboard page like back4app to view data, control setting and so on? Fortunately Parse Community has created a tool for us named parse-dashboard. To install parse-dashboard, run the following command in terminal:

npm install -g parse-dashboard

Launch the dashboard for an app with a single command by supplying an app ID, master key, URL, and name like this:

parse-dashboard --dev --appId yourAppId --masterKey yourMasterKey --serverURL "http://localhost:1337/parse" --appName AppFoo

If input correctly, the terminal will inform you the following message: The dashboard is now available at http://0.0.0.0:4040/. Open your browser and input the following url: http://localhost:4040/. For your information if you use url http://0.0.0.0:4040/ then the browser will display blank because of CORS (Cross-Origin Resource Sharing) error. So you have to use http://localhost:4040/ instead. The browser should display like this:

Step 6 – Import database from back4app

There is no data to display yet. Let’s import data from back4app. First open back4app app dashboard, navigate to App Settings > General, scroll to section App Management, in Database row, click button show Database URI then copy the URI.

Now, export database from back4app by running the following with the database uri you acquired like this:

mongodump --uri="mongodb://admin:RjMPbig1XSZ3NW0E2s1QnNRd@MongoS3601A.back4app.com:27017/cb47ee87b7c642caba2eb8a9ed966caf"

Run the following command in order to import data into your local database:

mongorestore mongodb://127.0.0.1:27017/

Let’s look back a little at the database uri of back4app:

mongodb://admin:RjMPbig1XSZ3NW0E2s1QnNRd@MongoS3601A.back4app.com:27017/cb47ee87b7c642caba2eb8a9ed966caf

Copy and save the last part component of the uri. which is cb47ee87b7c642caba2eb8a9ed966caf. After that, open file config.json in the parse server directory on your local, replace the last part component of databaseURI to cb47ee87b7c642caba2eb8a9ed966caf, the file content should be:

{
  "appId": "j8cq7SfwAi6x3iYYHQMsRLWQ2hGB8hSSsktQUZsV",
  "masterKey": "cC5afpnEKcd68G2ylcPnDiIU7mP7jskt0ZO3NSNj",
  "appName": "App Foo",
  "cloud": "./cloud/main",
  "databaseURI": "mongodb://127.0.0.1:27017/cb47ee87b7c642caba2eb8a9ed966caf"
}

Save the file, switch to terminal, press Control+C to stop parse server and run npm start to switch to using the new database. Then switch to browser and open http://localhost:4040/, navigate to browser section and you can see the database has been imported:

Step 7 – Debugging a Cloud Function

Let’s now use the Node.js debugging feature integrated into your code editor. For this guide, we will be using VS Code, but most of the recent IDEs also have the same support for it. More details on Node.js debugging can by read on the official docs.

On your left sidebar, click on the Run and Debug item and then on create a launch.json file, selecting Node.js as the environment option.

This will create an example debug configuration that will work right out of the box, but we can improve by adding a new configuration through the Add Configuration... button and selecting Node.js: Attach to process.

Now we can use this configuration to attach the debugger to our local Parse Server node process, so select the Attach by Process ID action on the top of the “RUN AND DEBUG” sidebar, click on the green arrow, and then click on the node process related to Parse.

If you cannot find which is the correct process, you can enter the folder name of the parse server source local on your local, visual studio will filter most near correct processes for you.

Go back to your main.js file and create a breakpoint on the return line of the debugTest cloud function by clicking on the red circle to the left of the line number. Make the following CURL request to your server by running the following command in the terminal:

curl -X POST \
-H "X-Parse-Application-Id: YOUR_APP_ID" \
http://localhost:1337/parse/functions/hello

Switch back to visual studio, the debugger should pause the function execution at that line.

Bonus: Config MongoDB with Docker

Currently mongodb’s version on back4app is 3.6, which is too old to be installed on local machine. So to overcome this issue you can install mongodb on docker instead.
To do this, first create a docker-compose.yml file:

services:
  mongo:
    image: mongo:3.6
    volumes:
      - type: bind
        source: ./cloud_funtions/mongodb // Any where you find suitable on your local
        target: /data/db
    ports:
      - 27017:27017 

I will not go into details of this file. You can check docker’s official documents and tutorials for more detail.

Next run the following command:

docker compose up

To import data from back4app, first run the following command to get data from back4app:

docker exec -i [container_id_of_mongodb_created_from_previous_step] /usr/bin/mongodump --uri "[mongodb_uri_on_back4app]" --archive > ~/Downloads/mongodb.dump

Before importing data, run the following command to create admin user (you can change username or password as you like):

use admin

db.createUser({
    user: "admin",
    pwd: "admin",
    roles:[{role: "readWrite" , db:"6da79c9ccba54dee85cfe2093534dfb8"}]})

Then run this command to import data into mongodb container on docker:

docker exec -i cdcea9e13d918f6d40f06ba032c9cfb72a2ee1595c7015913b629fcf4cf4c410 /usr/bin/mongorestore --archive < ~/Downloads/mongodb.dump

Before start backend in cloud_funtions folder, you’ll need to make sure the current mongodb not running in order to prevent conflict with mongodb container on docker by running this command (assuming you installed mongodb by homebrew):

brew services stop mongodb/brew/mongodb-community  

Done, now you can start backend in cloud_funtions folder and debugging normally.

Conclusion

After this guide, you should be able to debug every aspect of your Parse integration and also your Cloud Code function behavior, improving your development experience.