[SOLVED] Parse Server - Access to Parse Server using Javascript SDK

Parse Server - Access to Parse Server using Javascript SDK

I'm trying to access Parse Server (back4app.com) using Javascript SDK on my web app. I have index.html file like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Parse SDK</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://npmcdn.com/parse@1.10.0/dist/parse.min.js"></script>
    <script src="app.js"></script>
</head>
<body>

</body>
</html>

My Parse Server has Program class. And I want to retrieve one program named Any Program. My app.js file is like this:

$(document).ready(function () {
    var Parse = require('parse');
    Parse.initialize('MY_APP_ID');
    Parse.serverURL = 'https://parseapi.back4app.com/';

    var Program = Parse.Object.extend("Program");
    var query = new Parse.Query(Program);
    query.equalTo("name", "Any Program");
    query.find({
      success: function(result) {
        console.log(result);
      },
      error: function(error) {
        alert("Error: " + error.code + " " + error.message);
      }
    });
});

In my browser console, an error occurs:

I followed the documentation here: http://docs.parseplatform.org/js/guide/
But no luck.

Solution

I'm calling require in a web environment which doesn’t exist. I removed that line and added JS key. So my final app.js is like below:

$(document).ready(function () {
    Parse.initialize('MY_APP_ID', 'JS_KEY');
    Parse.serverURL = 'https://parseapi.back4app.com/';

    var Program = Parse.Object.extend("Program");
    var query = new Parse.Query(Program);
    query.equalTo("name", "Any Program");
    query.find({
      success: function(result) {
        console.log(result);
      },
      error: function(error) {
        alert("Error: " + error.code + " " + error.message);
      }
    });
});

It worked.