Quickstarters
Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

41min
Overview
In this guide, you'll learn how to develop a fully functional CRUD (create, read, update, delete) application using Polymer. 
This walkthrough demonstrates how to perform essential operations for managing and modifying data. You’ll begin by setting up a Back4app project, titled Basic-CRUD-App-Polymer, which will serve as the backend for your application.
Following this, you will craft a scalable data model by outlining precise collections and fields—either manually or with the assistance of the Back4app AI Agent—to ensure your database is optimized for CRUD operations.
Next, you’ll leverage the Back4app Admin App, a user-friendly drag-and-drop management interface, to streamline your data operations. 
Finally, you will integrate your Polymer frontend with Back4app using REST/GraphQL APIs while reinforcing backend security with sophisticated access controls.
By the end of this tutorial, you will have constructed a production-ready web application that supports core CRUD operations and includes user authentication and robust data management features.
What You Will Learn
Develop a CRUD application that efficiently manages data with a reliable backend.
Design a scalable backend and connect it with a Polymer-based frontend.
Utilize a drag-and-drop admin interface (Back4app Admin App) to facilitate data operations.
Deploy your application using modern techniques including containerization with Docker.
﻿
Prerequisites
Before starting, ensure you have:
A Back4app account with an active project.
For assistance, check out Getting Started with Back4app.
A Polymer development setup.
Use Polymer CLI or similar tools and verify that Node.js (v14 or later) is installed.
A basic grasp of JavaScript, Polymer, and REST APIs.
You can refer to the Polymer documentation for more details.
﻿
Step 1 – Setting Up Your Project
Initiating a New Back4app Project
Access your Back4app account.
Select the “New App” option from your dashboard.
Assign the project name: Basic-CRUD-App-Polymer and follow the instructions to finalize project creation.
Create New Project
﻿
After completing these steps, your project will be visible on the Back4app dashboard, forming the backbone for your backend configuration.
﻿
Step 2 – Crafting Your Database Schema
Structuring Your Data Model
For this CRUD app, several collections are needed. Below are example collections along with fields and their respective types, which will help you design a robust database schema capable of handling CRUD operations.
1. Items Collection
Field
Type
Description
_id
ObjectId
Auto-generated primary key.
title
String
The item’s title.
description
String
A short description of the item.
created_at
Date
Timestamp marking item creation.
updated_at
Date
Timestamp for the most recent update.
2. Users Collection
Field
Type
Details
_id
ObjectId
Auto-generated primary key.
username
String
Unique identifier for the user.
email
String
Unique email address.
password_hash
String
Encrypted password for security.
created_at
Date
Timestamp when the account was created.
updated_at
Date
Timestamp for the latest account update.
You can manually create these collections on the Back4app dashboard by establishing new classes and adding corresponding columns.
Create New Class
﻿
Easily add new fields by choosing a data type, naming the field, and specifying any default values or required parameters.
Create Column
﻿
Leveraging the Back4app AI Agent for Schema Creation
The Back4app AI Agent, accessible from your dashboard, automatically generates a database schema based on a prompt detailing your collections and fields. This feature is a huge time saver, ensuring your backend is precisely tailored for CRUD operations.
How to Utilize the AI Agent:
Launch the AI Agent:
Access it via your project settings or main menu in the Back4app dashboard.
Input Your Schema Details:
Provide a descriptive prompt that lists the collections and fields you require.
Review and Confirm:
After the AI Agent processes your request, review the generated schema and apply it to your project.
Example Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Using the AI Agent ensures your schema is both consistent and optimized for your application’s requirements.
﻿
Step 3 – Activating the Admin App and Performing CRUD Operations
Overview of the Admin App
The Back4app Admin App offers a no-code interface for backend management. Its intuitive drag-and-drop design simplifies CRUD operations—allowing you to create, view, update, and delete records effortlessly.
Activating the Admin App
Go to the “More” menu on your Back4app dashboard.
Select “Admin App” and then click on “Enable Admin App.”
Set up your admin credentials by creating an initial admin user, which will also establish roles (like B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, sign in to the Admin App to manage your backend data.
Admin App Dashboard
﻿
Managing Data Using the Admin App
Inside the Admin App, you can:
Add Records: Use the “Add Record” button in any collection (e.g., Items) to create new entries.
View/Modify Records: Click on a record to inspect its details or to edit its fields.
Remove Records: Utilize the delete function to eliminate data that is no longer needed.
This interface greatly enhances usability by streamlining all CRUD functions.
﻿
Step 4 – Connecting Polymer with Back4app
With your backend configured via the Admin App, it’s time to link your Polymer frontend to Back4app.
Option A: Utilizing REST/GraphQL APIs
We will use REST or GraphQL APIs to perform CRUD operations. For example, to retrieve items using REST:
JS
// Example REST call to get items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST call to get items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
Integrate similar API calls into your Polymer elements as required.
﻿
Step 5 – Reinforcing Backend Security
Implementing Access Control Lists (ACLs)
Safeguard your data by applying ACLs to objects. For instance, to create a restricted item:
JS
async function createRestrictedItem(data, owner) {
  const itemData = {
    title: data.title,
    description: data.description
  };

  // Configure ACL to permit only the owner access
  const acl = {
    "*": { read: false, write: false },
    [owner.id]: { read: true, write: true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ ...itemData, ACL: acl })
    });
    const result = await response.json();
    console.log('Restricted item created:', result);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
