diff --git a/src/routes/blog/post/react-admin-template-sites/+page.markdoc b/src/routes/blog/post/react-admin-template-sites/+page.markdoc new file mode 100644 index 0000000000..ccaf59d42b --- /dev/null +++ b/src/routes/blog/post/react-admin-template-sites/+page.markdoc @@ -0,0 +1,148 @@ +--- +layout: post +title: Build and deploy a CRM dashboard with React Admin on Appwrite Sites +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. +date: 2026-03-18 +cover: /images/blog/react-admin-template-sites/cover.png +timeToRead: 8 +author: aditya-oberai +category: tutorial +featured: false +callToAction: true +--- + +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. + +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. + +# What is React Admin? + +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. + +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. + +# Overview of the CRM dashboard template + +The CRM dashboard template is a React-based admin panel designed for managing common business entities. It includes: + +- **Customers management**: View, create, edit, and delete customer records +- **Orders tracking**: Keep track of orders with statuses and details +- **Products catalog**: Manage your product listings and categories +- **Invoices**: Generate and review invoices +- **Reviews**: Monitor and manage customer reviews +- **Segments**: Group and filter customers by segments +- **Dashboard overview**: A landing page summarizing key metrics +- **Rich UI components**: Built with Material-UI for a polished, professional look + +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. + +## Project structure + +Here's how the template source code is organized: + +``` +react-admin/ +├── src/ +│ ├── App.tsx # Main application component +│ ├── dashboard/ # Dashboard components +│ ├── products/ # Product management views +│ ├── categories/ # Category management views +│ ├── visitors/ # Customer management views +│ ├── orders/ # Order management views +│ ├── invoices/ # Invoice management views +│ ├── reviews/ # Review management views +│ ├── segments/ # Customer segment views +│ ├── layout/ # App layout components +│ ├── themes/ # Custom themes +│ └── ... +├── public/ # Public assets +├── .env # Environment variables +├── setup.ts # Database seeding script +├── package.json # Project dependencies +└── README.md # Project documentation +``` + +# Deploy the CRM dashboard on Appwrite + +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. + +Click the **Create site** button and select the **Clone a template** option. + +## Find the template + +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. + +## Configure site details + +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. + +Next, connect a GitHub repository. You can either create a new repository from the template or connect to an existing one. + +## Set environment variables + +The template requires a few environment variables to connect to your Appwrite project: + +| Variable | Description | Required | +|---|---|---| +| `VITE_APPWRITE_ENDPOINT` | Your Appwrite API endpoint | Yes | +| `VITE_APPWRITE_PROJECT_ID` | Your Appwrite project ID | Yes | +| `APPWRITE_API_KEY` | An Appwrite API key (used for seeding data during build) | Yes | +| `VITE_APPWRITE_DATABASE_ID` | Database ID (defaults to `admin`) | No | +| `VITE_APPWRITE_TABLE_REVIEWS` | Table ID for reviews (defaults to `reviews`) | No | +| `VITE_APPWRITE_TABLE_INVOICES` | Table ID for invoices (defaults to `invoices`) | No | +| `VITE_APPWRITE_TABLE_ORDERS` | Table ID for orders (defaults to `orders`) | No | +| `VITE_APPWRITE_TABLE_PRODUCTS` | Table ID for products (defaults to `products`) | No | +| `VITE_APPWRITE_TABLE_CATEGORIES` | Table ID for categories (defaults to `categories`) | No | +| `VITE_APPWRITE_TABLE_CUSTOMERS` | Table ID for customers (defaults to `customers`) | No | + +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. + +*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.* + +This template also works with self-hosted Appwrite instances. Just set `VITE_APPWRITE_ENDPOINT` to point to your self-hosted instance's API endpoint. + +## Deploy + +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. + +You can watch the deployment logs in real time as the build progresses. + +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. + +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. + +You can log in to the dashboard using the demo credentials created by the seed script: + +- **Email**: `john.doe@marmelab.com` +- **Password**: `changeme` + +# Customizing the dashboard + +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: + +## Customize authentication + +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. + +## Create new resources + +The template comes with customers, orders, products, categories, invoices, and reviews. You can add new resources by: + +1. Creating a new table in Appwrite TablesDB +2. Adding the corresponding React Admin resource component +3. Registering it in the app's resource configuration + +React Admin's component library makes it straightforward to build list views, edit forms, and detail pages for any new entity. + +## Connect to your own data + +If you already have data in Appwrite, 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. + +# Next steps + +With the CRM dashboard deployed, you have a solid foundation for building internal tools on Appwrite. Here are some resources to continue: + +- [Appwrite Sites documentation](/docs/products/sites) +- [Appwrite Sites templates](/docs/products/sites/templates) +- [React Admin documentation](https://marmelab.com/react-admin/documentation.html) +- [Appwrite Discord server](/discord) diff --git a/src/routes/integrations/sites-react-admin/+page.markdoc b/src/routes/integrations/sites-react-admin/+page.markdoc new file mode 100644 index 0000000000..14ddc88518 --- /dev/null +++ b/src/routes/integrations/sites-react-admin/+page.markdoc @@ -0,0 +1,143 @@ +--- +layout: integration +title: Deploy a CRM Dashboard with React Admin on Sites +description: Build and deploy a full-featured CRM dashboard with React Admin on Appwrite Sites +date: 2026-03-18 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/sites-react-admin/cover.png +category: sites +product: + avatar: '/images/integrations/avatars/react-admin.png' + vendor: React Admin + description: 'React Admin is an open-source framework for building B2B applications and internal tools on top of REST or GraphQL APIs, powered by Material-UI.' +platform: + - 'Cloud' + - 'Self-hosted' +images: + - /images/integrations/sites-react-admin/cover.png + - /images/integrations/sites-react-admin/search-site.png + - /images/integrations/sites-react-admin/clone-template.png + - /images/integrations/sites-react-admin/site-details.png + - /images/integrations/sites-react-admin/deployment-screen.png + - /images/integrations/sites-react-admin/success.png +--- + +React Admin is an open-source framework for building B2B applications and internal tools on top of REST or GraphQL APIs. It provides a rich set of UI components, including data grids, forms, filters, authentication, and more, all powered by Material-UI and following best practices for enterprise-grade admin interfaces. + +With Appwrite Sites, you can deploy a fully functional CRM dashboard powered by React Admin in minutes using the pre-built template. The template connects directly to Appwrite's backend services and includes a database seeding script that sets up all the necessary tables and a demo user automatically. + +# How does the integration work? + +[Appwrite Sites](https://appwrite.io/products/sites) provides a ready-to-use CRM dashboard template built with React Admin that you can deploy instantly. The template comes pre-configured with Appwrite TablesDB as the data layer and includes customers, orders, products, categories, invoices, and reviews management out of the box. + +To deploy the React Admin CRM dashboard template with Appwrite Sites, follow these steps: + +## Create site + +After signing into your Appwrite console, look at the sidebar on the left. Under the **Deploy** section, you will find the **Sites** button. + +Clicking it opens the Sites page. Here, you will see the **Sites** tab selected by default. Click **Create site** to start the deployment process. + +![Create new site](/images/integrations/sites-react-admin/create-site.png) + +At this point, Appwrite offers two options: **Clone a template** or **Connect a repository**. For this guide, we will focus on cloning the CRM dashboard with React Admin template, which lets you quickly set up a CRM dashboard based on a pre-built project. + +![Create new site](/images/integrations/sites-react-admin/clone-template.png) + +## Finding the React Admin template + +When you select **Clone a template**, you'll see a library of templates. To find the React Admin template: + +1. Filter by **Use case** and select **Dashboard**, or use the search bar at the top and type "React Admin" + +![Search templates](/images/integrations/sites-react-admin/search-site.png) + +After selecting the template, click on **CRM dashboard with React Admin** to open a new page where you can configure your site. + +## Configuring your site + +### Setting up site details + +Once you have selected the React Admin template, you will be prompted to enter basic details for your site. + +You will need to provide a **Site name** and a **Site ID**. The Site ID becomes part of your site's URL, so it should be lowercase and use hyphens if necessary. + +![Configure site details](/images/integrations/sites-react-admin/site-details.png) + +At this stage, you can choose whether to connect your repository now or later. + +If you choose **Connect your repository**, you will be able to either create a new repository based on the template or link it to an existing one. If you prefer to skip this step for now, you can choose **Connect later** and connect your version control later using the CLI or through the settings page. + +If you opt to connect a repository immediately, you will see the following options: + +- Select whether to create a new repository or connect to an existing one +- (Optional) Choose a GitHub organization if you have access to multiple organizations +- Name your repository if you are creating a new one +- Decide whether to keep the repository private by ticking the checkbox + +Additionally, you can define the domain for your site, using the Appwrite Sites domain. + +### Setting environment variables + +The React Admin template requires a few environment variables to connect to your Appwrite project. + +| Variable | Description | Required | +|---|---|---| +| `VITE_APPWRITE_ENDPOINT` | Your Appwrite API endpoint | Yes | +| `VITE_APPWRITE_PROJECT_ID` | Your Appwrite project ID | Yes | +| `APPWRITE_API_KEY` | An Appwrite API key (used for seeding data during build) | Yes | +| `VITE_APPWRITE_DATABASE_ID` | Database ID (defaults to `admin`) | No | +| `VITE_APPWRITE_TABLE_REVIEWS` | Table ID for reviews (defaults to `reviews`) | No | +| `VITE_APPWRITE_TABLE_INVOICES` | Table ID for invoices (defaults to `invoices`) | No | +| `VITE_APPWRITE_TABLE_ORDERS` | Table ID for orders (defaults to `orders`) | No | +| `VITE_APPWRITE_TABLE_PRODUCTS` | Table ID for products (defaults to `products`) | No | +| `VITE_APPWRITE_TABLE_CATEGORIES` | Table ID for categories (defaults to `categories`) | No | +| `VITE_APPWRITE_TABLE_CUSTOMERS` | Table ID for customers (defaults to `customers`) | No | + +The `VITE_APPWRITE_ENDPOINT` and `VITE_APPWRITE_PROJECT_ID` variables will be pre-filled for you. For the `APPWRITE_API_KEY`, create an API key in your Appwrite project by navigating to the project overview page > **Integrations** > **API keys** and creating a key with the `users` and `databases` scopes. + +*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.* + +After reviewing your configuration, click **Deploy**. + +## Monitoring the deployment + +Once you initiate the deployment, you will be taken to a progress page where you can monitor the build and deployment in real time. + +The logs will show you the different stages of the build process, including the database seeding step. Depending on the size of your template and the dependencies involved, this process can take anywhere from a few seconds to a few minutes. + +![Deployment screen](/images/integrations/sites-react-admin/deployment-screen.png) + +## Access your site + +After your site has been successfully deployed, Appwrite will show you a **Congratulations** page. + +![Congratulations](/images/integrations/sites-react-admin/success.png) + +You can log in to the CRM dashboard using the demo credentials created by the seed script: + +- **Email**: `john.doe@marmelab.com` +- **Password**: `changeme` + +## Next step + +Appwrite provides a few options to help you continue setting up or expanding your project. + +You can **Add domain**, connecting an existing custom domain you own or registering a new one through the console. + +You can **Share site**, allowing you to collaborate with your team by sharing access to your project. + +You can also **Open on mobile**, previewing your live site directly from a mobile or tablet device to ensure everything looks and functions as expected across different screen sizes. + +## Wrapping up + +And with that, the CRM dashboard with React Admin template is deployed to Appwrite Sites. Since the template creates a GitHub repository with the full source code, every push to your production branch will automatically trigger a rebuild and deployment. You can customize the dashboard by adding new resources, adjusting authentication, or connecting it to your own existing data. + +## More Resources + +- [Appwrite Sites Docs](/docs/products/sites) +- [React Admin Website](https://marmelab.com/react-admin/) +- [Appwrite Sites video announcement](https://youtu.be/0cERQxFjTW4) +- [Appwrite Discord server](/discord) diff --git a/static/images/integrations/sites-react-admin/clone-template.png b/static/images/integrations/sites-react-admin/clone-template.png new file mode 100644 index 0000000000..0896c484da Binary files /dev/null and b/static/images/integrations/sites-react-admin/clone-template.png differ diff --git a/static/images/integrations/sites-react-admin/create-site.png b/static/images/integrations/sites-react-admin/create-site.png new file mode 100644 index 0000000000..7b7b923340 Binary files /dev/null and b/static/images/integrations/sites-react-admin/create-site.png differ diff --git a/static/images/integrations/sites-react-admin/deployment-screen.png b/static/images/integrations/sites-react-admin/deployment-screen.png new file mode 100644 index 0000000000..8c57b165e3 Binary files /dev/null and b/static/images/integrations/sites-react-admin/deployment-screen.png differ diff --git a/static/images/integrations/sites-react-admin/search-site.png b/static/images/integrations/sites-react-admin/search-site.png new file mode 100644 index 0000000000..ee56e5fd5f Binary files /dev/null and b/static/images/integrations/sites-react-admin/search-site.png differ diff --git a/static/images/integrations/sites-react-admin/site-details.png b/static/images/integrations/sites-react-admin/site-details.png new file mode 100644 index 0000000000..dba1b1b76f Binary files /dev/null and b/static/images/integrations/sites-react-admin/site-details.png differ diff --git a/static/images/integrations/sites-react-admin/success.png b/static/images/integrations/sites-react-admin/success.png new file mode 100644 index 0000000000..1a591d547e Binary files /dev/null and b/static/images/integrations/sites-react-admin/success.png differ