Quickstarters
How to Create a CRUD Application with Elm?

34min
Overview
In this walkthrough, you will learn how to build a complete CRUD (create, read, update, delete) application using Elm. 
We'll employ Back4app as our backend service to manage data effortlessly. This guide explains how to configure a Back4app project, design a flexible data schema, and integrate CRUD operations into an Elm application using REST API calls.
Initially, you'll set up a Back4app project, here named Basic-CRUD-App-Elm, which provides a robust, non-relational database. You will design your data model—either manually or using Back4app’s intelligent AI Agent.
Next, you will manage your backend with the Back4app Admin App, which offers an intuitive drag-and-drop interface for data manipulation. 
Finally, you'll connect your Elm app to Back4app by making RESTful API requests while ensuring secure data operations.
By the end of this tutorial, you’ll have a production-ready Elm application that supports core CRUD functionalities and secure user authentication.
Essential Insights
Learn how to build an Elm CRUD application paired with a non-relational backend.
Understand how to structure a scalable backend and connect it with an Elm front-end.
Use the Back4app Admin App for seamless create, read, update, and delete actions.
Explore deployment options, including Docker, to launch your Elm application with ease.
﻿
Prerequisites
Before you begin, ensure you have:
A Back4app account with a project set up.
Need help? Visit Getting Started with Back4app.
An Elm development environment.
Install Elm and use your favorite editor.
Familiarity with Elm basics, functional programming, and HTTP requests.
Check the Elm Guide if needed.
﻿
Step 1 – Initializing Your Project
Creating a New Back4app Project
Log in to your Back4app account.
Click on the “New App” button from your dashboard.
Name your project: Basic-CRUD-App-Elm and follow the instructions to complete setup.
Create New Project
﻿
Once your project is ready, it will appear on your dashboard, setting the stage for your backend configuration.
﻿
Step 2 – Crafting the Data Schema
Setting Up Your Data Structures
For this CRUD application, you will create several collections (or classes) in Back4app. Below are examples of the main collections and their fields to support CRUD operations.
1. Items Collection
This collection stores details about each entry.
Field
Type
Details
_id
ObjectId
Auto-generated unique identifier.
title
String
Name of the item.
description
String
Brief description of the item.
createdAt
Date
Timestamp marking creation.
updatedAt
Date
Timestamp marking last update.
2. Users Collection
This collection handles user authentication and credentials.
Field
Type
Details
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique username for the user.
email
String
Unique email address.
passwordHash
String
Encrypted password for security.
createdAt
Date
Timestamp for when the account was created.
updatedAt
Date
Timestamp for the last account update.
You can add these collections and fields manually via the Back4app dashboard.
Create New Class
﻿
You may add fields by selecting the appropriate type, naming the field, and specifying if it’s mandatory.
Create Column
﻿
Using the Back4app AI Agent for Schema Configuration
The Back4app AI Agent simplifies the creation of your data schema based on your description. This automated process ensures your schema is set up for all necessary CRUD actions.
To use the AI Agent:
Access the AI Agent:
Sign in to your Back4app dashboard and locate the AI Agent in your project settings.
Detail Your Data Schema:
Describe the collections and fields you need.
Review and Confirm:
Check the proposed schema and approve it to configure your backend.
Example Prompt
Text
Create the following collections in my Back4app project:

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

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

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
This smart approach saves time and ensures a robust, consistent data schema.
﻿
Step 3 – Activating the Admin Interface & Handling CRUD Operations
Introduction to the Admin Interface
Back4app’s Admin App gives you a no-code interface to manage your backend data. Its user-friendly design allows you to perform CRUD actions such as adding, viewing, editing, and deleting records.
Enabling the Admin App
Go to the “More” menu on your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Create your admin account, which will also set up roles like B4aAdminUser and system collections.
Enable Admin App
﻿
Once activated, log in to the Admin App to manage your data.
Admin App Dashboard
﻿
Performing CRUD Actions in the Admin App
Within the Admin App, you can:
Insert Records: Choose “Add Record” in a collection (e.g., Items) to create new entries.
Inspect/Edit Records: Click on any record to view details or modify data.
Remove Records: Delete entries that are no longer required.
This easy-to-use interface streamlines data management.
﻿
Step 4 – Connecting Your Elm Application to Back4app
With your backend configured, it’s time to link your Elm application to Back4app.
Using REST API Calls in Elm
Since Elm doesn’t support a dedicated Parse SDK, we will use its built-in HTTP capabilities to interact with Back4app's REST endpoints.
Example: Fetching Data from the Items Collection
Below is an Elm module example using the Http package to retrieve a list of items:
Text
module Items exposing (Item, fetchItems, itemDecoder)

