JavaScript
Install Parse SDK

12min
Install Parse SDK to your JavaScript Project
Introduction
In this section, you learn how to install Parse JavaScript SDK into your HTML project.
See more about Parse SDK at Parse JavaScript SDK API Reference and Parse open source documentation for JavaScript SDK.
Prerequisites
To complete this tutorial, you will need:
An app created at Back4App.
Follow the new Parse App tutorial to learn how to create a Parse App at Back4App.
Parse JavaScript SDK supports Firefox 23+, Chrome 17+, Safari 5+, and IE 10.
IE 9 is supported only for apps that are hosted with HTTPS.
- Install SDK
To enable the Parse JavaScript SDK in your web app, create a new index.html file or use your main HTML file and add the following script inside its <head> tag:
index.html
 <!-- This is the minified production version of Parse JS -->
 <script type="text/javascript" src="https://npmcdn.com/parse/dist/parse.min.js"></script>
 <!-- This is the minified production version of Parse JS -->
 <script type="text/javascript" src="https://npmcdn.com/parse/dist/parse.min.js"></script>
﻿
- Connect your Parse App
Initialize your Parse app
Before using any Parse functionality, you need to call the Parse.Initialize method to set up the authentication token and connect your page with Back4App servers.
In your index.html file, create a <script> tag at the bottom of it and add the following code:
index.html
 <script>