async function createRestrictedItem(data, owner) {
  const itemData = {
    title: data.title,
    description: data.description
  };

  // Configure ACL to permit only the owner access
  const acl = {
    "*": { read: false, write: false },
    [owner.id]: { read: true, write: true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ ...itemData, ACL: acl })
    });
    const result = await response.json();
    console.log('Restricted item created:', result);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, set up CLPs for each collection to define default access rules. This configuration ensures only authorized users can access sensitive data.
﻿
Step 6 – User Authentication in Polymer
Establishing User Accounts
Back4app uses Parse’s User class to manage authentication. In your Polymer project, implement user sign-up and login as demonstrated below:
JS
// Example function for user registration using REST API
async function signUpUser(username, password, email) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('User registered successfully!');
    console.log(result);
  } catch (error) {
    alert('Registration error: ' + error.message);
  }
}
// Example function for user registration using REST API
async function signUpUser(username, password, email) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('User registered successfully!');
    console.log(result);
  } catch (error) {
    alert('Registration error: ' + error.message);
  }
}
﻿
A similar approach can be adopted for login and session management, with additional features like email verification and password reset configured through the Back4app dashboard.
﻿
Step 7 – Deploying Your Polymer Frontend with Web Deployment
Back4app’s Web Deployment feature lets you host your Polymer application seamlessly by linking your GitHub repository. Follow these steps to deploy your app.
7.1 Building Your Production Version
Open your project directory in a terminal.
Execute the build command:
Bash
polymer build
polymer build
﻿
This command generates a build folder with all optimized static files.
Check the Build:
Ensure that the build folder contains an index.html file along with necessary asset directories.
﻿
7.2 Organizing and Uploading Your Source Code
Your repository should contain the complete source code for your Polymer frontend. A sample directory structure might look like:
Text
Basic-CRUD-App-Polymer-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── my-app.js
│   ├── api-config.js
│   └── components/
│       ├── items-list.js
│       └── auth-form.js
├── polymer.json
└── README.md
Basic-CRUD-App-Polymer-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── my-app.js
│   ├── api-config.js
│   └── components/
│       ├── items-list.js
│       └── auth-form.js
├── polymer.json
└── README.md
﻿
Example: src/api-config.js
JS
// src/api-config.js
export const APP_ID = 'YOUR_APPLICATION_ID';
export const REST_API_KEY = 'YOUR_REST_API_KEY';
export const API_URL = 'https://parseapi.back4app.com';
// src/api-config.js
export const APP_ID = 'YOUR_APPLICATION_ID';
export const REST_API_KEY = 'YOUR_REST_API_KEY';
export const API_URL = 'https://parseapi.back4app.com';
﻿
Example: src/my-app.js
JS
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class MyApp extends PolymerElement {
  static get template() {
    return html`
      <style>
        /* Your CSS styles here */
      </style>
      <h1>Item Manager</h1>
      <items-list></items-list>
      <auth-form></auth-form>
    `;
  }
}