import Http
import Json.Decode as Decode exposing (Decoder)

type alias Item =
    { id : String
    , title : String
    , description : String
    }

itemDecoder : Decoder Item
itemDecoder =
    Decode.map3 Item
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "description" Decode.string)

fetchItems : Cmd msg
fetchItems =
    Http.get
        { url = "https://parseapi.back4app.com/classes/Items"
        , expect = Http.expectJson handleResponse (Decode.field "results" (Decode.list itemDecoder))
        }

handleResponse : Result Http.Error (List Item) -> msg
handleResponse result =
    -- Map the HTTP result to your application's message type.
    Debug.todo "Handle the response appropriately"
module Items exposing (Item, fetchItems, itemDecoder)

import Http
import Json.Decode as Decode exposing (Decoder)

type alias Item =
    { id : String
    , title : String
    , description : String
    }

itemDecoder : Decoder Item
itemDecoder =
    Decode.map3 Item
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "description" Decode.string)

fetchItems : Cmd msg
fetchItems =
    Http.get
        { url = "https://parseapi.back4app.com/classes/Items"
        , expect = Http.expectJson handleResponse (Decode.field "results" (Decode.list itemDecoder))
        }

handleResponse : Result Http.Error (List Item) -> msg
handleResponse result =
    -- Map the HTTP result to your application's message type.
    Debug.todo "Handle the response appropriately"
﻿
Example: Creating a New Item
You can also implement POST requests in Elm to add new records:
Text
createItem : String -> String -> Cmd msg
createItem title description =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }

handlePostResponse : Result Http.Error Decode.Value -> msg
handlePostResponse result =
    Debug.todo "Process the POST response"
createItem : String -> String -> Cmd msg
createItem title description =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }

handlePostResponse : Result Http.Error Decode.Value -> msg
handlePostResponse result =
    Debug.todo "Process the POST response"
﻿
Repeat similar patterns for update and delete operations using PUT and DELETE methods.
﻿
Step 5 – Safeguarding Your Backend
Configuring Access Controls (ACLs)
Protect your data by setting up ACLs on your objects. For example, to restrict an item to its creator, you could use:
Text
-- In Elm, you can add ACL details to your JSON payload.
createPrivateItem : String -> String -> String -> Cmd msg
createPrivateItem title description ownerId =
    let
        acl =
            Encode.object
                [ ( ownerId, Encode.object [ ("read", Encode.bool True), ("write", Encode.bool True) ] )
                , ( "*", Encode.object [ ("read", Encode.bool False), ("write", Encode.bool False) ] )
                ]

        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    , ( "ACL", acl )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }
-- In Elm, you can add ACL details to your JSON payload.
createPrivateItem : String -> String -> String -> Cmd msg
createPrivateItem title description ownerId =
    let
        acl =
            Encode.object
                [ ( ownerId, Encode.object [ ("read", Encode.bool True), ("write", Encode.bool True) ] )
                , ( "*", Encode.object [ ("read", Encode.bool False), ("write", Encode.bool False) ] )
                ]

        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    , ( "ACL", acl )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }
﻿
Setting Class-Level Permissions (CLPs)
Define CLPs in the Back4app dashboard so that only authenticated users can access specific collections.
﻿
Step 6 – Implementing User Authentication
Managing User Accounts
Back4app leverages the built-in User collection for handling authentication. In your Elm app, you will manage sign-ups and logins via REST API calls.
Example: User Sign-Up Request
Text
signUpUser : String -> String -> String -> Cmd msg
signUpUser username password email =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/users"
        , body = body
        , expect = Http.expectJson handleAuthResponse Decode.value
        }