2/   / Initialize Parse
   Parse.initialize("YOUR_PARSE_APP_ID", "YOUR_PARSE_JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
   Parse.serverURL = "https://parseapi.back4app.com/";
 </script>
 <script>
2/   / Initialize Parse
   Parse.initialize("YOUR_PARSE_APP_ID", "YOUR_PARSE_JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
   Parse.serverURL = "https://parseapi.back4app.com/";
 </script>
﻿
Note that creating and importing a separate JavaScript file is strongly advised instead of using inline JS code in your HTML file, but for simplicity, we will use the latter here.
Find your Application ID and your Client Key
Go to your App Dashboard at the Back4App website.
Navigate to app settings: Click on Server Settings > Core Settings block> Settings.
Return to your Parse.Initialize function and paste your applicationId and javaScriptKey there.
- Testing your connection
Create a test code
Test your initial setup with the following code which creates a new object of the User class. Add it inside the <script> tag, right after the Parse.initialize method:
index.html
 // Create a new User
 async function createParseUser() {
   // Creates a new Parse "User" object, which is created by default in your Parse app
   let user = new Parse.User();
   // Set the input values to the new "User" object
   user.set("username", document.getElementById("username").value);
   user.set("email", document.getElementById("email").value);
   user.set("password", document.getElementById("password").value);
   try {
    // Call the save method, which returns the saved object if successful
    user = await user.save();
    if (user !== null) {
      // Notify the success by getting the attributes from the "User" object, by using the get method (the id attribute needs to be accessed directly, though)
      alert(
        `New object created with success! ObjectId: ${
          user.id
        }, ${user.get("username")}`
      );
    }
  } catch (error) {
    alert(`Error: ${error.message}`);
  }
}
24
 // Add on click listener to call the create parse user function
 document.getElementById("createButton").addEventListener("click", async function () {
   createParseUser();
});
 // Create a new User
 async function createParseUser() {
   // Creates a new Parse "User" object, which is created by default in your Parse app
   let user = new Parse.User();
   // Set the input values to the new "User" object
   user.set("username", document.getElementById("username").value);
   user.set("email", document.getElementById("email").value);
   user.set("password", document.getElementById("password").value);
   try {
    // Call the save method, which returns the saved object if successful
    user = await user.save();
    if (user !== null) {
      // Notify the success by getting the attributes from the "User" object, by using the get method (the id attribute needs to be accessed directly, though)
      alert(
        `New object created with success! ObjectId: ${
          user.id
        }, ${user.get("username")}`
      );
    }
  } catch (error) {
    alert(`Error: ${error.message}`);
  }
}
24
 // Add on click listener to call the create parse user function
 document.getElementById("createButton").addEventListener("click", async function () {
   createParseUser();
});
﻿
You also need to create the input fields to pass data to your JavaScript function, so add these plain elements to your <body> section of your HTML file:
index.html
 <h1>JS SDK</h1>   
 <input id="username" type="text" placeholder="Username"/>
 <input id="email" type="email" placeholder="Email"/>
 <input id="password" type="password" placeholder="Password" />
 <button id="createButton">Create User</button>
 <h1>JS SDK</h1>   
 <input id="username" type="text" placeholder="Username"/>
 <input id="email" type="email" placeholder="Email"/>
 <input id="password" type="password" placeholder="Password" />
 <button id="createButton">Create User</button>
﻿
Go ahead and test this example app following these steps:
Open your HTML file in your web browser.
Fill the input fields with data and click;
An alert box will show the id of the new User object that was created.
Login at Back4App.
Find your app and click on Dashboard.
Click on Core.
Go to Browser.
Click on User class.
Check your new object there.
After these steps you should see something like this:
﻿
Here is the full app code:
index.html
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <!-- This is the minified production version of parse js -->
     <script
       type="text/javascript"
       src="https://npmcdn.com/parse/dist/parse.min.js"
     ></script>
  </head>
  <body>
    <h1>JS SDK</h1>
    <input id="username" type="text" placeholder="Username" />
    <input id="email" type="email" placeholder="Email" />
    <input id="password" type="password" placeholder="Password" />
    <button id="createButton">Create User</button>
  </body>
  <script>
    // Initialize Parse
    Parse.initialize("YOUR_PARSE_APP_ID", "YOUR_PARSE_JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
    Parse.serverURL = "https://parseapi.back4app.com/";

    // Create a new User
    async function createParseUser() {
      // Creates a new Parse "User" object, which is created by default in your Parse app
      let user = new Parse.User();
      // Set the input values to the new "User" object
      user.set("username", document.getElementById("username").value);
      user.set("email", document.getElementById("email").value);
      user.set("password", document.getElementById("password").value);
      try {
        // Call the save method, which returns the saved object if successful
        user = await user.save();
        if (user !== null) {
          // Notify the success by getting the attributes from the "User" object, by using the get method (the id attribute needs to be accessed directly, though)
          alert(
            `New object created with success! ObjectId: ${
              user.id
            }, ${user.get("username")}`
          );
        }
      } catch (error) {
        alert(`Error: ${error.message}`);
      }
    }

    // Add on click listener to call the create parse user function
    document.getElementById("createButton").addEventListener("click", async function () {
      createParseUser();
    });
  </script>
</html>
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <!-- This is the minified production version of parse js -->
     <script
       type="text/javascript"
       src="https://npmcdn.com/parse/dist/parse.min.js"
     ></script>
  </head>
  <body>
    <h1>JS SDK</h1>
    <input id="username" type="text" placeholder="Username" />
    <input id="email" type="email" placeholder="Email" />
    <input id="password" type="password" placeholder="Password" />
    <button id="createButton">Create User</button>
  </body>
  <script>
    // Initialize Parse
    Parse.initialize("YOUR_PARSE_APP_ID", "YOUR_PARSE_JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
    Parse.serverURL = "https://parseapi.back4app.com/";

    // Create a new User
    async function createParseUser() {
      // Creates a new Parse "User" object, which is created by default in your Parse app
      let user = new Parse.User();
      // Set the input values to the new "User" object
      user.set("username", document.getElementById("username").value);
      user.set("email", document.getElementById("email").value);
      user.set("password", document.getElementById("password").value);
      try {
        // Call the save method, which returns the saved object if successful
        user = await user.save();
        if (user !== null) {
          // Notify the success by getting the attributes from the "User" object, by using the get method (the id attribute needs to be accessed directly, though)
          alert(
            `New object created with success! ObjectId: ${
              user.id
            }, ${user.get("username")}`
          );
        }
      } catch (error) {
        alert(`Error: ${error.message}`);
      }
    }

    // Add on click listener to call the create parse user function
    document.getElementById("createButton").addEventListener("click", async function () {
      createParseUser();
    });
  </script>
</html>
﻿
It’s done!
At this point, you have learned how to get started with JavaScript web apps.
Learn more by reading the Parse open source documentation for JavaScript SDK.
﻿
Updated 28 Mar 2024
Did this page help you?
Integrating the Apollo iOS Client in a XCode Project
Database Operations
Install Parse SDK

Install Parse SDK to your JavaScript Project

Introduction

Prerequisites

1 - Install SDK

2 - Connect your Parse App

Initialize your Parse app

Find your Application ID and your Client Key

3 - Testing your connection

Create a test code

It’s done!
