How to Build a Backend for Elm?

In this tutorial, you’ll learn how to build a complete backend for an Elm application using Back4App.

We’ll walk through integrating essential Back4app features – such as database management, Cloud Code Functions, REST and GraphQL APIs, user authentication, and real-time queries (Live Queries) – to create a secure, scalable, and robust backend that seamlessly communicates with your Elm frontend.

You’ll also see how Back4app’s quick setup and intuitive environment can drastically reduce the time and effort compared to manually configuring servers and databases.

Along the way, you’ll gain hands-on experience with key functionalities, including advanced security features, scheduling tasks with Cloud Jobs, and setting up webhooks for external integrations.

By the end of this tutorial, you’ll be well-prepared to enhance this foundational setup into a production-ready application or easily incorporate custom logic and third-party APIs as needed.

Make sure you have all of these prerequisites in place before you begin. Having your Back4app project set up and your local Elm environment ready will help you follow along more easily.

The first step in building your Elm backend on Back4app is creating a new project. If you have not already created one, follow these steps:

Once the project is created, you will see it listed in your Back4app dashboard. This project will be the foundation for all backend configurations discussed in this tutorial.

Back4app relies on the Parse Platform to manage your data, provide real-time features, handle user authentication, and more. Since there is no official Elm Parse SDK, we’ll use REST or GraphQL calls from our Elm application to communicate with the Back4app backend.

