diff --git a/app/components/IntegrationsList.vue b/app/components/IntegrationsList.vue index 7b759a26..fd271a74 100644 --- a/app/components/IntegrationsList.vue +++ b/app/components/IntegrationsList.vue @@ -18,6 +18,12 @@ const integrations = [ to: '/guides/integrations/zapier', logo: '/docs/img/zapier.png', }, + { + title: 'Vercel', + description: 'Connect Directus with Vercel to trigger deployments and monitor build status.', + to: '/guides/integrations/vercel', + logo: '/docs/img/vercel.webp', + }, ]; diff --git a/content/guides/11.integrations/4.vercel/.navigation.yml b/content/guides/11.integrations/4.vercel/.navigation.yml new file mode 100644 index 00000000..cc193d5e --- /dev/null +++ b/content/guides/11.integrations/4.vercel/.navigation.yml @@ -0,0 +1,2 @@ +title: Vercel +headline: Vercel diff --git a/content/guides/11.integrations/4.vercel/0.index.md b/content/guides/11.integrations/4.vercel/0.index.md new file mode 100644 index 00000000..a3fbeeaa --- /dev/null +++ b/content/guides/11.integrations/4.vercel/0.index.md @@ -0,0 +1,55 @@ +--- +id: vercel-integration +title: Integration +description: Connect Directus with Vercel to trigger deployments, monitor build status, and manage your frontend projects directly from your Directus instance. +technologies: + - vercel +--- + +Connect your Directus instance with Vercel to centrally manage deployments, monitor build status, and control multiple frontend projects — all without leaving Directus. + + +::callout{icon="heroicons-outline:rocket-launch"} +**Quick Start** +1. **Enable Deployment module**: Enable the Deployment module from your Directus project settings +2. **Connect your Vercel account**: Navigate to the Deployment module and add your Vercel API token +3. **Add projects**: Connect one or more Vercel projects to your Directus instance +4. **Start deploying**: Trigger builds and monitor deployment status from Directus +:: + +## Getting Started + +### Connect Your Vercel Account + +1. In Directus, navigate to **Settings** +2. From the **Modules** section, enable the **Deployment** module +3. Navigate to the Deployment module now shown in the **primary navigation** +4. Select **Configure Vercel** to begin the integration + - **Personal Access Token**: Your Vercel API [access token](https://vercel.com/kb/guide/how-do-i-use-a-vercel-api-access-token) +5. Click **Save** to establish the connection and begin adding projects + +![Vercel configuration token](/img/vercel-configuration-1.png) + +### Configure Projects + +1. From the **Vercel Configuration** screen, optionally add your **Team ID** if you want to deploy team projects rather than personal projects +2. Select **which Vercel projects** you want to manage from Directus +2. Click **Save** to add the projects to the integration +4. You can return to the Vercel integration settings at any time to add or remove projects + +::callout{icon="material-symbols:info-outline"} +**Permissions** +
+**Admin Access Required (For Now)** +
+Currently, only admin users can trigger deployments and manage Vercel projects. Role-based permissions will be available in an upcoming release, allowing you to grant deployment access to specific users and roles. +:: + +![Vercel configuration projects](/img/vercel-configuration-2.png) + + +## Documentation + +**[Working with Deployments →](/guides/integrations/vercel/deployments)** + +Trigger deployments, monitor build status, and manage your frontend projects directly from your Directus instance. diff --git a/content/guides/11.integrations/4.vercel/deployments.md b/content/guides/11.integrations/4.vercel/deployments.md new file mode 100644 index 00000000..7f581d19 --- /dev/null +++ b/content/guides/11.integrations/4.vercel/deployments.md @@ -0,0 +1,105 @@ +--- +id: vercel-deployments +title: Deployments +description: Complete guide for triggering deployments, monitoring build status, and viewing logs for your Vercel projects from Directus. +technologies: + - vercel +--- + +Once you've connected your Vercel account and configured your projects, you can manage all deployment activities directly from Directus. + +You should trigger deployments after publishing content changes that affect your frontend. + +**[← Back to Vercel Integration](/guides/integrations/vercel)** + +## Triggering Deployments + +Trigger new deployments for any connected Vercel project: + +1. Navigate to the **Deployment** module +2. Click on the **Vercel** provider +3. Select the project you want to deploy +4. Click the **Deploy** button in the top right +5. Vercel will begin building and deploying your project + +Each deployment is tracked in Directus with the associated deployment metadata. + +![Vercel integration overview](/img/vercel-integration-1.png) + +## Monitoring Deployment Status + +::callout{icon="material-symbols:info-outline"} +**Only deployments triggered from Directus appear in this interface**. Deployments made directly in Vercel will not be shown. +:: + +Track the status of your deployments in the deployment list screen. The list shows: + +- **Deployment ID**: Vercel identifier for each build +- **Status**: Current deployment state + - `QUEUED`: The deployment is waiting to be built + - `INITIALIZING`: The deployment is in the initialization phase + - `BUILDING`: The deployment is currently being built + - `READY`: The project is successfully built, deployed, and live + - `CANCELED`: The deployment was canceled before completion + - `ERROR`: The deployment failed during the build or runtime phase +- **Target**: Environment (production, preview, etc.) +- **Started**: When the deployment began +- **Duration**: How long the build took +- **Author**: Who triggered the deployment + +## Viewing Build Logs + +Access detailed build logs for any deployment: + +1. Click on any deployment from the project list +2. View the complete build output, including: + - Build steps and timing + - Static/SSG/dynamic rendering information + - Build cache creation and upload + - Error messages (if applicable) +3. Use the **search** function to find specific log entries +4. Filter by **log level** (All, Stdout, Stderr) to narrow results + +Build logs help you troubleshoot deployment issues and understand your build process. + +![Vercel integration build logs](/img/vercel-integration-2.png) + +## Exporting Logs + +Download deployment logs for documentation or troubleshooting: + +1. Open the deployment details view +2. Click the **Download** icon in the top right +3. Logs are exported as a text file with associated timestamps + +![Vercel integration export logs](/img/vercel-integration-3.png) + + +## Visiting Deployed Sites + +Quickly access your live deployments: + +1. From the deployment details view, click the **Visit** button +2. Your deployed site opens in a new tab + +![Vercel integration export logs](/img/vercel-integration-4.png) + +## Best Practices + +**Deployment Workflow** +- Trigger deployments after publishing content changes that affect your frontend +- Monitor the first few deployments after setup to ensure builds complete successfully +- Keep build logs for failed deployments to troubleshoot issues + +**Performance Tips** +- Build times shown in the deployment list help you track build performance over time +- Vercel's build cache can help improve subsequent deployment speeds + +**Troubleshooting** +- If a deployment fails, check the build logs for specific error messages +- Verify your Vercel project configuration and build settings +- Ensure your Personal Access Token has the necessary permissions + +## Next Steps + +- **[← Back to Integration](/guides/integrations/vercel)** Return to the integration overview diff --git a/public/img/vercel-configuration-1.png b/public/img/vercel-configuration-1.png new file mode 100644 index 00000000..813951f4 Binary files /dev/null and b/public/img/vercel-configuration-1.png differ diff --git a/public/img/vercel-configuration-2.png b/public/img/vercel-configuration-2.png new file mode 100644 index 00000000..f560367f Binary files /dev/null and b/public/img/vercel-configuration-2.png differ diff --git a/public/img/vercel-integration-1.png b/public/img/vercel-integration-1.png new file mode 100644 index 00000000..8952a1da Binary files /dev/null and b/public/img/vercel-integration-1.png differ diff --git a/public/img/vercel-integration-2.png b/public/img/vercel-integration-2.png new file mode 100644 index 00000000..662c00f7 Binary files /dev/null and b/public/img/vercel-integration-2.png differ diff --git a/public/img/vercel-integration-3.png b/public/img/vercel-integration-3.png new file mode 100644 index 00000000..cc18e326 Binary files /dev/null and b/public/img/vercel-integration-3.png differ diff --git a/public/img/vercel-integration-4.png b/public/img/vercel-integration-4.png new file mode 100644 index 00000000..5e00dfbc Binary files /dev/null and b/public/img/vercel-integration-4.png differ diff --git a/public/img/vercel.webp b/public/img/vercel.webp new file mode 100644 index 00000000..8eedd55b Binary files /dev/null and b/public/img/vercel.webp differ