handleAuthResponse : Result Http.Error Decode.Value -> msg
handleAuthResponse result =
    Debug.todo "Process the authentication response"
signUpUser : String -> String -> String -> Cmd msg
signUpUser username password email =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/users"
        , body = body
        , expect = Http.expectJson handleAuthResponse Decode.value
        }

handleAuthResponse : Result Http.Error Decode.Value -> msg
handleAuthResponse result =
    Debug.todo "Process the authentication response"
﻿
Follow a similar approach for login and session management.
﻿
Step 7 – Deploying Your Elm Application
Back4app supports seamless deployment. You can deploy your Elm application using various methods including Docker.
7.1 Building Your Elm Application
Compile Your Elm Code:
Run the Elm compiler to generate JavaScript:
Bash
elm make src/Main.elm --output=dist/main.js
elm make src/Main.elm --output=dist/main.js
﻿
Prepare Your Assets:
Ensure your generated JavaScript and HTML files are ready for deployment.
﻿
7.2 Organizing Your Project Structure
A typical Elm project layout might look like:
Text
Basic-CRUD-App-Elm/
|-- src/
|   |-- Main.elm
|   |-- Api.elm
|-- dist/
|   |-- index.html
|   |-- main.js
|-- elm.json
|-- package.json
|-- Dockerfile
Basic-CRUD-App-Elm/
|-- src/
|   |-- Main.elm
|   |-- Api.elm
|-- dist/
|   |-- index.html
|   |-- main.js
|-- elm.json
|-- package.json
|-- Dockerfile
﻿
7.3 Dockerizing Your Elm Application
If containerizing, add a Dockerfile:
Dockerfile
# Use a lightweight Node image for serving static files
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy compiled files
COPY dist/ /app/dist/

# Expose the desired port
EXPOSE 8080

# Serve the static files using a simple server
CMD ["npx", "http-server", "dist", "-p", "8080"]
# Use a lightweight Node image for serving static files
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy compiled files
COPY dist/ /app/dist/

# Expose the desired port
EXPOSE 8080

# Serve the static files using a simple server
CMD ["npx", "http-server", "dist", "-p", "8080"]
﻿
7.4 Deploying with Back4app’s Web Deployment
Link Your Repository:
Host your Elm project on GitHub.
Configure Deployment Settings:
In the Back4app dashboard, choose the Web Deployment feature, connect your repository (e.g., Basic-CRUD-App-Elm), and select the desired branch.
Set Build Commands:
Specify the build command (e.g., elm make src/Main.elm --output=dist/main.js) and the artifact location.
Deploy Your App:
Hit Deploy and monitor the logs until your app is live.
﻿
Step 8 – Final Thoughts and Future Directions
Congratulations! You have built an Elm-based CRUD application integrated with Back4app. 
You set up a project named Basic-CRUD-App-Elm, designed collections for Items and Users, and managed data via the Back4app Admin App. 
Furthermore, you connected your Elm application using REST API calls and implemented security measures.
Future Enhancements:
Expand Features:
Integrate advanced search capabilities, detailed views, or real-time updates.
Boost Backend Functions:
Experiment with cloud functions, third-party integrations, or role-based access.
Deepen Your Knowledge:
Visit the Back4app documentation and other resources to refine your app.
Happy coding and enjoy building with Elm and Back4app!
Field	Type	Details
_id	ObjectId	Auto-generated unique identifier.
title	String	Name of the item.
description	String	Brief description of the item.
createdAt	Date	Timestamp marking creation.
updatedAt	Date	Timestamp marking last update.
Field	Type	Details
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique username for the user.
email	String	Unique email address.
passwordHash	String	Encrypted password for security.
createdAt	Date	Timestamp for when the account was created.
updatedAt	Date	Timestamp for the last account update.
Updated 17 Feb 2025
Did this page help you?
How to Develop a CRUD App with TypeScript?
How to Develop a CRUD App with Vue.js?