customElements.define('my-app', MyApp);
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class MyApp extends PolymerElement {
  static get template() {
    return html`
      <style>
        /* Your CSS styles here */
      </style>
      <h1>Item Manager</h1>
      <items-list></items-list>
      <auth-form></auth-form>
    `;
  }
}

customElements.define('my-app', MyApp);
﻿
Committing Your Code to GitHub
Initialize a Git repository (if not already done):
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit for Polymer frontend"
git commit -m "Initial commit for Polymer frontend"
﻿
Create a GitHub repository:
Name it Basic-CRUD-App-Polymer-Frontend.
Push your code to GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Polymer-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Polymer-Frontend.git
git push -u origin main
﻿
﻿
7.3 Connecting Your GitHub Repository with Web Deployment
Access Web Deployment:
Sign in to Back4app, navigate to your project (Basic-CRUD-App-Polymer), and select the Web Deployment feature.
Integrate GitHub:
Follow the prompts to connect your GitHub account, allowing Back4app to access your repository.
Select Your Repository and Branch:
Choose the repository (e.g., Basic-CRUD-App-Polymer-Frontend) and the appropriate branch (e.g., main).
﻿
7.4 Configuring Deployment Settings
Specify the following details:
Build Command:
If the build folder is not pre-built, set the command (e.g., polymer build). Back4app will execute this during deployment.
Output Directory:
Set it to build so that Back4app identifies your static site files.
Environment Variables:
Include any necessary variables (such as API keys) in the deployment configuration.
﻿
7.5 Containerizing Your Polymer Application with Docker
If Docker is your deployment choice, include a Dockerfile in your repository similar to:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as builder

# Set working directory
WORKDIR /app

# Copy dependency files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the project files
COPY . .

# Build the Polymer app
RUN polymer build

# Use Nginx to serve the built files
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building
FROM node:16-alpine as builder

# Set working directory
WORKDIR /app

# Copy dependency files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the project files
COPY . .

# Build the Polymer app
RUN polymer build

# Use Nginx to serve the built files
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Integrate this Dockerfile in your project and select Docker as the deployment option in Back4app.
﻿
7.6 Deploying Your Application
Click the Deploy Button:
Once your settings are confirmed, hit Deploy.
Watch the Build Process:
Back4app will fetch your code, run the build command, and deploy your containerized app.
Retrieve Your URL:
After deployment, you will receive a URL where your Polymer application is accessible.
﻿
7.7 Testing Your Deployment
Visit the URL:
Open the provided link in your browser.
Verify Functionality:
Check that all routes load correctly and that assets like CSS, JavaScript, and images display as expected.
Troubleshoot:
If any issues occur, review the deployment logs and GitHub integration settings on Back4app.
﻿
Step 8 – Wrap-Up and Future Directions
Great job! You have successfully built a complete CRUD application using Polymer and Back4app. 
Your project, Basic-CRUD-App-Polymer, now features well-defined collections for Items and Users, managed seamlessly through the Admin App, with a secure and integrated Polymer frontend.
Next Steps:
Enhance the Frontend:
Add features like detailed item views, search functionality, or real-time updates.
Expand Functionality:
Integrate additional backend logic with Cloud Functions or third-party APIs.
Explore More:
Check out the Back4app documentation for more advanced configurations and performance optimizations.
With these skills, you’re well-equipped to build scalable CRUD backends and deploy robust web applications with Polymer and Back4app. Happy coding!
Field	Type	Description
_id	ObjectId	Auto-generated primary key.
title	String	The item’s title.
description	String	A short description of the item.
created_at	Date	Timestamp marking item creation.
updated_at	Date	Timestamp for the most recent update.
Field	Type	Details
_id	ObjectId	Auto-generated primary key.
username	String	Unique identifier for the user.
email	String	Unique email address.
password_hash	String	Encrypted password for security.
created_at	Date	Timestamp when the account was created.
updated_at	Date	Timestamp for the latest account update.
Updated 25 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with Marko? A Step-by-Step Guide
Building a CRUD Application with Qwik: A Comprehensive Tutorial