diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 6ddde01..2f20704 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -14,7 +14,7 @@ export default defineConfig({ }), vite: { server: { - allowedHosts: ['.diploi.app'], + allowedHosts: [".diploi.me"], }, }, integrations: [ @@ -81,10 +81,11 @@ export default defineConfig({ { label: 'Deploying', items: [ - 'deploying/creating-a-project', - 'deploying/creating-a-deployment', - 'deploying/cloning-a-deployment', - 'deploying/custom-domain', + "deploying/creating-a-project", + "deploying/creating-a-deployment", + "deploying/import-from-github", + "deploying/cloning-a-deployment", + "deploying/custom-domain", ], }, { diff --git a/docs/src/assets/AnalyzeRepository.png b/docs/src/assets/AnalyzeRepository.png new file mode 100644 index 0000000..1ca4228 Binary files /dev/null and b/docs/src/assets/AnalyzeRepository.png differ diff --git a/docs/src/assets/GitHubRepoAccess.png b/docs/src/assets/GitHubRepoAccess.png new file mode 100644 index 0000000..b25ab11 Binary files /dev/null and b/docs/src/assets/GitHubRepoAccess.png differ diff --git a/docs/src/assets/ImportRepoFinalConfig.png b/docs/src/assets/ImportRepoFinalConfig.png new file mode 100644 index 0000000..1c0cf49 Binary files /dev/null and b/docs/src/assets/ImportRepoFinalConfig.png differ diff --git a/docs/src/assets/ImportRepoFromSelector.png b/docs/src/assets/ImportRepoFromSelector.png new file mode 100644 index 0000000..e4e012c Binary files /dev/null and b/docs/src/assets/ImportRepoFromSelector.png differ diff --git a/docs/src/assets/RepositoryCreatedWithDiploiImport.png b/docs/src/assets/RepositoryCreatedWithDiploiImport.png new file mode 100644 index 0000000..f49fd14 Binary files /dev/null and b/docs/src/assets/RepositoryCreatedWithDiploiImport.png differ diff --git a/docs/src/assets/RepositoryCreatedWithDiploiImport2.png b/docs/src/assets/RepositoryCreatedWithDiploiImport2.png new file mode 100644 index 0000000..5e131ef Binary files /dev/null and b/docs/src/assets/RepositoryCreatedWithDiploiImport2.png differ diff --git a/docs/src/assets/RepositoryDefaultImport.png b/docs/src/assets/RepositoryDefaultImport.png new file mode 100644 index 0000000..baddb32 Binary files /dev/null and b/docs/src/assets/RepositoryDefaultImport.png differ diff --git a/docs/src/assets/StartAProject.png b/docs/src/assets/StartAProject.png new file mode 100644 index 0000000..d58f772 Binary files /dev/null and b/docs/src/assets/StartAProject.png differ diff --git a/docs/src/assets/SwitchTabToImport.png b/docs/src/assets/SwitchTabToImport.png new file mode 100644 index 0000000..e831ea3 Binary files /dev/null and b/docs/src/assets/SwitchTabToImport.png differ diff --git a/docs/src/components/AddonList.astro b/docs/src/components/AddonList.astro deleted file mode 100644 index 1f2636e..0000000 --- a/docs/src/components/AddonList.astro +++ /dev/null @@ -1,27 +0,0 @@ ---- -import ElementCard from "./ElementCard.astro"; -import type { DiploiElement } from "./types"; - -const { - result: { data }, -} = await fetch( - `${import.meta.env.API_URL||'https://console.diploi.com'}/api/trpc/stack.listPreviewComponents` -).then((response) => response.json()); -if (!data || data.status !== "ok") { - throw new Error(`Failed to load pricing (${data})`); -} - -const addonList = data.components as DiploiElement[]; ---- - -

Add-ons available

- -
- { - addonList.map((addon) => { - if (addon.type === "addon") { - return ; - } - }) - } -
diff --git a/docs/src/components/ComponentList.astro b/docs/src/components/ComponentList.astro deleted file mode 100644 index db67e87..0000000 --- a/docs/src/components/ComponentList.astro +++ /dev/null @@ -1,27 +0,0 @@ ---- -import ElementCard from "./ElementCard.astro"; -import type { DiploiElement } from "./types"; - -const { - result: { data }, -} = await fetch( - `${import.meta.env.API_URL||'https://console.diploi.com'}/api/trpc/stack.listPreviewComponents` -).then((response) => response.json()); -if (!data || data.status !== "ok") { - throw new Error(`Failed to load pricing (${data})`); -} - -const componentList = data.components as DiploiElement[]; ---- - -

Components available

- -
- { - componentList.map((component) => { - if (component.type === "component") { - return ; - } - }) - } -
diff --git a/docs/src/components/ElementList.astro b/docs/src/components/ElementList.astro new file mode 100644 index 0000000..827e332 --- /dev/null +++ b/docs/src/components/ElementList.astro @@ -0,0 +1,53 @@ +--- +import ElementCard from "./ElementCard.astro"; +import { ElementType, type DiploiElement } from "./types"; + +interface Props { + type: 'component' | 'addon' | 'starter'; + elementsToShow?: string[]; + heading?: string; + hideHeading?: boolean; +} + +const { + type, + elementsToShow = [], + heading, + hideHeading = false +} = Astro.props; + +const defaultHeadings = { + component: "Components available", + addon: "Add-ons available", + starter: "Starter kits available", +}; + +const { + result: { data }, +} = await fetch( + `${import.meta.env.API_URL || "https://console.diploi.com"}/api/trpc/stack.listPreviewComponents`, +).then((response) => response.json()); + +if (!data || data.status !== "ok") { + throw new Error(`Failed to load ${type}s (${data})`); +} + +const componentTypeID = ElementType[type]; +let elementList: DiploiElement[] = data.components.filter( + (element: DiploiElement) => element.componentTypeID === componentTypeID +); + +if (elementsToShow.length > 0) { + elementList = elementList.filter((element) => + elementsToShow.includes(element.name) + ); +} + +const displayHeading = heading || defaultHeadings[type]; +--- + +{!hideHeading &&

{displayHeading}

} + +
+ {elementList.map((element) => )} +
diff --git a/docs/src/components/types.ts b/docs/src/components/types.ts index 885f14d..7815a45 100644 --- a/docs/src/components/types.ts +++ b/docs/src/components/types.ts @@ -1,7 +1,15 @@ -export type DiploiElement = { name: string; type: string; url: string, badge: string }; +export type DiploiElement = { name: string; type: string; url: string; badge: string, componentTypeID: number }; export type DiploiInstance = { name: string; vCpu: string; memoryGiB: string; price: number; }; +export type ComponentsAvailable = 'n8n' | 'FastAPI' | 'Laravel' | 'Flask' | 'Deno' | 'Supabase' | 'Next.js' | 'Node.js' | 'Bun' | 'React + Vite' | 'Astro' | 'SvelteKit' | 'Nue' | 'Ghost' | 'Hono' | 'Lovable' | 'ASP.NET' | 'Blazor' | 'Django' +export type AddonsAvailable = 'PostgreSQL' | 'Redis' | 'MongoDB' | 'MariaDB' | 'MinIO' + +export const ElementType = { + component: 1, + addon: 2, + starter: 3, +} as const; \ No newline at end of file diff --git a/docs/src/content/docs/building/add-ons.mdx b/docs/src/content/docs/building/add-ons.mdx index 75a9d64..14cbe9f 100644 --- a/docs/src/content/docs/building/add-ons.mdx +++ b/docs/src/content/docs/building/add-ons.mdx @@ -10,16 +10,15 @@ import ProjectOptionsGeneral from '../../../assets/ProjectOptionsGeneral.png'; import ProjectOptionsDomain from '../../../assets/ProjectOptionsDomain.png'; import ProjectOptionsComponentsAndAddons from '../../../assets/ProjectOptionsComponentsAndAddons.png'; import DeleteProject from '../../../assets/DeleteProject.png'; -import ComponentList from "../../../components/ComponentList.astro" import ImageToPNG from "../../../components/ImageToPNG.astro" -import AddonList from "../../../components/AddonList.astro" +import ElementList from "../../../components/ElementList.astro" import { LinkButton } from '@astrojs/starlight/components'; ### 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. - + :::note Services are not exposed publicly by default. They can only be accessed by the components in your project. diff --git a/docs/src/content/docs/building/components.mdx b/docs/src/content/docs/building/components.mdx index 2cb930c..143508b 100644 --- a/docs/src/content/docs/building/components.mdx +++ b/docs/src/content/docs/building/components.mdx @@ -3,8 +3,7 @@ title: Using Components description: Components are the core building block in Diploi. --- -import ComponentList from "../../../components/ComponentList.astro" -import AddonList from "../../../components/AddonList.astro" +import ElementList from "../../../components/ElementList.astro" import { LinkCard, CardGrid } from '@astrojs/starlight/components'; @@ -12,7 +11,7 @@ import { LinkCard, CardGrid } from '@astrojs/starlight/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. - + *** diff --git a/docs/src/content/docs/deploying/cloning-a-deployment.mdx b/docs/src/content/docs/deploying/cloning-a-deployment.mdx index b661c13..b33d9df 100644 --- a/docs/src/content/docs/deploying/cloning-a-deployment.mdx +++ b/docs/src/content/docs/deploying/cloning-a-deployment.mdx @@ -2,7 +2,7 @@ title: Cloning a Deployment description: How to clone an existing deployment sidebar: - order: 3 + order: 4 --- import ImageToPNG from "../../../components/ImageToPNG.astro" diff --git a/docs/src/content/docs/deploying/creating-a-project.mdx b/docs/src/content/docs/deploying/creating-a-project.mdx index ca4b989..52fca5e 100644 --- a/docs/src/content/docs/deploying/creating-a-project.mdx +++ b/docs/src/content/docs/deploying/creating-a-project.mdx @@ -22,7 +22,7 @@ The overall process to launch a new application is as follows: Create a project diagram -## Create a Project +## Creating the Stack for a Project In Diploi, a project refers to a combination of **components** and **add-ons** (also called **services**) that form the **stack** that will make up your application. diff --git a/docs/src/content/docs/deploying/custom-domain.mdx b/docs/src/content/docs/deploying/custom-domain.mdx index 7576a99..7c7180b 100644 --- a/docs/src/content/docs/deploying/custom-domain.mdx +++ b/docs/src/content/docs/deploying/custom-domain.mdx @@ -2,7 +2,7 @@ title: Adding Custom Domains description: Diploi offers the flexibility to configure custom domains on two levels. sidebar: - order: 4 + order: 5 --- import ContactInfo from "../../../components/ContactInfo.mdx" import ImageToPNG from "../../../components/ImageToPNG.astro" diff --git a/docs/src/content/docs/deploying/import-from-github.mdx b/docs/src/content/docs/deploying/import-from-github.mdx new file mode 100644 index 0000000..875a9b9 --- /dev/null +++ b/docs/src/content/docs/deploying/import-from-github.mdx @@ -0,0 +1,206 @@ +--- +title: Import from GitHub +description: Import your existing application from GitHub and host it on Diploi +sidebar: + order: 3 +--- + +import { Steps, Tabs, TabItem } from '@astrojs/starlight/components'; +import ElementList from '../../../components/ElementList.astro' +import ImageToPNG from "../../../components/ImageToPNG.astro" +import DeploymentSizesAndPricing from "../../../components/DeploymentSizesAndPricing.astro" +import CreateDeploymentSize from '../../../assets/CreateDeploymentSize.png' +import CreateDeploymentConnect from '../../../assets/CreateDeploymentConnect.png' +import DisableDeploymentCard from '../../../assets/DisableDeploymentCard.png' +import DisableDeploymentSwitch from '../../../assets/DisableDeploymentSwitch.png' +import EnableDeployment from '../../../assets/EnableDeployment.png' +import CloningAction from '../../../assets/CloningAction.png' +import CloningDialogConfirmation from '../../../assets/CloningDialogConfirmation.png' +import CloningDeploymentStage from '../../../assets/CloningDeploymentStage.png' +import DeploymentEnvVars from '../../../assets/DeploymentEnvVars.png' +import LaunchClonedDeployment from '../../../assets/LaunchClonedDeployment.png' +import RepositoryDefaultImport from '../../../assets/RepositoryDefaultImport.png' +import StartAProject from '../../../assets/StartAProject.png' +import SwitchTabToImport from '../../../assets/SwitchTabToImport.png' +import GitHubRepoAccess from '../../../assets/GitHubRepoAccess.png' +import AnalyzeRepository from '../../../assets/AnalyzeRepository.png' +import RepositoryCreatedWithDiploiImport from '../../../assets/RepositoryCreatedWithDiploiImport.png' +import RepositoryCreatedWithDiploiImport2 from '../../../assets/RepositoryCreatedWithDiploiImport2.png' +import ImportRepoFinalConfig from '../../../assets/ImportRepoFinalConfig.png' + +If you already have an application that you would like to bring into Diploi, you can import it using **GitHub**. + +*** + +## How to Import an Existing App into Diploi + +Diploi offers two ways to import projects, by selecting the repo you want to import from a list of available repositories in your GitHub account or by using a URL. + + + +1. Start a new project + + +2. Then switch from "Start From Scratch" to the "Import Repository" tab + + +3. Now you can select the source code you want to import. You can either select a repository stored in your own GitHub account or use a URL to import a public repo. + :::note + You can also import your own repositories via URL, as long as you have approved Diploi to have access to them or if they are public. + ::: + + +4. Once you have selected the repository you'll import, click on the "Analyze Repository" button. Diploi will then look for the configuration files in your repository, for example, `package.json` or 'requirements.txt', to determine how to properly import your project to Diploi. + + + + :::note + In cases when Diploi can't automatically configure an app to be hosted, Diploi will use a default configuration for Node.js, so you can start the project and try to make the necessary changes to be able to run it. + + If you need assistance configuring your imported project, contact us [via email](mailto:hello@diploi.com) or in [Discord](https://discord.com/invite/vvgQxVjC8G). + + ::: + :::tip + As mentioned before, any repository created using Diploi can be imported without additional configuration required. + + + ::: + +5. After Diploi analyzes your repository, you'll be able to make some adjustments to the project before launching on Diploi. Once your project is set up, just click on "Launch Stack" to start your first deployment. + + +6. Now you should have a development deployment running. If your project is not loading properly or fails to start, check the deployment logs. + :::tip + Diploi uses default port configurations for all supported frameworks and databases, so if your application uses other ports, try first changing your ports to match the ones used by Diploi. You can find the default port config by opening the `Dockerfile.dev` from the remote development environment. + ::: + + +### Other considerations + +#### Run command config + +By default, Diploi will use common run commands for development and staging/production deployments, so there might be some situations when your imported application might fail because your project uses different run commands. To handle these situations, you can either modify the `Dockerfile` and `Dockerfile.dev` created by diploi, or modify your app's config to include the commands used by Diploi to run your application. + +#### Importing an external public repository + +When you can import a publicly available repository, which doesn't belong to your GitHub account, you will have the option of creating a new repository in your account to store your code or start a project without a repository. + +In case you choose to proceed without a repo, your project won't be able to start a Production or Staging deployment, because Diploi creates a GitHub Action which takes care of creating a build of your project, which can be ran in Staging and Production. + +:::caution +You cannot add a repository to an existing project. If you need to import an application and link it to a new repository, you will need to go through the process of importing the app again and then create a new repository before launching the project. + +For more information about the differences between projects with or without a repository, [check this article going over their properties](/reference/projects/project#project-types). +::: + +#### Importing an app from a repository you own + +When you import from a repo you own, Diploi will use the same repository by default to store your code, so any changes you make to your project can be pushed to the same repository you imported from. + +Currently, you can't import a repository and save it in a new repository. + +:::note +Once you import an application, you will need to push the files that Diploi creates in your project directly to the `main` branch of your repository. This is needed because Diploi uses Docker in the background to host your application, and it uses a GitHub Action to generate a Docker build that can be used by Diploi. +::: + +## Supported Applications + +Although it is technically possible to import any application, not every app will work right away, and they might require additional work in order to run properly after you import them to Diploi. + +You can **import any application built with Diploi**, or with any of these frameworks: + + +:::note +As noted before, Diploi will apply a default configuration for Node.js to your imported project in cases when it can't automatically set up your application to be hosted. You can modify your application's tech stack [from the `diploi.yaml` file](/reference/diploi-yaml). +::: + +### Apps built on Diploi + +Any application built on Diploi can be imported into a new project without any additional configuration. Diploi will provision any component and add-on specified in the `diploi.yaml` file, but with the caveat that any environment variables used in the project must then be set manually, since Diploi doesn't store the project's secrets on GitHub. + + + +:::note +Any changes to component and/or add-on identifiers and root folders can break the base configuration of a project imported, so remember to update any references that have changed. +::: + +### Apps built on Lovable + +If you built a project on Lovable, you can seamlessly import it to Diploi. All you need to do is sync your application on GitHub. + +For Lovable projects using Supabase, you can use the open-source version of Supabase that is available on Diploi. You can add Supabase by adding the snippet to your `diploi.yaml` file. + +``` + - name: Supabase + identifier: supabase + package: https://github.com/diploi/component-supabase#main +``` + +Paste the snippet within the `components` field in the `diploi.yaml`, usually found in the root of your project. + +``` +components: + - name: Lovable + ... + + - name: Supabase + identifier: supabase + package: https://github.com/diploi/component-supabase#main +``` + +If you would like a detailed walkthrough about how to import an application built with Lovable, [click here to check our tutorial explaining how to do it](https://diploi.com/blog/importing_from_lovable_and_github). We also have a guide walkthrough explaining how to use Cursor for your imported Lovable app, which [you can check by clicking here](https://diploi.com/blog/exporting_from_lovable_to_cursor). + +:::tip +To add additional frameworks and databases to your imported Lovable app, add the components and add-ons you would like by modifying the `diploi.yaml` file. [Click here for more information about how to do it](/reference/diploi-yaml). +::: + +#### Running Supabase Migrations after Importing a Lovable App + +If you are using the Lovable project with Supabase, you'll need to run the necessary migrations, which should be stored inside your Supabase folder, as `migrations`. + +You can apply the migrations to your new Supabase instance by running the command `supabase migration up` from the development environment created when you import the project. + +### Apps built with Node.js or React + Vite + +Diploi allows you to import any application built with Node or React-Vite, but it might require changes if you expose non-default ports for your application or run if your application uses special commands to run in development, staging, or staging/production. + +### Default Config for Imported apps + +These are the default values used by Diploi to run applications. If your import app uses different commands from the ones shown here, make sure to either add or modify them in your project to match these values, or you can also modify these defaults by editing the Dockerfiles created by Diploi inside of your project. + + + + - Port exposed: 3000 + - Package manager: npm + - **Development** + - Package installation command: `npm install` + - RUN command: `npm run dev` + - **Staging** + - Package installation command: `npm install` + - Build command: `npm run build` + - RUN command: `npm run start` + - **Production** + - Package installation command: `npm install` + - RUN command: `npm run start` + + + - Port exposed: 5173 + - Package manager: npm + - **Development** + - Package installation command: `npm install` + - RUN command: `npm run dev` + - **Staging** + - Package installation command: `npm install` + - Build command: `npm run build` + - RUN command: `npm run start` + - **Production** + - Package installation command: `npm install` + - RUN command: `npm run start` + + + +:::tip +Besides `npm`, Diploi also supports `yarn` and `pnpm` as package managers. + +For Python-based applications, currently only `uv` is supported. +::: \ No newline at end of file diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index c5e1e2d..8787b7b 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -2,8 +2,7 @@ title: Introduction description: Diploi is a platform and workflow to boost development team's efficiency --- -import ComponentList from '../../components/ComponentList.astro' -import AddonList from "../../components/AddonList.astro" +import ElementList from "../../components/ElementList.astro" ## What is Diploi? @@ -36,9 +35,11 @@ If you started your project on a vibe-coding platform and need better team suppo Diploi supports a wide (and growing) range of frameworks and databases, including: - + - + + + *** diff --git a/docs/src/content/docs/reference/projects/project-lifecycle.mdx b/docs/src/content/docs/reference/projects/project-lifecycle.mdx index 0388672..94336a2 100644 --- a/docs/src/content/docs/reference/projects/project-lifecycle.mdx +++ b/docs/src/content/docs/reference/projects/project-lifecycle.mdx @@ -10,9 +10,8 @@ import ProjectOptionsGeneral from '../../../../assets/ProjectOptionsGeneral.png' import ProjectOptionsDomain from '../../../../assets/ProjectOptionsDomain.png'; import ProjectOptionsComponentsAndAddons from '../../../../assets/ProjectOptionsComponentsAndAddons.png'; import DeleteProject from '../../../../assets/DeleteProject.png'; -import ComponentList from "../../../../components/ComponentList.astro" +import ElementList from "../../../../components/ElementList.astro" import ImageToPNG from "../../../../components/ImageToPNG.astro" -import AddonList from "../../../../components/AddonList.astro" ## Creating a Project @@ -27,13 +26,13 @@ Every project is started from the set of components and add-ons you choose and t 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. - + ### 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. - + :::note Services are not exposed publicly by default. They can only be accessed by the components in your project. @@ -64,6 +63,8 @@ Once you choose between using a new repository or launching without a repository :::note **Using an existing repository and importing an application to Diploi** is not yet an automagically process, but it is possible. If you would like to bring your existing application to Diploi, contact us on Discord or [via email](mailto:hello@diploi.com). + +For more information about how to use the Import from GitHub feature, [check this article](/deploying/import-from-github). ::: *** diff --git a/docs/src/content/docs/reference/technical-deep-dive.mdx b/docs/src/content/docs/reference/technical-deep-dive.mdx index e07d8cd..727b8b6 100644 --- a/docs/src/content/docs/reference/technical-deep-dive.mdx +++ b/docs/src/content/docs/reference/technical-deep-dive.mdx @@ -25,7 +25,7 @@ The normal way of starting a Diploi project is to let Diploi create the GitHub r These images are pushed to an image repository hosted by us in order to make images as fast as possible when launching deployments. -If you want to make modifications to the application container you have full power to control the image created in your own GitHub repository, so you are not restricted to the images dockerfiles we provide as starting points. +If you want to make modifications to the application container you have full power to control the image created in your own GitHub repository, so you are not restricted to the images Dockerfiles we provide as starting points. In order to make remote development, deployment statuses, etc. work there are certain things that need to be in place. We will provide more documentation on how these things work as the Diploi service matures.