In this tutorial we will be building a very simple todo app with Elm’s core library and the github.com/dillonkearns/elm-graphql library. It will load the todos via GraphQL from a SQLite database hosted on Airsequel.
This is what the final app will look like. Not pretty, but functional!
If you find any problems in this tutorial, please feel free to leave a comment!
Setting up the Airsequel Database
Things to know:
- As the primary key we use the automatically generated
- Create a
schema.sqlfile for creating the SQLite database:
- Execute SQL query to create the database:
sqlite3 todos.sqlite < schema.sql
- Go to airsequel.com and upload the
🎉 Your database and the corresponding GraphQL endpoint are now ready!
Creating the Elm app with
- Create a new directory for the app:
mkdir todo-app && cd todo-app
- Initialize a new Elm project (press enter on all following prompts):
npm install elm elm-format npx elm init
- Install necessary dependencies:
elm install \ dillonkearns/elm-graphql \ elm/json \ krisajenkins/remotedata && \ npm install --save-dev @dillonkearns/elm-graphql
- Create code for accessing the GraphQL endpoint
(Don’t forget to replace the placeholder
<db-id>with your database id)!
npx elm-graphql --skip-elm-format \ https://<name>.airsequel.com/dbs/<db-id>/graphql
- Create the main Elm file which will include the code your app:
- Copy the file content from github.com/Airsequel/Examples/blob/main/elm-simple-todo-app-enterprise/src/A_List.elm into the
- Assign your database id from the previous steps to the
- Finally run
npx elm reactorto start the development server and host your website at localhost:8000/src/Main.elm. 🎉 Our little todo app can now list all our todos including their completion status!
- To add also support for writing, updating, and deleting todos you can now replace the
Main.elmfile with the corresponding files from here github.com/Airsequel/Examples/tree/main/elm-simple-todo-app-enterprise/src.
- Finally, feel free to use the code (MIT licensed) as a template for your own CRUD apps.