Retrieve your Parse Keys: In your Back4app dashboard, navigate to your app’s “App Settings” or “Security & Keys” section to find your Application ID, REST API Key, and GraphQL Endpoint. You will also find the Parse Server URL (often https://parseapi.back4app.com).

From Elm, you can store these credentials in a configuration file or module. For example:

You’ll use these values whenever you make HTTP requests to Back4app from Elm. By completing this step, you have established how to securely connect your Elm front end with the Back4app backend.

With your Back4app project set up, you can now start saving and retrieving data via REST or GraphQL from Elm. For a simple example, we’ll demonstrate how to create and fetch a Todo item.

We’ll use elm/http to make REST requests. Here’s a simplified example to create a Todo item:

You can then call createTodo or fetchTodos in your Elm update function, handle the Http responses, and integrate data into your application’s Model.

If you prefer testing or want to do quick calls outside of Elm, you can use cURL:

Back4app also provides a GraphQL interface. Below is a sample GraphQL mutation for creating a Todo:

In Elm, you can use a GraphQL library or manually craft your HTTP requests to send these mutations and queries, very similar to how we used elm/http above.

By default, Parse allows schema creation on the fly, but you can also define your classes and data types in the Back4app dashboard for more control.

Back4app also supports various data types: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, and Polygon. You can choose the appropriate type for each field or let Parse automatically create these columns when you first save an object from your Elm app using the REST or GraphQL approach.

Back4app offers an AI Agent that can help you design your data model:

Using the AI Agent can save you time when setting up your data architecture and ensure consistency across your application.

If you have relational data – say, a Category object that points to multiple Todo items – you can use Pointers or Relations in Parse. From Elm, you can manage these relationships by including the pointer or relation fields in your REST or GraphQL calls.

For example, to add a pointer via REST:

When you query, you can also include pointer data by using the parameter ?include=category in REST or using include in GraphQL queries.

For real-time updates, Back4app provides Live Queries. While there isn’t a native Elm package for Parse Live Queries, you can still enable it in your Back4app dashboard:

If you’d like to integrate Live Queries with Elm, you could leverage elm-websocket (or another custom approach) to subscribe to changes. However, this requires more advanced configuration since no official Elm Live Query client exists at the moment.

Back4app takes security seriously by providing Access Control Lists (ACLs) and Class-Level Permissions (CLPs). These features let you restrict who can read or write data on a per-object or per-class basis, ensuring only authorized users can modify your data.

An ACL is applied to individual objects to determine which users, roles, or the public can perform read/write operations. You can configure ACLs from Elm by including the _ACL property in your JSON when creating or updating objects via REST or GraphQL.

For instance, to create a private Todo, you could set:

This prevents anyone but that user from reading or modifying the object.

CLPs govern an entire class’s default permissions, such as whether the class is publicly readable or writable, or if only certain roles can access it.

These permissions set the baseline, while ACLs fine-tune permissions for individual objects. A robust security model typically combines both CLPs (broad restrictions) and ACLs (fine-grained per-object restrictions). For more information go to App Security Guidelines.

Cloud Code is a feature of the Parse Server environment that allows you to run custom JavaScript code on the server side – without needing to manage servers or infrastructure. By writing Cloud Code, you can extend your Back4app backend with additional business logic, validations, triggers, and integrations that run securely and efficiently on the Parse Server.

When you write Cloud Code, you typically place your JavaScript functions, triggers, and any required NPM modules in a main.js (or app.js) file. This file is then deployed to your Back4app project, which is executed within the Parse Server environment.

All Cloud Code for your Back4app app runs inside the Parse Server that is managed by Back4app, so you don’t have to worry about server maintenance, scaling, or provisioning. Whenever you update and deploy your main.js file, the running Parse Server is updated with your latest code.

You can call these Cloud Code functions from Elm by making a REST request to:

https://parseapi.back4app.com/functions/fetchExternalData

Deploying via the Back4app CLI:

Deploying through the Dashboard:

From Elm, you can call a Cloud Function by making a POST request:

You can also call Cloud Functions via GraphQL:

Back4app leverages the Parse User class as the foundation for authentication. By default, Parse handles password hashing, session tokens, and secure storage. You can create and log in users via REST or GraphQL from your Elm app.

Back4app and Parse can integrate with popular OAuth providers such as Google, Facebook, or Apple. Typically, you’ll configure these providers in the Back4app dashboard and then make the necessary requests from Elm. Refer to the Social Login Docs for detailed setup steps.

Parse includes the Parse.File class for handling file uploads, which Back4app stores securely. Since we’re using REST from Elm, we can do a multi-part file upload or attach a base64 encoded file.

Once uploaded, you’ll receive a file URL in the response. You can store that URL in a Parse class field or display it in your Elm application as needed.

Parse Server provides configurations to manage file upload security. For instance:

Cloud Jobs in Back4app let you schedule and run routine tasks on your backend, like cleaning up old data or sending periodic emails. For instance, a job to remove todos older than 30 days might look like:

Webhooks allow your Back4app app to send HTTP requests to an external service whenever certain events occur. This is powerful for integrating with third-party systems like payment gateways (e.g., Stripe), email marketing tools, or analytics platforms.

For instance, if you want to notify a Slack channel whenever a new Todo is created:

The Back4app Admin App is a web-based management interface designed for non-technical users to perform CRUD operations and handle routine data tasks without writing any code. It provides a model-centric, user-friendly interface that streamlines database administration, custom data management, and enterprise-level operations.

Enable it by going to App Dashboard > More > Admin App and clicking on the “Enable Admin App” button.

Create a First Admin User (username/password), which automatically generates a new role (B4aAdminUser) and classes (B4aSetting, B4aMenuItem, and B4aCustomField) in your app’s schema.

Choose a Subdomain for accessing the admin interface and complete the setup.

Log In using the admin credentials you created to access your new Admin App dashboard.

Once enabled, the Back4app Admin App makes it easy to view, edit, or remove records from your database – without requiring direct use of the Parse Dashboard or backend code. With configurable access controls, you can safely share this interface with team members or clients who need a clear, point-and-click way to manage data.

By following this comprehensive tutorial, you have:

With a solid Elm frontend and a robust Back4app backend, you are now well-equipped to develop feature-rich, scalable, and secure applications. Continue exploring more advanced functionalities, integrate your business logic, and harness the power of Back4app to save you countless hours in server and database administration. Happy coding!