---
title: Install Parse SDK
slug: back4app/aNVr0SPkiqibrI5ylhvNh
description: In this guide you will learn how to install and connect the Parse SDK to your JavaScript project and get ready to use Parse in 3 easy steps.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-04T14:11:19.651Z
---

# Install Parse SDK to your JavaScript Project

## Introduction

In this section, you learn how to install Parse JavaScript SDK into your HTML project.

:::hint{type="success"}
See more about Parse SDK at [Parse JavaScript SDK API Reference](https://parseplatform.org/Parse-SDK-JS/api/4.3.1/) and [Parse open source documentation for JavaScript SDK](https://docs.parseplatform.org/js/guide/).
:::

## Prerequisites

:::hint{type="info"}
**To complete this tutorial, you will need:**

- An app created at Back4App.
  - Follow the [new Parse App tutorial](https://www.back4app.com/docs/get-started/new-parse-app) to learn how to create a Parse App at Back4App.
:::

:::hint{type="danger"}
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.**
:::

## 1 - Install SDK

To enable the Parse JavaScript SDK in your web app, create a new <font color="#2166ae">`index.html`</font> file or use your main HTML file and add the following script inside its <font color="#2166ae">`<head>`</font> tag:

:::CodeblockTabs
index.html

```html
1   <!-- This is the minified production version of Parse JS -->
2   <script type="text/javascript" src="https://npmcdn.com/parse/dist/parse.min.js"></script>
```
:::

## 2 - Connect your Parse App

### Initialize your Parse app

Before using any Parse functionality, you need to call the <font color="#2166ae">`Parse.Initialize`</font> method to set up the authentication token and connect your page with Back4App servers.

In your <font color="#2166ae">`index.html`</font> file, create a <font color="#2166ae">`<script>`</font> tag at the bottom of it and add the following code:

:::CodeblockTabs
index.html

```html
1   <script>
2/   / Initialize Parse
3     Parse.initialize("YOUR_PARSE_APP_ID", "YOUR_PARSE_JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
4     Parse.serverURL = "https://parseapi.back4app.com/";
5   </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

1. Go to your App Dashboard at the Back4App website.
2. Navigate to app settings: Click on <font color="#2166ae">`Server Settings`</font> > <font color="#2166ae">`Core Settings`</font> block> <font color="#2166ae">`Settings`</font>.
3. Return to your <font color="#2166ae">`Parse.Initialize`</font> function and paste your <font color="#2166ae">`applicationId`</font> and <font color="#2166ae">`javaScriptKey`</font> there.

## 3 - 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 <font color="#2166ae">`<script>`</font> tag, right after the <font color="#2166ae">`Parse.initialize`</font> method:

:::CodeblockTabs
index.html

```html
1   // Create a new User
2   async function createParseUser() {
3     // Creates a new Parse "User" object, which is created by default in your Parse app
4     let user = new Parse.User();
5     // Set the input values to the new "User" object
6     user.set("username", document.getElementById("username").value);
7     user.set("email", document.getElementById("email").value);
8     user.set("password", document.getElementById("password").value);
9     try {
10      // Call the save method, which returns the saved object if successful
11      user = await user.save();
12      if (user !== null) {
13        // 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)
14        alert(
15          `New object created with success! ObjectId: ${
16            user.id
17          }, ${user.get("username")}`
18        );
19      }
20    } catch (error) {
21      alert(`Error: ${error.message}`);
22    }
23  }
24
25   // Add on click listener to call the create parse user function
26   document.getElementById("createButton").addEventListener("click", async function () {
27     createParseUser();
28  });
```
:::

You also need to create the input fields to pass data to your JavaScript function, so add these plain elements to your <font color="#2166ae">`<body>`</font> section of your HTML file:

:::CodeblockTabs
index.html

```html
1   <h1>JS SDK</h1>   
2   <input id="username" type="text" placeholder="Username"/>
3   <input id="email" type="email" placeholder="Email"/>
4   <input id="password" type="password" placeholder="Password" />
5   <button id="createButton">Create User</button>
```
:::

Go ahead and test this example app following these steps:

1. Open your HTML file in your web browser.
2. Fill the input fields with data and click;
3. An alert box will show the id of the new User object that was created.
4. Login at Back4App.
5. Find your app and click on Dashboard.
6. Click on <font color="#2166ae">`Core`</font>.
7. Go to <font color="#2166ae">`Browser`</font>.
8. Click on <font color="#2166ae">`User`</font> class.
9. Check your new object there.

After these steps you should see something like this:

![](https://api.main.archbee.co/api/optimize/yD3zCY-NNBBIfd0uqcfR5/wj7qnwGleQ7IQYyQwDV1y_image.png)

Here is the full app code:

:::CodeblockTabs
index.html

```html
1   <!DOCTYPE html>
2   <html>
3     <head>
4       <meta charset="utf-8" />
5       <!-- This is the minified production version of parse js -->
6       <script
7         type="text/javascript"
8         src="https://npmcdn.com/parse/dist/parse.min.js"
9       ></script>
10    </head>
11    <body>
12      <h1>JS SDK</h1>
13      <input id="username" type="text" placeholder="Username" />
14      <input id="email" type="email" placeholder="Email" />
15      <input id="password" type="password" placeholder="Password" />
16      <button id="createButton">Create User</button>
17    </body>
18    <script>
19      // Initialize Parse
20      Parse.initialize("YOUR_PARSE_APP_ID", "YOUR_PARSE_JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
21      Parse.serverURL = "https://parseapi.back4app.com/";
22  
23      // Create a new User
24      async function createParseUser() {
25        // Creates a new Parse "User" object, which is created by default in your Parse app
26        let user = new Parse.User();
27        // Set the input values to the new "User" object
28        user.set("username", document.getElementById("username").value);
29        user.set("email", document.getElementById("email").value);
30        user.set("password", document.getElementById("password").value);
31        try {
32          // Call the save method, which returns the saved object if successful
33          user = await user.save();
34          if (user !== null) {
35            // 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)
36            alert(
37              `New object created with success! ObjectId: ${
38                user.id
39              }, ${user.get("username")}`
40            );
41          }
42        } catch (error) {
43          alert(`Error: ${error.message}`);
44        }
45      }
46  
47      // Add on click listener to call the create parse user function
48      document.getElementById("createButton").addEventListener("click", async function () {
49        createParseUser();
50      });
51    </script>
52  </html>
```
:::

## It’s done!

At this point, you have learned how to get started with JavaScript web apps.

:::hint{type="info"}
Learn more by reading the [Parse open source documentation for JavaScript SDK](https://docs.parseplatform.org/js/guide/).
:::

