{"id":13774942,"url":"https://github.com/azure-samples/azure-sql-db-rest-graphql-directus","last_synced_at":"2025-05-11T07:30:58.322Z","repository":{"id":43944062,"uuid":"386316429","full_name":"Azure-Samples/azure-sql-db-rest-graphql-directus","owner":"Azure-Samples","description":"A full end-to-end demo using Vue, Directus, REST, GraphQL and Azure SQL database to create a modern Todo list solution","archived":false,"fork":false,"pushed_at":"2023-10-26T15:15:43.000Z","size":244,"stargazers_count":10,"open_issues_count":1,"forks_count":11,"subscribers_count":14,"default_branch":"main","last_synced_at":"2024-05-02T02:18:00.520Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Azure-Samples.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-07-15T14:19:45.000Z","updated_at":"2023-10-20T21:01:42.000Z","dependencies_parsed_at":"2024-01-13T10:43:20.886Z","dependency_job_id":"98988311-718b-4365-9c80-fb1a82ea412d","html_url":"https://github.com/Azure-Samples/azure-sql-db-rest-graphql-directus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fazure-sql-db-rest-graphql-directus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fazure-sql-db-rest-graphql-directus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fazure-sql-db-rest-graphql-directus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fazure-sql-db-rest-graphql-directus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Azure-Samples","download_url":"https://codeload.github.com/Azure-Samples/azure-sql-db-rest-graphql-directus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225022367,"owners_count":17408615,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T17:01:32.030Z","updated_at":"2024-11-17T09:31:34.540Z","avatar_url":"https://github.com/Azure-Samples.png","language":"HTML","funding_links":[],"categories":["Code Samples"],"sub_categories":["REST"],"readme":"---\npage_type: sample\nlanguages:\n  - sql\nproducts:\n  - azure\n  - vs-code\n  - azure-sql-database\n  - azure-app-service\ndescription: 'Full Stack TodoMVC Sample app, with REST and GraphQL support, using Directus, Azure Web Apps, Vue.Js and Azure SQL'\nurlFragment: 'azure-sql-db-rest-graphql-directus'\n---\n\n\u003c!--\nGuidelines on README format: https://review.docs.microsoft.com/help/onboard/admin/samples/concepts/readme-template?branch=master\n\nGuidance on onboarding samples to docs.microsoft.com/samples: https://review.docs.microsoft.com/help/onboard/admin/samples/process/onboarding?branch=master\n\nTaxonomies for products and languages: https://review.docs.microsoft.com/new-hope/information-architecture/metadata/taxonomies?branch=master\n--\u003e\n\n# REST \u0026 GraphQL TodoMVC Sample App Full Stack Implementation with Directus\n\n![License](https://img.shields.io/badge/license-MIT-green.svg)\n\nServerless Full Stack implementation on Azure of [TodoMVC](http://todomvc.com/) app with support both for REST and GraphQL endpoints via [Directus](https://directus.io/) and Azure SQL.\n\nThis sample is a variation of the Full-Stack MVC Todo sample described here: [TodoMVC Full Stack with Azure Static Web Apps, Node and Azure SQL](https://devblogs.microsoft.com/azure-sql/todomvc-full-stack-with-azure-static-web-apps-node-and-azure-sql/). The difference, of course, is the use of Directus to **automatically expose the ToDo table via REST and GraphQL endpoints**.\n\nYes, that's right. You don't have to write a single line of code to make sure your table is reachable and usable via REST or GraphQL calls. You just have to configure what you want and all the plumbing will be done automatically for you. This way you can focus on creating amazing solution while still having all the power and the feature of Azure SQL at your service. Just like magic!\n\n![Architecture](./assets/architecture.png)\n## Azure Web Apps, Azure SQL\n\nThe implementation uses\n\n- [Azure Web App](https://docs.microsoft.com/en-us/azure/app-service/tutorial-custom-container?pivots=container-linux/): to run the Directus container \n- [Vue.Js](https://vuejs.org/) as front-end client\n- [Directus](https://directus.io/) to provide GraphQL and REST endpoints automatically from the Azure SQL database\n- [Azure SQL](https://azure.microsoft.com/en-us/services/sql-database/) as database to store ToDo data\n\n\n## Sample Deployment \n\nThe script `./azure-deploy.sh` can be used to deploy Directus, create some sample data and also deploy a Static Website that calls the exposed REST and GraphQL using the Vue.js frontend. Make sure to run it from a Linux Shell, or [WSL](https://docs.microsoft.com/en-us/windows/wsl/install) or from the [Azure Cloud Shell](https://docs.microsoft.com/en-us/azure/cloud-shell/overview) if you don't want or can't to install WSL on your machine. \nIf you are cloning the repository into on Linux on Azure Cloud shell, make sure to make the script executable:\n\n```sh\nchmod +x ./azure-deploy.sh\n```\n\nThe first time you'll run the script, it will create an empty `.env` file. Edit it in text editor. On the Azure Cloud Shell you can use `nano`:\n\n```\nnano .env\n```\n\nto configure with your own values. \n\nRun the script:\n\n```\n./azure-deploy.sh\n```\n\nOnce the script has finished you'll be given the address in which Directus has been installed and also the address of the sample Web App:\n\n```\nDirectus available at: https://directus-[something].azurewebsites.net\nSample static website at: https://directus-[something].[something].web.core.windows.net/\n```\n\nEnjoy!\n\n## Web Client\n\nThe sample web client, where you can create and manage your todo list, can be found here:\n\n```\nhttps://directus-[something].[something].web.core.windows.net/\n```\n\nThere are two clients, one to show how to use the REST endpoints and one to show how to do the same operations, but with GraphQL.\n\n##  Directus\n\nThe Directus administrative website is available at:\n\n```\nhttps://directus-[something].azurewebsites.net/admin\n```\n\nlogin with the email and the password you put in the `.env` file. You can manage the exposed entity and their security from here. And do much more. Learn more about Directus here: https://directus.io/.\n\n## REST Endpoint\n\nYou can create, update and delete ToDos, that are then in turn stored in Azure SQL, completely via REST using the `/items/todo` endpoint. It support GET, POST, PATCH and DELETE methods. For example using cUrl:\n\nTo get all available todos\n\n```\ncurl -s -X GET https://directus-[something].azurewebsites.net/items/todo\n```\n\nTo get a specific todo\n\n```\ncurl -s -X GET https://directus-[something].azurewebsites.net/items/todo/123\n```\n\nCreate a todo\n\n```\ncurl -s -H \"Content-Type: application/json\" -X POST https://directus-[something].azurewebsites.net/items/todo -d '{\"title\": \"Hello world!\"}'\n```\n\nUpdate todo\n\n```\ncurl -s -H \"Content-Type: application/json\" -X PATCH https://directus-[something].azurewebsites.net/items/todo/123 -d '{\"title\":\"World, hello!\", \"completed\":true}'\n```\n\nDelete todo\n\n```\ncurl -s -X DELETE https://directus-[something].azurewebsites.net/items/todo/123 \n```\n\nA sample of REST endpoint usage in a web page is available at `/client-rest.html` page.\n\n## GraphQL Endpoint\n\nThe GraphQL endpoint is available at `https://directus-[something].azurewebsites.net/graphql`. It *does not* provide an interactive GraphQL playground, so you may want to use something like https://graphiql-online.com/graphiql to run GraphQL queries. You can create, update and delete ToDos, that are then in turn stored in Azure SQL, completely via GraphQL.\n\nTo get all available todos\n```\nquery {\n  todo {\n    id,\n    title,\n    completed\n  }\n}\n```\n\nTo get a specific todo\n```\nquery {\n  todo_by_id(id:1) {\n    id,\n    title,\n    completed\n  }\n}\n```\n\nCreate a todo\n```\nmutation {\n  create_todo_item(data: {title:\"Hello world!\"}) {\n    id,\n    title,\n    completed\n  }\n}\n```\n\nUpdate todo\n```\nmutation {\n  update_todo_item(id: 123, data: {title:\"World, hello!\", completed: true}) {\n    id,\n    title,\n    completed\n  }\n}\n```\n\nDelete todo\n```\nmutation {\n  delete_todo_item(id: 123) {\n    id\n  }\n}\n```\n\nA sample of GraphQL endpoint usage in a web page is available at `/client-graphql.html` page.\n\n## Directus Only Deployment\n\nYou can deploy only Directus (without the additional sample website) by using the \"Deploy to Azure\" button:\n\n[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FAzure-Samples%2Fazure-sql-db-rest-graphql-directus%2Fmain%2Fazuredeploy.json)\n\n## Advanced configuration\n\nYou can also add a caching layer to this example in order to make it more realistic and scalable. An example of a full Directus deployment with also a Redis Cache is available using the `azuredeploy-with-redis.json` ARM template.\n\n## Using existing Azure SQL\n\nDirectus can work with existing databases to make them immediately reachable via REST and GraphQL calls. You can deploy the `azuredeploy-existing-db.json` ARM template:\n\n```\naz deployment group create \\\n  --name AzureSQL_Directus \\\n  --resource-group [my-resource-group] \\\n  --template-file azuredeploy-existing-db.json \\\n  --parameters \\\n    location=\"[my-location]\" \\\n    databaseServer=\"[my-database-server]\" \\\n    databaseName=\"[my-database]\" \\\n    databaseUser=\"[my-database-user]\" \\\n    databasePassword=\"[my-database-user-password]\"     \n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure-samples%2Fazure-sql-db-rest-graphql-directus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazure-samples%2Fazure-sql-db-rest-graphql-directus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure-samples%2Fazure-sql-db-rest-graphql-directus/lists"}