{"id":12394,"date":"2025-02-16T13:19:16","date_gmt":"2025-02-16T13:19:16","guid":{"rendered":"https:\/\/slitigenz.io\/?p=12394"},"modified":"2025-02-16T13:42:54","modified_gmt":"2025-02-16T13:42:54","slug":"unlock-the-full-potential-of-your-backend-with-directus","status":"publish","type":"post","link":"https:\/\/old.slitigenz.io\/vi\/unlock-the-full-potential-of-your-backend-with-directus\/","title":{"rendered":"Unlock the Full Potential of Your Backend with Directus"},"content":{"rendered":"

In the modern web development landscape, building a backend CMS that is fast, flexible, and scalable is crucial. Directus has emerged as a powerful solution that automates CRUD operations, creates flexible APIs on an existing database, and requires no coding.<\/p>\n\n\n\n

In this article, we will explore how to use Directus to build a task management system combined with Next.js for the frontend. We will cover installation, configuration, data management, and user permissions. Let’s get started!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Installing and Configuring Directus<\/h2>\n\n\n\n

Step 1: Install Docker and Docker Compose<\/h3>\n\n\n\n

Directus can be installed in multiple ways, but the simplest method is using Docker. Ensure you have Docker and Docker Compose installed before proceeding.<\/p>\n\n\n\n

Step 2: Create a Docker Compose File<\/h3>\n\n\n\n

Create a new project folder and add a docker-compose.yml<\/code> file with the following content:<\/p>\n\n\n\n

version: \"3.8\"\nservices:\n  directus_db:\n    image: postgres:17-alpine\n    container_name: directus_db\n    restart: unless-stopped\n    environment:\n      - POSTGRES_DB=todo_app\n      - POSTGRES_USER=directus\n      - POSTGRES_PASSWORD=directus\n    ports:\n      - \"9001:5432\"\n    volumes:\n      - directus_postgresql:\/var\/lib\/postgresql\/data\n    networks:\n      - directus_network\n\n  directus:\n    image: directus\/directus:11.1.1\n    container_name: directus\n    restart: unless-stopped\n    ports:\n      - \"9002:8055\"\n    volumes:\n      - .\/data\/database:\/directus\/database\n      - .\/data\/uploads:\/directus\/uploads\n      - .\/data\/extensions:\/directus\/extensions\n    networks:\n      - directus_network\n    environment:\n      - SECRET=\"replace-with-secure-random-value\"\n      - DB_CLIENT=postgres\n      - DB_HOST=directus_db\n      - DB_PORT=5432\n      - DB_USER=directus\n      - DB_PASSWORD=directus\n      - DB_DATABASE=todo_app\n      - ADMIN_EMAIL=admin@example.com\n      - ADMIN_PASSWORD=admin\n    depends_on:\n      - directus_db\n\nvolumes:\n  directus_postgresql:\n    driver: local\n\nnetworks:\n  directus_network:\n    driver: bridge<\/code><\/pre>\n\n\n\n
Step 3: Start Directus<\/h3>\n\n\n\n
Run the following command to start Directus services:<\/p>\n\n\n\n
docker compose up -d<\/code><\/pre>\n\n\n\n
Once started successfully, you can access the Directus Dashboard at http:\/\/localhost:9002<\/code> and log in with the admin credentials set in the configuration.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Managing Data with Directus<\/h2>\n\n\n\n
Directus allows you to manage data through an intuitive interface. In this article, we will build a task management system with two tables:<\/p>\n\n\n\n
    \n
  • users<\/strong> (user list)<\/li>\n\n\n\n
  • tasks<\/strong> (task list)<\/li>\n<\/ul>\n\n\n\n
    Creating the tasks<\/code> Collection<\/h3>\n\n\n\n
      \n
    1. Go to Settings > Data Model > Create Collection<\/strong><\/li>\n\n\n\n
    2. Name the collection tasks<\/code><\/li>\n\n\n\n
    3. Add the necessary fields: title<\/code>, description<\/code>, status<\/code>, due_date<\/code><\/li>\n\n\n\n
    4. Create a user<\/code> field linked to directus_users<\/code> using a “One to Many” relationship<\/li>\n<\/ol>\n\n\n\n
      Interacting with the API<\/h3>\n\n\n\n
      Directus provides RESTful APIs to interact with data. Here are some key API endpoints:<\/p>\n\n\n\n
        \n
      • Fetch all tasks:<\/strong> GET \/items\/tasks<\/code><\/li>\n\n\n\n
      • Fetch a specific task:<\/strong> GET \/items\/tasks\/:id<\/code><\/li>\n\n\n\n
      • Create a new task:<\/strong> POST \/items\/tasks<\/code><\/li>\n\n\n\n
      • Update a task:<\/strong> PATCH \/items\/tasks\/:id<\/code><\/li>\n\n\n\n
      • Delete a task:<\/strong> DELETE \/items\/tasks\/:id<\/code><\/li>\n<\/ul>\n\n\n\n
        You can test these APIs using Postman or your preferred API tool.<\/p>\n\n\n\n
        <\/p>\n\n\n\n
        User Permissions in Directus<\/h2>\n\n\n\n
        From version 11 onwards, Directus uses Policy-Based Access Control (PBAC)<\/strong> for managing permissions. This allows precise control over who can view, edit, or delete data.<\/p>\n\n\n\n
        Step 1: Create a User Role<\/h3>\n\n\n\n
          \n
        1. Navigate to Settings > Roles & Permissions<\/strong><\/li>\n\n\n\n
        2. Add a new role named User<\/strong><\/li>\n\n\n\n
        3. Define the permissions for this role<\/li>\n<\/ol>\n\n\n\n
          Step 2: Configure Policies<\/h3>\n\n\n\n
            \n
          1. Go to Settings > Access Policies<\/strong><\/li>\n\n\n\n
          2. Create a new policy for the User<\/code> role<\/li>\n\n\n\n
          3. Configure Read, Create, Update, Delete<\/strong> permissions for directus_users<\/code> and tasks<\/code><\/li>\n<\/ol>\n\n\n\n
            Example permission setup:<\/p>\n\n\n\n
              \n
            • Read:<\/strong> Users can only view their own tasks<\/li>\n\n\n\n
            • Create:<\/strong> Automatically assign user_id<\/code> to the currently logged-in user<\/li>\n\n\n\n
            • Update & Delete:<\/strong> Users can only modify or delete their own tasks<\/li>\n<\/ul>\n\n\n\n
              <\/p>\n\n\n\n
              Testing API After Configuring Permissions<\/h2>\n\n\n\n
              You can test the following APIs after setting up permissions to ensure data protection is properly enforced:<\/p>\n\n\n\n
                \n
              • Register a new account<\/strong> \u2192 Create an account via API<\/li>\n\n\n\n
              • Create a task<\/strong> \u2192 Users can only create tasks for themselves<\/li>\n\n\n\n
              • View tasks<\/strong> \u2192 Only displays tasks belonging to the logged-in user<\/li>\n\n\n\n
              • Edit\/Delete tasks<\/strong> \u2192 Users cannot modify tasks that do not belong to them<\/li>\n<\/ul>\n\n\n\n
                If all the above steps work correctly, you have successfully set up Directus!<\/p>\n\n\n\n
                <\/p>\n\n\n\n
                Directus provides a powerful backend CMS solution without requiring professional backend development skills. With just a few simple steps, you can set up a robust, intuitive, and easy-to-manage API system. With its scalability, flexible permissions, and multi-platform support, Directus is a solid choice for any web project.<\/p>\n\n\n\n
                If you\u2019re looking for an optimized backend CMS solution, why not give Directus a try?<\/p>\n\n\n\n
                <\/p>","protected":false},"excerpt":{"rendered":"
                In the modern web development landscape, building a backend CMS that is fast, flexible, and scalable is crucial. Directus has emerged as a powerful solution that automates CRUD operations, creates flexible APIs on an existing database, and requires no coding. In this article, we will explore how to use Directus to build a task management system combined with Next.js for the frontend. We will cover installation, configuration, data management, and user permissions. Let’s get started! Installing and Configuring Directus Step 1: Install Docker and Docker Compose Directus can be installed in multiple ways, but the simplest method is using Docker. Ensure you have Docker and Docker Compose installed before proceeding. Step 2: Create a Docker Compose File Create a new project folder and add a docker-compose.yml file with the following content: Step 3: Start Directus Run the following command to start Directus services: Once started successfully, you can access the Directus Dashboard at http:\/\/localhost:9002 and log in with the admin credentials set in the configuration. Managing Data with Directus Directus allows you to manage data through an intuitive interface. In this article, we will build a task management system with two tables: Creating the tasks Collection Interacting with the API Directus provides RESTful APIs to interact with data. Here are some key API endpoints: You can test these APIs using Postman or your preferred API tool. User Permissions in Directus From version 11 onwards, Directus uses Policy-Based Access Control (PBAC) for managing permissions. This allows precise control over who can view, edit, or delete data. Step 1: Create a User Role Step 2: Configure Policies Example permission setup: Testing API After Configuring Permissions You can test the following APIs after setting up permissions to ensure data protection is properly enforced: If all the above steps work correctly, you have successfully set up Directus! Directus provides a powerful backend CMS solution without requiring professional backend development skills. With just a few simple steps, you can set up a robust, intuitive, and easy-to-manage API system. With its scalability, flexible permissions, and multi-platform support, Directus is a solid choice for any web project. If you\u2019re looking for an optimized backend CMS solution, why not give Directus a try?<\/p>","protected":false},"author":6,"featured_media":12397,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12394","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/posts\/12394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/comments?post=12394"}],"version-history":[{"count":3,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/posts\/12394\/revisions"}],"predecessor-version":[{"id":12399,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/posts\/12394\/revisions\/12399"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/media\/12397"}],"wp:attachment":[{"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/media?parent=12394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/categories?post=12394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/tags?post=12394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}