|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Build and deploy a CRM dashboard with React Admin on Appwrite Sites |
| 4 | +description: Learn how to deploy the CRM dashboard template powered by React Admin on Appwrite Sites, configure it with your Appwrite project, and customize it to your needs. |
| 5 | +date: 2026-04-03 |
| 6 | +cover: /images/blog/react-admin-template-sites/cover.png |
| 7 | +timeToRead: 5 |
| 8 | +author: aditya-oberai |
| 9 | +category: tutorial |
| 10 | +featured: false |
| 11 | +callToAction: true |
| 12 | +--- |
| 13 | + |
| 14 | +Admin dashboards are at the heart of most business applications. Whether you're managing customers, tracking orders, or reviewing invoices, having a well-structured internal tool can make or break your team's productivity. However, building one from scratch, with data grids, filters, forms, and CRUD operations, takes significant time and effort. |
| 15 | + |
| 16 | +That's where the new **CRM dashboard with React Admin** site template comes in. Built on top of [React Admin](https://marmelab.com/react-admin/), one of the most popular open-source frameworks for building admin interfaces, this template gives you a fully functional CRM dashboard that connects directly to your Appwrite backend. And with Appwrite Sites, you can deploy it in just a few clicks. |
| 17 | + |
| 18 | +# What is React Admin? |
| 19 | + |
| 20 | +React Admin is an open-source framework, licensed under the MIT license, for building B2B applications and internal tools on top of REST or GraphQL APIs. It provides a rich set of UI components powered by Material-UI, including data grids, forms, filters, authentication, and more, all following best practices for enterprise-grade admin interfaces. While React Admin also offers an Enterprise Edition with additional features, the open-source version is fully functional and is what this template uses. |
| 21 | + |
| 22 | +When combined with Appwrite's backend services (TablesDB, authentication), React Admin becomes a powerful foundation for building full-stack admin dashboards without reinventing the wheel. |
| 23 | + |
| 24 | +# Overview of the CRM dashboard template |
| 25 | + |
| 26 | +The CRM dashboard template is a React-based admin panel designed for managing common business entities. It includes: |
| 27 | + |
| 28 | +- **Customers management**: View, create, edit, and delete customer records |
| 29 | +- **Orders tracking**: Keep track of orders with statuses and details |
| 30 | +- **Products catalog**: Manage your product listings and categories |
| 31 | +- **Invoices**: Generate and review invoices |
| 32 | +- **Reviews**: Monitor and manage customer reviews |
| 33 | +- **Segments**: Group and filter customers by segments |
| 34 | +- **Dashboard overview**: A landing page summarizing key metrics |
| 35 | +- **Rich UI components**: Built with Material-UI for a polished, professional look |
| 36 | + |
| 37 | +The template uses Appwrite TablesDB as its data layer and comes with an automatic seeding script that creates the necessary database, tables, and a demo user during deployment, so you can explore the dashboard immediately. |
| 38 | + |
| 39 | +# Deploy the CRM dashboard on Appwrite |
| 40 | + |
| 41 | +To get started, head to [Appwrite Cloud](https://cloud.appwrite.io) and sign in (or [create an account](https://cloud.appwrite.io/console/register) if you haven't already). Create a project, then navigate to the **Sites** page from the left sidebar. |
| 42 | + |
| 43 | + |
| 44 | + |
| 45 | +Click the **Create site** button and select the **Clone a template** option. |
| 46 | + |
| 47 | + |
| 48 | + |
| 49 | +## Find the template |
| 50 | + |
| 51 | +On the template listing page, you can filter by **Use case** and select **Dashboard**, or simply search for **React Admin** in the search bar. Click on the **CRM dashboard with React Admin** template to proceed. |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | +## Configure site details |
| 56 | + |
| 57 | +You'll be prompted to enter a **Site name** and **Site ID**. The Site ID will be part of your deployment URL, so keep it lowercase with hyphens. |
| 58 | + |
| 59 | + |
| 60 | + |
| 61 | +Next, connect a GitHub repository. You can either create a new repository from the template or connect to an existing one. If you would prefer not to connect a GitHub repository immediately, you can do so at a later point too. |
| 62 | + |
| 63 | +## Set environment variables |
| 64 | + |
| 65 | +The template requires a few environment variables to connect to your Appwrite project: |
| 66 | + |
| 67 | +| Variable | Description | Required | |
| 68 | +|---|---|---| |
| 69 | +| `VITE_APPWRITE_ENDPOINT` | Your Appwrite API endpoint | Yes | |
| 70 | +| `VITE_APPWRITE_PROJECT_ID` | Your Appwrite project ID | Yes | |
| 71 | +| `APPWRITE_API_KEY` | An Appwrite API key (used for seeding data during build) | Yes | |
| 72 | +| `VITE_APPWRITE_DATABASE_ID` | Database ID (defaults to `admin`) | No | |
| 73 | +| `VITE_APPWRITE_TABLE_REVIEWS` | Table ID for reviews (defaults to `reviews`) | No | |
| 74 | +| `VITE_APPWRITE_TABLE_INVOICES` | Table ID for invoices (defaults to `invoices`) | No | |
| 75 | +| `VITE_APPWRITE_TABLE_ORDERS` | Table ID for orders (defaults to `orders`) | No | |
| 76 | +| `VITE_APPWRITE_TABLE_PRODUCTS` | Table ID for products (defaults to `products`) | No | |
| 77 | +| `VITE_APPWRITE_TABLE_CATEGORIES` | Table ID for categories (defaults to `categories`) | No | |
| 78 | +| `VITE_APPWRITE_TABLE_CUSTOMERS` | Table ID for customers (defaults to `customers`) | No | |
| 79 | + |
| 80 | +The `VITE_APPWRITE_ENDPOINT` and `VITE_APPWRITE_PROJECT_ID` variables will be pre-filled for you. For the `APPWRITE_API_KEY`, you need to create an API key on your Appwrite project. On the project overview page, head to the **Integrations** section, click on the **API keys** tab, and create a key with the `users` and `databases` scopes. |
| 81 | + |
| 82 | +*Note: The API key is used only during the build step to seed the database, tables, and demo user. Since this is a static site built with Vite, the API key is not included in the final deployed assets and is not accessible to end users.* |
| 83 | + |
| 84 | +This template also works with self-hosted Appwrite instances. Just set `VITE_APPWRITE_ENDPOINT` to point to your self-hosted instance's API endpoint. |
| 85 | + |
| 86 | +## Deploy |
| 87 | + |
| 88 | +Once everything is configured, update the domain name if you'd like, and click **Deploy**. Appwrite will build the project using `pnpm install` and `pnpm build && pnpm db-seed`, which compiles the React app and runs the seeding script to create the database, tables, and a demo user. |
| 89 | + |
| 90 | +You can watch the deployment logs in real time as the build progresses. |
| 91 | + |
| 92 | +After a successful deployment, you'll see the **Congratulations** page. Click **Visit site** to open your new CRM dashboard, or **Go to dashboard** to view site configuration details. |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | +You can also add a custom domain to your site. Head to your Site's **Settings** > **Domains** in the Appwrite Console and add your domain. Appwrite automatically provisions SSL certificates for secure HTTPS access. |
| 97 | + |
| 98 | +You can log in to the dashboard using the demo credentials created by the seed script: |
| 99 | + |
| 100 | +- **Email**: `john.doe@marmelab.com` |
| 101 | +- **Password**: `changeme` |
| 102 | + |
| 103 | +# Customizing the dashboard |
| 104 | + |
| 105 | +Since the template creates a GitHub repository with the full source code, you can customize it however you like. Once your GitHub repository is connected, every push to your production branch automatically triggers a rebuild and deployment on Appwrite Sites. Here are a few ideas to get started: |
| 106 | + |
| 107 | +## Customize authentication |
| 108 | + |
| 109 | +The template already uses the official [`ra-appwrite`](https://github.com/marmelab/ra-appwrite) adapter, which provides both a Data Provider and an Auth Provider for Appwrite. Out of the box, it uses Appwrite's email and password authentication — the demo user created by the seed script is an example of this. You can extend the authentication to add role-based access control, restrict specific resources to certain users, or customize the login page to match your branding. |
| 110 | + |
| 111 | +## Create new resources |
| 112 | + |
| 113 | +The template comes with customers, orders, products, categories, invoices, and reviews. You can add new resources by: |
| 114 | + |
| 115 | +1. Creating a new table in Appwrite TablesDB |
| 116 | +2. Adding the corresponding React Admin resource component |
| 117 | +3. Registering it in the app's resource configuration |
| 118 | + |
| 119 | +React Admin's component library makes it straightforward to build list views, edit forms, and detail pages for any new entity. |
| 120 | + |
| 121 | +## Connect to your own data |
| 122 | + |
| 123 | +If you already have data in Appwrite (with the same schema), you can point the environment variables to your existing database and table IDs. You'll also need to update the `setup.ts` file and remove the `generateData` function so the seed script doesn't overwrite your existing data. Once done, your dashboard will work directly with your production data. |
| 124 | + |
| 125 | +# Next steps |
| 126 | + |
| 127 | +With the CRM dashboard deployed, you have a solid foundation for building internal tools on Appwrite. Here are some resources to continue: |
| 128 | + |
| 129 | +- [Appwrite Sites documentation](/docs/products/sites) |
| 130 | +- [Appwrite Sites templates](/docs/products/sites/templates) |
| 131 | +- [React Admin documentation](https://marmelab.com/react-admin/documentation.html) |
| 132 | +- [Appwrite Discord server](https://appwrite.io/discord) |
0 commit comments