Building: How to start building an application on Diploi # Using Add-ons > Add-ons are used to host services and databases for projects. ## Add-ons Add-ons provide services used by your application. In general, add-ons in Diploi are services that do not require direct development work, which can be services like databases, analytics services, CMS dashboards, etc. #### Add-ons available  **PostgreSQL**  **MongoDB**  **Redis**  **MariaDB**  **MinIO** *** ### PostgreSQL An open-source relational database system known for being reliable, and performant handling complex queries and transactions. [How to add PostgreSQL to a project ](/building/add-ons/postgres) [To the repository ](https://github.com/diploi/addon-postgres) [Official documentation for PostgreSQL ](https://www.postgresql.org/docs/) *** ### Redis An in-memory data structure store used as a database, cache, and message broker, known for its high speed and support for various data structures. [How to add Redis to a project ](/building/add-ons/redis) [To the repository ](https://github.com/diploi/addon-redis) [Official documentation for Redis ](https://redis.io/docs/latest/) *** ### Mongo A NoSQL document database that stores data in JSON-like documents. [How to add Mongo to a project ](/building/add-ons/mongo) [To the repository ](https://github.com/diploi/addon-mongo) [Official documentation for Mongo ](https://www.mongodb.com/docs/manual/) *** ### MariaDB An open-source relational database forked from MySQL, with additional features and performance improvements. [How to add MariaDB to a project ](/building/add-ons/mariadb) [To the repository ](https://github.com/diploi/addon-mariadb) [Official documentation for MariaDB ](https://mariadb.com/docs/) *** ### MinIO An S3-compatible object storage service used to save uploads, backups, and other binary data. [How to add MinIO to a project ](/building/add-ons/minio) [To the repository ](https://github.com/diploi/addon-minio) [Official documentation for MinIO ](https://docs.min.io/enterprise/aistor-object-store/) # MariaDB > Provision MariaDB when your Diploi app needs MySQL compatibility. MariaDB is a relational database that’s compatible with MySQL, and adds performance and tooling improvements. You can use MariaDB when your project requires a db compatible with MySQL or if you are migrating existing MySQL workloads. ## Add to your project Paste this entry into the `addons` list in `diploi.yaml` to add MariaDB to your project. ```yaml addons: - name: MariaDB identifier: mariadb package: https://github.com/diploi/addon-mariadb#v1.0.0-url ``` ## See also * [Using Add-ons](/building/add-ons) * [MariaDB add-on repository](https://github.com/diploi/addon-mariadb) * [MariaDB docs](https://mariadb.com/kb/en/documentation/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # MinIO > Provision MinIO as an S3-compatible Diploi add-on. MinIO is an open-source, S3-compatible, object storage system that you can run in Diploi. Use this add-on when your components need to store uploads, backups, or other binary data without relying on an external cloud bucket. ## Add to your project Paste this entry into the `addons` list in `diploi.yaml` to add MinIO to your project. ```yaml addons: - name: MinIO identifier: minio package: https://github.com/diploi/addon-minio#2025-06-13T11-33-47Z ``` ## See also * [Using Add-ons](/building/add-ons) * [MinIO add-on repository](https://github.com/diploi/addon-minio) * [MinIO docs](https://docs.min.io/enterprise/aistor-object-store/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Mongo > Attach a Mongo database to Diploi components. Mongo is a document database that stores flexible JSON-like records with dynamic schemas. Use this add-on when your application benefits from schema-less data modeling or rapid iteration. ## Add to your project Paste this entry into the `addons` list in `diploi.yaml` to add Mongo to your project. ```yaml addons: - name: MongoDB identifier: mongo package: https://github.com/diploi/addon-mongo#v8.2.3-url ``` ## See also * [Using Add-ons](/building/add-ons) * [Mongo add-on repository](https://github.com/diploi/addon-mongo) * [MongoDB docs](https://www.mongodb.com/docs/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # PostgreSQL > Provision PostgreSQL as a Diploi add-on for relational data. PostgreSQL is a popular relational database suited for transactional workloads and complex queries. Use this add-on when your application needs structured data storage with ACID guarantees. ## Add to your project Paste this entry into the `addons` list in `diploi.yaml` to add PostgreSQL to your project. ```yaml addons: - name: PostgreSQL identifier: postgres package: https://github.com/diploi/addon-postgres#v18.3-url ``` ## See also * [Using Add-ons](/building/add-ons) * [PostgreSQL add-on repository](https://github.com/diploi/addon-postgres) * [PostgreSQL docs](https://www.postgresql.org/docs/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Redis > Add Redis for caching, queues, and ephemeral data in Diploi. Redis is an in-memory data store ideal for caching, rate limiting, queues, and other latency-sensitive workloads. Choose this add-on when your components need fast key-value access or pub/sub messaging. ## Add to your project Paste this entry into the `addons` list in `diploi.yaml` to add Redis to your project. ```yaml addons: - name: Redis identifier: redis package: https://github.com/diploi/addon-redis#v7.4-url ``` ## See also * [Using Add-ons](/building/add-ons) * [Redis add-on repository](https://github.com/diploi/addon-redis) * [Redis docs](https://redis.io/docs/latest/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Connecting via SSH > Diploi utilizes SSH keys for user authentication when establishing SSH connections to deployments. Diploi utilizes SSH keys for user authentication when establishing SSH connections to deployments. This authentication method is commonly employed for remote development connections, such as those established through VS Code. To add an SSH key to your Diploi profile, you must: * Generate an SSH key pair * Copy the public SSH key * Add the copied content of your public SSH in Diploi That’s it 🙂 Let’s go through each step in detail. ## Generate a new SSH Key pair * Linux 1. Open a terminal and run: `ssh-keygen` which generates by default an ed25519 key pair. 2. You will get a message, asking you to assign a name for the key pair. ```bash Generating public/private ed25519 key pair. Enter file in which to save the key (/home//.ssh/id_ed25519): ``` 3. After that, you will be prompted to add a passphrase. ```bash Enter passphrase (empty for no passphrase): Enter the same passphrase again: ``` 4. Now your new key pair is ready, you will see the following message: ```bash Your identification has been saved in Your public key has been saved in someKey.pub The key fingerprint is: SHA256:gBVtt/m4zes+/0SZPkd+1wwo @ The key's randomart image is: +--[ED25519 256]--+ | o.. | | o . | | . . . | | . o o. .| | . S .= o.| | o o= o . B| | . o o .o.E .=*| | =.+o+..o +..=o| | .+B*=.. . ooo+| +----[SHA256]-----+ ``` * Windows 1. Using Git Bash, Terminal or WSL run: `ssh-keygen` which generates by default an ed25519 key pair. 2. You will get a message, asking you to assign a name for the key pair. ```bash Generating public/private ed25519 key pair. Enter file in which to save the key (/home//.ssh/id_ed25519): ``` 3. After that, you will be prompted to add a passphrase. ```bash Enter passphrase (empty for no passphrase): Enter the same passphrase again: ``` 4. Now your new key pair is ready, you will see the following message: ```bash Your identification has been saved in Your public key has been saved in someKey.pub The key fingerprint is: SHA256:gBVtt/m4zes+/0SZPkd+1wwo @ The key's randomart image is: +--[ED25519 256]--+ | o.. | | o . | | . . . | | . o o. .| | . S .= o.| | o o= o . B| | . o o .o.E .=*| | =.+o+..o +..=o| | .+B*=.. . ooo+| +----[SHA256]-----+ ``` * Mac 1. Open Terminal and run: `ssh-keygen` which generates by default an ed25519 key pair. 2. You will get a message, asking you to assign a name for the key pair. ```bash Generating public/private ed25519 key pair. Enter file in which to save the key (/home//.ssh/id_ed25519): ``` 3. After that, you will be prompted to add a passphrase. ```bash Enter passphrase (empty for no passphrase): Enter the same passphrase again: ``` 4. Now your new key pair is ready, you will see the following message: ```bash Your identification has been saved in Your public key has been saved in someKey.pub The key fingerprint is: SHA256:gBVtt/m4zes+/0SZPkd+1wwo @ The key's randomart image is: +--[ED25519 256]--+ | o.. | | o . | | . . . | | . o o. .| | . S .= o.| | o o= o . B| | . o o .o.E .=*| | =.+o+..o +..=o| | .+B*=.. . ooo+| +----[SHA256]-----+ ``` ## Copy the public key generated * Linux 1. ssh-keygen generates two files, one with an extension `.pub` and the other without any extension, eg. `someKey.pub` and `someKey`. The one we need right now is `someKey.pub`, which is your public key. You need to copy the contents of your `.pub` file. You can use the `cat` command: ```bash cat someKey.pub ``` 2. By using `cat` you will print the content of the `someKey.pub` file, it will look like this: ```bash ssh-ed25519 AA786grtyreugigyuwifewy65643354qWrjhBLtBSewyweRTIZw5DqD0zj @ ``` All you need to do is copy the entire output. * Windows 1. ssh-keygen generates two files, one with an extension `.pub` and the other without any extension, eg. `someKey.pub` and `someKey`. The one we need right now is `someKey.pub`, which is your public key. You need to copy the contents of your `.pub` file. You can use the `cat` command: ```bash cat someKey.pub ``` 2. By using `cat` you will print the content of the `someKey.pub` file, it will look like this: ```bash ssh-ed25519 AA786grtyreugigyuwifewy65643354qWrjhBLtBSewyweRTIZw5DqD0zj @ ``` All you need to do is copy the output. * Mac 1. ssh-keygen generates two files, one with an extension `.pub` and the other without any extension, eg. `someKey.pub` and `someKey`. The one we need right now is `someKey.pub`, which is your public key. You need to copy the contents of your `.pub` file. You can use the `cat` command: ```bash cat someKey.pub ``` 2. By using `cat` you will print the content of the `someKey.pub` file, it will look like this: ```bash ssh-ed25519 AA786grtyreugigyuwifewy65643354qWrjhBLtBSewyweRTIZw5DqD0zj @ ``` All you need to do is copy the entire output. ## Add your public key in Diploi Now that you copied the contents of your public key, you need to add it to your Diploi profile: 1. Go to [your profile settings](https://console.diploi.com/settings). 2. Select “Add new SSH key”. 3. Provide a description for your key, such as “Work MacBook,” to help you remember its origin or purpose. 4. Paste your SSH “public key” into the designated field. 5. Click the “Add SSH Key” button.  Caution Never share your SSH private key with anyone! This key grants access to any deployment you have privileges for, allowing others to authenticate as you. That’s it! Now you can access your deployments using SSH. # Using Components > Components are the core building block in Diploi. ## Components You can think of components as the application layer of your project. In Diploi you can have multiple options available to define your application, which you can mix as you wish. #### Components available  **Supabase** new  **FastAPI** new  **n8n** new  **Flask** new  **Laravel** new  **Deno** new  **Next.js**  **Node.js**  **Bun**  **React + Vite**  **Astro**  **SvelteKit**  **Nue**  **Ghost**  **Hono**  **ASP.NET**  **Lovable**  **Blazor**  **Static Website**  **Django** beta  **Python** beta *** ### Astro A static site builder that lets you write components with your a broad selection of frontend frameworks, while optimizing for performance and modern SEO practices. [To the tutorial ](https://diploi.com/blog/hosting_astro_apps) [How to add Astro to a project ](/building/components/astro) [To the component's repository ](https://github.com/diploi/component-astro) [Official documentation for Astro ](https://docs.astro.build/en/getting-started/) *** ### ASP.NET ASP.NET (ASP.NET Core) is an open-source .NET web framework for building web apps and APIs with C#. [How to add ASP.NET to a project ](/building/components/asp) [To the component's repository ](https://github.com/diploi/component-asp) [Official documentation for ASP.NET ](https://learn.microsoft.com/en-us/aspnet/core/) *** ### Blazor The .NET UI framework for building interactive web apps with C# and Razor components, letting you share code across client and server. [How to add Blazor to a project ](/building/components/blazor) [To the component's repository ](https://github.com/diploi/component-blazor) [Official documentation for Blazor ](https://learn.microsoft.com/en-us/aspnet/core/blazor/) *** ### Bun An JavaScript runtime designed to be faster than Node.js, with native bundling, support for TypeScript, and package management support. [To the tutorial ](https://diploi.com/blog/hosting_bun_apps) [How to add Bun to a project ](/building/components/bun) [To the component's repository ](https://github.com/diploi/component-bun) [Official documentation for Bun ](https://bun.sh/docs) *** ### Deno A JavaScript and TypeScript runtime for APIs and backend services. [To the tutorial ](https://diploi.com/blog/hosting_deno_apps) [How to add Deno to a project ](/building/components/deno) [To the component's repository ](https://github.com/diploi/component-deno) [Official documentation for Deno ](https://docs.deno.com/runtime/manual) *** ### Django A high-level Python web fullstack framework that uses Python. [To the tutorial ](https://diploi.com/blog/hosting_django_apps) [How to add Django to a project ](/building/components/django) [To the component's repository ](https://github.com/diploi/component-django) [Official documentation for Django ](https://docs.djangoproject.com/en/5.2/) *** ### FastAPI A Python framework used to create APIs with automatic documentation. [To the tutorial ](https://diploi.com/blog/hosting_fastapi_apps) [How to add FastAPI to a project ](/building/components/fastapi) [To the component's repository ](https://github.com/diploi/component-fastapi) [Official documentation for FastAPI ](https://fastapi.tiangolo.com/) *** ### Flask A minimalist Python framework, design for lightweight APIs, dashboards, services, and fullstack applications. [To the tutorial ](https://diploi.com/blog/hosting_flask_apps) [How to add Flask to a project ](/building/components/flask) [To the component's repository ](https://github.com/diploi/component-flask) [Official documentation for Flask ](https://flask.palletsprojects.com/) *** ### Ghost An open-source content management system designed for publishing and managing blogs, online publications or websites. [To the tutorial ](https://diploi.com/blog/hosting_a_ghost_blog) [How to add Ghost to a project ](/building/components/ghost) [To the component's repository ](https://github.com/diploi/component-ghost) [Official documentation for Ghost ](https://ghost.org/help/manual/) *** ### Hono A small web framework designed to build APIs and backend applications. [To the tutorial ](https://diploi.com/blog/hosting_hono_apps) [How to add Hono to a project ](/building/components/hono) [To the component's repository ](https://github.com/diploi/component-hono) [Official documentation for Hono ](https://hono.dev/docs/) *** ### Laravel A fullstack PHP framework with native support for modern JS-based frontend frameworks. [To the tutorial ](https://diploi.com/blog/hosting_laravel_apps) [How to add Laravel to a project ](/building/components/laravel) [To the component's repository ](https://github.com/diploi/component-laravel) [Official documentation for Laravel ](https://laravel.com/docs) *** ### n8n A workflow automation platform used to run trigger-driven workloads, using a GUI to setup triggers and logic workflow. [To the tutorial ](https://diploi.com/blog/hosting_n8n) [How to add n8n to a project ](/building/components/n8n) [To the component's repository ](https://github.com/diploi/component-n8n) [Official documentation for n8n ](https://docs.n8n.io/) *** ### Next.js A React-based web development framework for server-side and static web rendering. [To the tutorial ](https://diploi.com/blog/hosting_nextjs_apps) [How to add Next.js to a project ](/building/components/nextjs) [To the component's repository ](https://github.com/diploi/component-nextjs) [Official documentation for Next.js ](https://nextjs.org/docs) *** ### Node.js A runtime used to develop backend applications and APIs using JavaScript. [To the tutorial ](https://diploi.com/blog/hosting_node_apps) [How to add Node.js to a project ](/building/components/nodejs) [To the component's repository ](https://github.com/diploi/component-nodejs) [Official documentation for Node.js ](https://nodejs.org/docs/latest/api/) *** ### Nue.js A framework focused on building lightweight fullstack applications using JavaScript, and with native support for Rust or Zig to run workloads. [To the tutorial ](https://diploi.com/blog/hosting_nuejs_apps) [How to add Nue.js to a project ](/building/components/nue) [To the component's repository ](https://github.com/diploi/component-nue) [Official documentation for Nue.js ](https://nuejs.org/docs/) *** ### React + Vite Mixes Vite’s bundling capabilities and React’s frontend development capabilities, in a component that requires no configuration and provides instant hot module reload for frontend applications. [To the tutorial ](https://diploi.com/blog/hosting_react_apps) [How to add React + Vite to a project ](/building/components/react-vite) [To the component's repository ](https://github.com/diploi/component-react-vite) [Official documentation for Vite ](https://vite.dev/guide/) [Official documentation for React ](https://react.dev/reference/react) *** ### Supabase An open-source backend platform that bundles multiple services into one, such as Postgres, storage, auth, real-time listeners, and edge functions. [To the tutorial ](https://diploi.com/blog/hosting_supabase) [How to add Supabase to a project ](/building/components/supabase) [To the component's repository ](https://github.com/diploi/component-supabase) [Official documentation for Supabase ](https://supabase.com/docs) *** ### SvelteKit A framework for building performant web applications with Svelte, offering server-side rendering. [To the tutorial ](https://diploi.com/blog/hosting_svelte_apps) [How to add SvelteKit to a project ](/building/components/sveltekit) [To the component's repository ](https://github.com/diploi/component-sveltekit) [Official documentation for SvelteKit ](https://svelte.dev/docs/kit/introduction) # ASP.NET > Build applications using .NET. ASP.NET is Microsoft’s open-source web framework for building modern, high-performance web apps and APIs with .NET. Choose this component when you’re shipping server-rendered sites, REST backends, or full-stack applications that benefit from the .NET ecosystem and tooling. Diploi handles the build/publish pipeline and runs your ASP.NET app as a service with the runtime and networking it needs. ## Add ASP.NET to an existing project Paste this entry into the `components` list in `diploi.yaml` to add ASP.NET to your project. ```yaml components: - name: ASP.NET identifier: asp package: https://github.com/diploi/component-asp#v10.0 ``` ## See also * [Using Components](/building/components) * [ASP.NET component repository](https://github.com/diploi/component-asp) * [ASP.NET docs](https://learn.microsoft.com/en-us/aspnet/core/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Astro > Ship Astro sites with Diploi-managed builds and hosting. Astro is a modern static site builder focused on shipping minimal JavaScript to the browser. Choose this component when you are delivering content-heavy marketing sites, blogs, or documentation that benefit from fast page loads. Diploi handles the SSR build pipeline and pushes assets where they need to run. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Astro to your project. ```yaml components: - name: Astro identifier: astro package: https://github.com/diploi/component-astro#v6.1.7 ``` ## See also * [Using Components](/building/components) * [Astro component repository](https://github.com/diploi/component-astro) * [Astro docs](https://docs.astro.build/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Blazor > Launching apps powered by Blazor. Blazor is a .NET web UI framework for building interactive web apps using C# and Razor components instead of JavaScript. Choose this component when you’re building dashboards, internal tools, or full-featured web apps where you want to stay in the .NET ecosystem and share code across client and server. Diploi builds your Blazor project and deploys it with the runtime and assets it needs to run. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Blazor to your project. ```yaml components: - name: Blazor identifier: blazor package: https://github.com/diploi/component-blazor#v10.0 ``` ## See also * [Using Components](/building/components) * [Blazor component repository](https://github.com/diploi/component-blazor) * [Blazor docs](https://learn.microsoft.com/en-us/aspnet/core/blazor/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Bun > Deploy Bun apps and tooling with Diploi. Bun is a high-performance JavaScript runtime that includes a bundler, test runner, and package manager. Use this component when you want Bun’s fast startup times and all-in-one tooling for web services or utilities. Diploi handles the deployment so you can take advantage of Bun without custom infrastructure. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Bun to your project. ```yaml components: - name: Bun identifier: bun package: https://github.com/diploi/component-bun#v1.3.8 ``` ## See also * [Using Components](/building/components) * [Bun component repository](https://github.com/diploi/component-bun) * [Bun docs](https://bun.sh/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Deno > Run Deno apps on Diploi with automated builds and deploys. Deno is a secure JavaScript and TypeScript runtime with batteries-included tooling and standards-based APIs. Use this component when you want Diploi to manage cache-friendly builds and keep Deno services updated without self-hosting. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Deno to your project. ```yaml components: - name: Deno identifier: deno package: https://github.com/diploi/component-deno#v2.5.0 ``` ## See also * [Using Components](/building/components) * [Deno component repository](https://github.com/diploi/component-deno) * [Deno docs](https://docs.deno.com/runtime/manual) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Django > Run Django projects on Diploi with managed deploys. Django is a batteries-included Python framework for building secure, database-driven applications. Use this component when you need an admin interface, ORM, and templating system out of the box. Diploi provisions the deployment pipeline so you can focus on models and views instead of infrastructure. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Django to your project. ```yaml components: - name: Django identifier: django package: https://github.com/diploi/component-django#v6.0.3 ``` ## See also * [Using Components](/building/components) * [Django component repository](https://github.com/diploi/component-django) * [Django docs](https://docs.djangoproject.com/en/stable/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # FastAPI > Deploy FastAPI services through Diploi’s managed component. FastAPI is a modern, async Python framework that makes it easy to build performant APIs with automatic OpenAPI docs. Use this component when you want Diploi to run uvicorn builds and handle deploys so you can focus on type-safe endpoints and business logic. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add FastAPI to your project. ```yaml components: - name: FastAPI identifier: fastapi package: https://github.com/diploi/component-fastapi#v0.135.2 ``` ## See also * [Using Components](/building/components) * [FastAPI component repository](https://github.com/diploi/component-fastapi) * [FastAPI docs](https://fastapi.tiangolo.com/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Flask > Deploy lightweight Flask services on Diploi without custom infra. Flask is a minimalist Python framework for APIs, dashboards, and microservices. Use this component when you want Diploi to handle the build steps, gunicorn/uvicorn configuration, and deployments while you focus on routes and extensions. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Flask to your project. ```yaml components: - name: Flask identifier: flask package: https://github.com/diploi/component-flask#v3.1.3-uv ``` ## See also * [Using Components](/building/components) * [Flask component repository](https://github.com/diploi/component-flask) * [Flask docs](https://flask.palletsprojects.com/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Ghost > Host Ghost to publish blogs and newsletters with Diploi. Ghost is an open-source content platform for publishing blogs, newsletters, and membership sites. Use this component when you want Diploi to manage builds and deployments for a Ghost site. It keeps your content workflow together with the infrastructure that serves it. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Ghost to your project. ```yaml components: - name: Ghost identifier: ghost package: https://github.com/diploi/component-ghost#v5.130.0 env: include: - mariadb.MARIADB_HOST:database__connection__host - mariadb.MARIADB_USER:database__connection__user - mariadb.MARIADB_PASSWORD:database__connection__password ``` ## See also * [Using Components](/building/components) * [Ghost component repository](https://github.com/diploi/component-ghost) * [Ghost docs](https://ghost.org/docs/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Hono > Deploy lightweight Hono APIs across Diploi’s infrastructure. Hono is a tiny, high-performance web framework tuned for edge and serverless workloads. Choose this component when you need fast APIs or request handlers with minimal overhead. Diploi takes care of packaging and deploying so you can focus on routing and middleware logic. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Hono to your project. ```yaml components: - name: Hono identifier: hono package: https://github.com/diploi/component-hono#v4.7.11 ``` ## See also * [Using Components](/building/components) * [Hono component repository](https://github.com/diploi/component-hono) * [Hono docs](https://hono.dev/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Laravel > Deploy Laravel applications on Diploi with managed builds and releases. Laravel is a modern PHP framework with expressive routing, ORM, queues, and first-class testing utilities. Use this component when you want Diploi to run the build pipeline, publish assets, and keep your Laravel workloads updated without manually scripting servers. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Laravel to your project. ```yaml components: - name: Laravel identifier: laravel package: https://github.com/diploi/component-laravel#v13 # Optional: # env: # include: # - mariadb.* ``` ## See also * [Using Components](/building/components) * [Laravel component repository](https://github.com/diploi/component-laravel) * [Laravel docs](https://laravel.com/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # n8n > Automate workflows with the n8n component managed by Diploi. n8n is a workflow automation platform for connecting APIs, services, and custom logic. Use this component when you need Diploi to build and deploy n8n so you can focus on building workflows, not configuring runtime environments. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add n8n to your project. ```yaml components: - name: n8n identifier: n8n package: https://github.com/diploi/component-n8n#v2.13.4 env: include: - postgres.POSTGRES_HOST:DB_POSTGRESDB_HOST - postgres.POSTGRES_PORT:DB_POSTGRESDB_PORT - postgres.POSTGRES_USER:DB_POSTGRESDB_USER - postgres.POSTGRES_PASSWORD:DB_POSTGRESDB_PASSWORD addons: - name: PostgreSQL identifier: postgres package: https://github.com/diploi/addon-postgres#v18.3-url ``` Caution In n8n, you must use the environment variable names defined by their documentation. For more information check: ## See also * [Using Components](/building/components) * [n8n component repository](https://github.com/diploi/component-n8n) * [n8n docs](https://docs.n8n.io/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Next.js > Deploy production-ready Next.js apps with server rendering on Diploi. Next.js is a React framework for building server-rendered and statically generated applications. Choose this component when you want Diploi to handle optimized builds, routing, and image processing without extra configuration. It works well for SaaS dashboards, marketing pages, and any React project that needs reliable hosting. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Next.js to your project. ```yaml components: - name: Next.js identifier: next package: https://github.com/diploi/component-nextjs#v16.2.3 ``` ## See also * [Using Components](/building/components) * [Next.js component repository](https://github.com/diploi/component-nextjs) * [Next.js docs](https://nextjs.org/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Node.js > Run general-purpose Node.js services on Diploi. The Node.js component gives you a standard runtime for JavaScript or TypeScript backends. Reach for it when you need an API, webhook processor, or background worker built with the Node ecosystem. Diploi builds and deploys your code while keeping environment variables and dependencies managed. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Node.js to your project. ```yaml components: - name: Node.js identifier: node package: https://github.com/diploi/component-nodejs#v24.13.0 ``` ## See also * [Using Components](/building/components) * [Node.js component repository](https://github.com/diploi/component-nodejs) * [Node.js docs](https://nodejs.org/en/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Nue.js > Deploy Nue.js apps with Diploi handling builds and deploys. Nue.js is a minimal framework for composing modular web applications with fast SSR. Pick this component when you want Nue’s lean runtime while keeping deployment automation simple. Diploi runs the build and serves the output so you can focus on your UI modules. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Nue.js to your project. ```yaml components: - name: Nue identifier: nue package: https://github.com/diploi/component-nue#v1.0.0-rc.3 ``` ## See also * [Using Components](/building/components) * [Nue.js component repository](https://github.com/diploi/component-nue) * [Nue.js docs](https://nuejs.org/docs/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # React + Vite > Bundle React apps quickly with the React + Vite component. The React + Vite component pairs Vite’s fast bundler with a ready-to-serve React runtime. Use it when you need quick rebuilds, hot module reload, and a lightweight deployment target for frontend projects. Diploi handles the build pipeline so you can focus on UI work. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add React + Vite to your project. ```yaml components: - name: React + Vite identifier: react-vite package: https://github.com/diploi/component-react-vite#v19.2.5 ``` ## See also * [Using Components](/building/components) * [React + Vite component repository](https://github.com/diploi/component-react-vite) * [React docs](https://react.dev/learn) * [Vite docs](https://vitejs.dev/guide/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Supabase > Deploy Supabase edge functions and services using Diploi components. Supabase bundles Postgres, real-time listeners, storage, and auth with edge functions. Use this component when you want Diploi to manage Supabase deployments alongside the rest of your stack so you can ship a unified backend without wiring infrastructure by hand. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add Supabase to your project. ```yaml components: - name: Supabase identifier: supabase package: https://github.com/diploi/component-supabase#v2026.02 ``` ## See also * [Using Components](/building/components) * [Supabase component repository](https://github.com/diploi/component-supabase) * [Supabase docs](https://supabase.com/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # SvelteKit > Deploy full-stack SvelteKit apps through Diploi. SvelteKit combines Svelte’s component model with server-side rendering, routing, and adapters. Use this component when you need a fast Svelte frontend that can fetch data server-side or run API endpoints. Diploi runs the build and deployment steps so your project ships with predictable infrastructure. ## Add to your project Paste this entry into the `components` list in `diploi.yaml` to add SvelteKit to your project. ```yaml components: - name: SvelteKit identifier: sveltekit package: https://github.com/diploi/component-sveltekit#v2.49.5 ``` ## See also * [Using Components](/building/components) * [SvelteKit component repository](https://github.com/diploi/component-sveltekit) * [SvelteKit docs](https://kit.svelte.dev/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Using Remote Development > How to develop remotely with Diploi. At the heart of Diploi lies remote development, allowing you to easily work on any of your projects without the need for software installation or maintenance on your local machine, or dealing with containers. With a single click, you can begin your work without local installation hassle. [Remote development using Cursor and Diploi](https://www.youtube.com/embed/gHeJ-gwCtlg?si=1KroAeD_epe538wF) ## Getting Started Diploi is designed to make remote development as seamless as possible. You can start developing on any of your deployments with just a few clicks. All you need is to create a development deployment in your project, which will provide you with a remote environment. You can access development environments through the cloud IDE, or connect to them using your favorite IDE via SSH.  ### Using Diploi’s Cloud IDE Diploi offers a built-in cloud IDE that allows you to start coding immediately without any setup. This is ideal for quick edits or when you need to make changes on the go. To access the cloud IDE, navigate to your deployment’s “Overview” tab, found at: `https://console.diploi.com//project//deployment/` From there, you can click on the “Code in the browser” button, which will open the cloud IDE in a new tab. ### Using Your Local IDE To connect to your remote development environment using your own IDE, you need to add your public SSH key, which you can do by following the instructions in our [SSH guide](/building/add-ssh-key/). Diploi officially supports: * [VS Code](https://code.visualstudio.com/) with the [Remote Development extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) * [Cursor](https://www.cursor.com/) #### Connecting you IDE If it is the first time you are connecting to a deployment, you will need to add your IDE to the “Develop” section of your deployment, by clicking on the plus icon next to the “Code in the Browser” button.  Caution If you are developing on a Windows machine with WSL enabled, please note that a Windows VS Code install uses SSH keys on your **Windows** user by default. #### Configuration Your local VS Code configuration will be used for all remote environments, but certain features (like extensions) need to be configured on a per-deployment basis. ### Other IDEs Caution Diploi currently has built-in persistent configuration for VS Code only. This means that you will have to configure/install your other IDE again after a deployment upgrade. Diploi supports any IDE capable of connecting to a remote machine via SSH. This includes terminal-based IDEs like Vim. #### Terminal Based IDEs Simply open an SSH connection to your deployment, and install your favorite IDE. # Using Starter Kits > Launch pre-built, full-stack applications on Diploi with a single click. Starter Kits include everything you need to start developing immediately. ## Starter Kits Starter Kits are complete, pre-configured templates, which can be used as a scaffold to start new applications or to use directly as they are, which you can launch instantly on Diploi. Each starter kit includes a `diploi.yaml` file, Dockerfiles for development and production, and a ready-to-run codebase.. #### Starter kits available  **Web App**  **Collaborative Drawing App**  **Chat App**  **OpenClaw Assistant**  **File2AI App** *** ### OpenClaw A self-hosted personal AI assistant that connects to messaging platforms and supports any LLM provider. Comes with an interactive browser terminal to access the OpenClaw CLI without using SSH. [Launch OpenClaw ](https://diploi.com/starter-kit/openclaw) [How to use the OpenClaw starter kit ](/building/starter-kits/openclaw) [Starter kit repository ](https://github.com/diploi/starter-openclaw) [OpenClaw documentation ](https://docs.openclaw.ai/) *** ### Chat App A Slack-like chat application with authentication and realtime features, built with Next.js and Supabase. [Launch Chat App ](https://diploi.com/starter-kit/chat) [How to use the Chat App starter kit ](/building/starter-kits/chat-app) [Starter kit repository ](https://github.com/diploi/starter-chat) *** ### Drawing App A fun, collaborative pixel art drawing application built with Refine and Supabase. [Launch Drawing App ](https://diploi.com/starter-kit/refine-pixels) [How to use the Drawing App starter kit ](/building/starter-kits/drawing-app) [Starter kit repository ](https://github.com/diploi/starter-refine-pixels) [Refine documentation ](https://refine.dev/docs/) *** ### Web App A modern, production-ready template for building full-stack React applications with Supabase. [Launch Web App ](https://diploi.com/starter-kit/web-app) [How to use the Web App starter kit ](/building/starter-kits/web-app) [Starter kit repository ](https://github.com/diploi/starter-web-app) *** ## See also * [Using Components](/building/components) * [Using Add-ons](/building/add-ons) * [Creating a Project](/deploying/creating-a-project) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Chat App > A Slack-like chat application starter kit built with Next.js and Supabase, featuring authentication and realtime messaging. The Chat App is a Slack-like messaging application built with Next.js and Supabase. Use this starter kit when you want a ready-to-run chat application with built-in authentication, realtime messaging, and a modern full-stack architecture that you can extend and customize. ## Tech stack | Technology | Role | | -------------- | ---------------------------------- | | **Next.js** | Full-stack React framework | | **Supabase** | Backend (database, auth, realtime) | | **TypeScript** | Language | To extend a project kickstarted with the Chat App Starter Kit, you can add any of the components and add-ons supported on Diploi. For more information, [click here to learn about how to use the `diploi.yaml`](/reference/diploi-yaml). ## Key features * **Realtime messaging:** Powered by Supabase’s realtime subscriptions * **Email authentication:** Built-in auth flow using Supabase Auth and Diploi’s SMTP email server * **Slack-like interface:** Familiar channel-based chat experience ## Launch [Launch Chat App on Diploi](https://diploi.com/starter-kit/chat) ## See also * [Using Starter Kits](/building/starter-kits) * [Starter kit repository](https://github.com/diploi/starter-chat) * [Next.js component](/building/components/nextjs) * [Supabase component](/building/components/supabase) * [Official Next.js documentation](https://nextjs.org/docs) * [Official Supabase documentation](https://supabase.com/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Drawing App > A collaborative pixel art drawing application starter kit built with Refine and Supabase, featuring realtime multi-user canvas support and authentication. The Drawing App is a fun, collaborative pixel art application built with Refine and Supabase. Use this starter kit when you want a ready-to-run creative application that demonstrates realtime collaboration, authentication, and CRUD operations, or as a foundation for building your own realtime collaborative tool. ## Tech stack | Technology | Role | | -------------- | ---------------------------------- | | **Refine** | React-based CRUD framework | | **Supabase** | Backend (database, auth, realtime) | | **TypeScript** | Language | You can modify this stack by making changes to the `diploi.yaml`. For more information, [click here to learn about how to use the `diploi.yaml`](/reference/diploi-yaml). ## Key features * **Collaborative drawing** - Multiple users can draw on the same canvas in realtime * **Email authentication** - Built-in auth flow using Supabase Auth and Diploi’s [SMTP email service](/reference/built-in-email) * **Realtime sync** - Powered by Supabase’s realtime subscriptions * **Canvas management** - Create, browse, and share pixel art canvases ## Launch [Launch Drawing App on Diploi](https://diploi.com/starter-kit/refine-pixels) ## See also * [Using Starter Kits](/building/starter-kits) * [Starter kit repository](https://github.com/diploi/starter-refine-pixels) * [Supabase component](/building/components/supabase) * [Official Refine documentation](https://refine.dev/docs/) * [Official Supabase documentation](https://supabase.com/docs) * [Refine Pixels tutorial](https://refine.dev/blog/refine-pixels-guide/) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # OpenClaw > A self-hosted personal AI assistant starter kit that connects to messaging platforms like WhatsApp, Telegram, Slack, and Discord, with support for any LLM provider. OpenClaw is an open-source, self-hosted personal AI assistant that connects to messaging platforms including WhatsApp, Telegram, Slack, Discord, Google Chat, Signal, Microsoft Teams, and more. Use this starter kit when you want Diploi to run an OpenClaw instance without having to manually configure the hosting infrastructure for it. Besides offering the easiest way to host OpenClaw on the cloud, Diploi has features that help you start even faster: * Access to a browser terminal, to run CLI commands without requiring a SSH connection.  * Fully configured gpt-4.1-nano model, provided through the Diploi AI gateway.  ## Tech stack | Technology | Role | | ---------------- | -------------------- | | **Node.js** | Runtime | | **TypeScript** | Language | | **Hono** | Wrapper API server | | **React + Vite** | Control UI frontend | | **OpenClaw** | AI assistant runtime | | **gpt-4.1-nano** | AI model | You can extend your OpenClaw project with any of the components and add-ons supported on Diploi. For more information, [click here to learn about how to use the `diploi.yaml` to extend your project](/reference/diploi-yaml). ## Key features * **Multi-platform messaging** - WhatsApp, Telegram, Slack, Discord, Google Chat, Signal, Microsoft Teams, and more * **Browser terminal** - Run OpenClaw CLI commands directly from the browser without SSH * **Pre-configured AI model** - gpt-4.1-nano ready out of the box via the Diploi AI gateway * **Custom control panel** - Welcome page to monitor status, start/stop the gateway, and reset your instance * **API-driven management** - REST endpoints for programmatic control of the gateway * **Self-hosted & open-source** - Full ownership of your data and infrastructure ## How it works On startup, the wrapper server: 1. Initializes `/app/openclaw.json` via `openclaw onboard` under the hood 2. Applies config defaults (gateway token and model provider, access to Diploi’s browser terminal) 3. Starts OpenClaw with a SSL-protected endpoint 4. Proxies `/dashboard` to the OpenClaw dashboard UI, and all other routes to the Vite frontend When finished, you will have access to a custom welcome page which is unique for Diploi, from where you can: * See the general status of your OpenClaw gateway * Start/Stop the gateway globally * Reset OpenClaw to its startup defaults * Interact with the browser terminal and access the OpenClaw CLI * Access the OpenClaw dashboard  The OpenClaw dashboard hasn’t been modified, so you can expect the exact experience you would get if you configure OpenClaw manually. For more information about how to configure your OpenClaw instance, check their official documentation at ### API endpoints The Hono API wrapper exposes a set of endpoints which can be useful to perform programmatical actions on your OpenClaw instance. This is the full list of endpoints exposed: * `GET /healthz` - Health check * `GET /api/dashboard-token` - Retrieve the dashboard token * `GET /api/gateway/status` - Gateway status * `POST /api/gateway/start` - Start the gateway * `POST /api/gateway/stop` - Stop the gateway * `POST /api/gateway/restart` - Restart the gateway * `POST /api/full-reset` - Full reset * `POST /api/logout` - Logout * `WS /api/terminal-ws` - Browser terminal (PTY websocket) ### Environment variables Common variables used by the wrapper: * `PORT` (default: `3000`) - Server port * `HOSTNAME` (default: `0.0.0.0`) - Server hostname * `VITE_HOST` (default: `127.0.0.1`) - Vite dev server host * `VITE_PORT` (default: `5173`) - Vite dev server port * `OPENCLAW_CONFIG_PATH` (default: `/app/openclaw.json`) - Path to OpenClaw config * `OPENCLAW_STATE_DIR` (default: `/app`) - State directory * `OPENCLAW_WORKSPACE_DIR` (default: `/app/workspace`) - Workspace directory * `OPENCLAW_GATEWAY_TOKEN` - Gateway auth token (generated if missing) * `DIPLOI_AI_GATEWAY_URL` / `DIPLOI_AI_GATEWAY_TOKEN` - Optional model proxy wiring * `DIPLOI_LOGIN_SECRET` - Required to validate login cookie * `DIPLOI_LOGIN_USERNAME` / `DIPLOI_LOGIN_PASSWORD` - Credential login ### Project structure ```plaintext server/ index.ts # wrapper server + proxy processManager.ts # gateway lifecycle manager initOpenclaw.ts # OpenClaw config bootstrap + patching api.ts # API routes terminalWs.ts # PTY websocket bridge web/ src/ # React UI Dockerfile.dev # full dev image including OpenClaw build Dockerfile # production runtime image diploi.yaml # Diploi starter metadata ``` ## Launch [Launch OpenClaw on Diploi](https://diploi.com/starter-kit/openclaw) ## See also * [Using Starter Kits](/building/starter-kits) * [Starter kit repository](https://github.com/diploi/starter-openclaw) * [OpenClaw documentation](https://docs.openclaw.ai/) * [OpenClaw GitHub](https://github.com/openclaw/openclaw) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml) # Web App > A modern, production-ready template for building full-stack React applications using React Router, with SSR, TailwindCSS, and TypeScript. The Web App is a modern, production-ready template for building full-stack React applications. Use this starter kit when you want a clean starting point for a React project with server-side rendering, TailwindCSS styling, TypeScript, and an AI-friendly project structure, without spending time on boilerplate setup. ## Tech stack | Technology | Role | | ---------------- | --------------- | | **React** | UI framework | | **React Router** | Routing and SSR | | **TailwindCSS** | Styling | | **TypeScript** | Language | ## Key features * **Server-side rendering** - Built-in SSR via React Router for performance and SEO * **TailwindCSS** - Utility-first CSS framework pre-configured and ready to use * **TypeScript** - Full type safety across the application * **AI-friendly** - Project structure designed for easy AI-assisted development * **Production-ready** - Optimized build configuration out of the box ## Launch [Launch Web App on Diploi](https://diploi.com/starter-kit/web-app) ## See also * [Using Starter Kits](/building/starter-kits) * [Starter kit repository](https://github.com/diploi/starter-web-app) * [React + Vite component](/building/components/react-vite) * [Official React documentation](https://react.dev) * [Official React Router documentation](https://reactrouter.com) * [Official TailwindCSS documentation](https://tailwindcss.com/docs) * [Learn more about the `diploi.yaml` file](/reference/diploi-yaml)