directus-labs / agency-os

The open source operating system for digital agencies. Built with Directus and Nuxt.

AgencyOS

AgencyOS is everything you need to get your agency off the ground, or improve tooling for your existing company. Nuxt 3 Website / Application + Directus Backend.

Brought to you by partnership magic ✨ between Directus and NuxtLabs.

Introduction · ⭐ Features · 🚧 Installation and Development · 🚢 Deployment · 🧰 Tech Stack · 🛟 Community Help · ❤️ Contributing

Introduction

One of the easiest parts of running a successful digital agency is doing the actual work. I mean - who doesn’t love to put their head down to collaborate, design, and build amazing stuff for clients?

The hard bits are everything else that goes along with that – managing large projects with tons of moving pieces, communicating with clients to properly manage expectations, ensuring you’re paid on time, and more.

When every billable hour counts, you don’t have the time to build your own tools from scratch. And you shouldn’t be forced to settle for off-the-shelf tech that falls short of your preferred workflow.

AgencyOS is the open source operating system to help you run (or start) your digital agency. It’s built on open source tools (Nuxt and Directus) and designed to be 100% hackable so you can build YOUR solution, YOUR project management app, YOUR agency’s operating system – in record time.

Why?

Quite a few folks on the Directus core team have experience running agencies and we know it’s not all rainbows and sunshine. We wanted to build an tool that our agency partners (and any other agency) would get a lot of value from. It was also created as a complete example to showcase the power and flexibility of Directus as a platform to rapidly build your own apps and tools.

Getting Started

• → Read Installation Instructions
• → View The Demo Site
• → Watch the Video Tutorials

---

⭐ Features

Website

When you’re hard at work delivering for clients - your own site tends to suffer. AgencyOS includes beautiful website template that’s easily customizable and already integrated with an easy-to-use headless CMS.

It’s not a starter template. It’s a complete website project for you customize or inspire you to build an even better solution.

• Dynamic page builder with live preview
• Blog posts and categories
• Dynamic form generation with validation
• Dynamic OG image generation
• Full SEO support out of the box – (meta tags, sitemap, redirects, JSON-LD, and more)
• Global search functionality
• Common utilities so you don't need to include yet another package
• Google Fonts support
• ESLint and Prettier pre-configured
• Full dark mode support
• Themeable with easy config file

CRM / Project Tracker

Maintaining important client relationships doesn’t just fall to the sales team. So why maintain separate project management and CRM tools? AgencyOS includes a completely customizable CRM so you can work the way you want.

• Organizations and contacts
• Sales pipeline and activities
• Dynamic project proposal builder
• Project and task management
• Customizable project templates
• Invoicing and expense tracking
• Customize and build your own dashboards without writing code
• Automate processes using Directus Flows

Client Portal

Communication is probably the biggest driver of project success. With AgencyOS’s private client portal - you can insure your clients stay up to date and even hold them accountable for delivering the files and information you need to complete their project

• Private authenticated portal for clients to self-serve
• Clients can view their projects, tasks, and files
• Clients can pay invoices through Stripe
• Assign tasks to clients as part of project templates

---

🚧 Installation and Development

There are two main pieces to AgencyOS - the backend and APIs powered by Directus and the frontend website and application powered by Nuxt.

🐰 Directus - Backend + Headless CMS

1 - Create a Directus project

There are two ways you can quickly setup a Directus project to use for AgencyOS.

1a - Register for a Directus Cloud account

https://directus.cloud/register

This is the easy button. You don’t have to mess with Docker or working out how to deploy a Directus instance at AWS, Digital Ocean, or similar hosts. A couple of clicks and in less than 2 minutes you’ll have a ready to go Directus project.

Directus offers a 14 day free trial for Cloud projects which is plenty of time to give AgencyOS a spin. Note: After the 14 day trial you will need to pay for the service. Consult the Directus pricing page for the latest pricing information.

OR

1b - Self Host a Directus Instance

If you're prefer to self-host Directus, we highly recommend you do so with Docker.

Important Note: This is a free and open source community release. Therefore, we cannot provide support for self-hosted instances WITHOUT an Enterprise Self-Hosted license or formal support agreement. Learn more and contact our team for details on Enterprise Self-Hosted.

You’ll find a docker-compose.yaml inside the repo that you can use to quickly spin up a local instance of Directus to test with. You should have Docker installed and running on your machine first. You can download it here.

PostgreSQL is the tested and preferred database vendor for this project. The project has been tested and verified to work against the docker-compose.yaml file included in the repo. Directus does support many different SQL database vendors, but we ONLY test this project against PostgreSQL.

# Navigate to the .directus directory
$ cd .directus

# Run docker compose
$ docker compose up

# Docker does it's thing and your Directus project will be available at http://localhost:8055/ or http://0.0.0.0:8055/

You can find more install instructions using Docker here on the Directus documentation.

For deploying the project live, please see the Deployment section.

2 - Generate a static token for the admin user

You need the static token to seed the project.

1. Go to the User Directory
2. Choose the Administrative User
3. Scroll down to the Token field
4. Generate token and copy it
5. Save the user (do NOT forget to save because you’ll get an error that shows Invalid token!)

3 - Apply the AgencyOS Template

Open your terminal, run the following command, and simply follow the prompts.

npx directus-template-cli@latest apply

Using the @latest tag ensures you download the most up to date version of our templates - in case you've ran the command previously.

1. Choose the Agency OS template.
2. Paste the URL to your Directus instance
3. Paste your Admin user static token
4. Wait for script to finish

You can learn more about the Directus Template CLI tool here. Note: It can take a few minutes for the template script to run if you’re using a remotely hosted Directus instance.

---

⛰️ Nuxt - Frontend

For your website and client portal, AgencyOS uses Nuxt as the frontend framework of choice.

1 - Clone the repo

Use This Template

Or from the terminal

git clone https://github.com/directus-community/agency-os.git your-project

Navigate to the project

cd your-project

2 - Fix your .env file

• Change the filename env.example to .env
• Add the url to your Directus instance
• Add the static token for your admin user you generated above

Your .env file should look similar to this.

# Directus Setup
DIRECTUS_URL="https://your-instance.directus.app"
DIRECTUS_SERVER_TOKEN="your_directus_server_token_for_server_only_routes"
SITE_URL="http://localhost:3000"

# Stripe Setup (If you want to allow payments within the portal)
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxx
STRIPE_PUBLISHABLE_KEY=pk_xxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxx

3 - Install your dependencies

pnpm i

4 - Start the development server

pnpm dev

http://localhost:3000

5 - Build for production when you're ready

pnpm build

🚢 Deployment

Deploying Nuxt - Frontend

Please check the official Nuxt Deployment Documentation for the supported providers. Here’s a few of the more popular hosts that work well with Nuxt.

One Click Options

Note: Vercel is the recommended deployment target for AgencyOS at the moment because of a few memory issues with the build process on Netlify.

Vercel

Netlify

Deploying Directus - Backend

If you don't want to mess with DevOps or spinning up servers, you can spin up a new project on Directus Cloud in about 90 seconds.

If you prefer self-hosting, Docker is the recommended way to deploy Directus. Please check the official Directus Docker Guide

Resources for Self Hosting Directus

• Deploy Directus to DigitalOcean with Docker
• Deploy Directus on Railway

---

🧰 Tech Stack

Nuxt

Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful. The leading Vue framework that handles routing, server side rendering, and more.

Learn more about Nuxt

Directus

Directus is a headless CMS that instantly turns your SQL database into REST and GraphQL APIs and gives you a beautiful, intuitive no-code app to manage all your content and data. But it's also more than just a headless CMS. It’s an open data platform that has all the tools you need for creating, managing, serving, visualizing, and even automating your data for your next web, mobile, or digital project.

Learn more about Directus

---

UI

• Nuxt UI - Fully styled and customizable components for Nuxt. Nuxt UI is the official UI component library for Nuxt.
• Tailwind CSS – Utility-first CSS framework that allows you to rapidly build sites and maintain consistency across team members. There are several Tailwind Plugins installed and ready to use as well – Typography and Forms.
• Headless UI – Completely unstyled, fully accessible UI components.
• FormKit – Form library for Vue that saves you hours of time by simplifying form creation. Includes error handling, validation, theming, and even generation from a schema out of the box.
• Nuxt Icon - Adds <Icon> component that allows you use tons of icons. See available icons here.

Utilities

• VueUse – Collection of Vue Composition Utilities. Already installed and configured so you can just import any of the composables in their library straight away.
• VueUse Motion – Composables putting your components in motion. Makes it easy to provide tasteful animations with less effort.

🛟 Community Help

For community help or support, please see the Directus Discord server.

• Directus Discord – Join over 10k+ developers and community members to ask questions and live discussion around Directus.
• Nuxt Discord

❤️ Contributing

AgencyOS is a community driven project so we'd love to have your contributions.

Here's how you can contribute:

• Open an issue if you believe you've encountered a bug.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.

🙏 Thanks To

AgencyOS was created by Bryant Gillespie (@bryantgillespie). But big thank yous are owed to...

• @rijkvanzanten and @benhaynes for building Directus and including me on the journey.
• @atinux and @alexchopin for creating the Nuxt framework.
• @intevel and @becem-gharbi for each of their separate nuxt-directus modules which served as source of inspiration.

agency-os's Issues

Some errors during in-docker database initial setup

On the first docker compose up I see the following:

database-1  | fixing permissions on existing directory /var/lib/postgresql/data ... ok
database-1  | creating subdirectories ... ok
database-1  | selecting dynamic shared memory implementation ... posix
database-1  | selecting default max_connections ... 100
database-1  | selecting default shared_buffers ... 128MB
database-1  | selecting default time zone ... Etc/UTC
database-1  | creating configuration files ... ok
directus-1  |
directus-1  |    ╭───────────────────────────────────────────────────╮
directus-1  |    │                                                   │
directus-1  |    │                 Update available!                 │
directus-1  |    │                                                   │
directus-1  |    │                 10.8.3 → 10.10.4                  │
directus-1  |    │                 9 versions behind                 │
directus-1  |    │                                                   │
directus-1  |    │                 More information:                 │
directus-1  |    │   https://github.com/directus/directus/releases   │
directus-1  |    │                                                   │
directus-1  |    ╰───────────────────────────────────────────────────╯
directus-1  |
database-1  | running bootstrap script ... ok
directus-1  | Error: connect ECONNREFUSED 172.25.0.3:5432
directus-1  |     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16) {
directus-1  |   errno: -111,
directus-1  |   code: 'ECONNREFUSED',
directus-1  |   syscall: 'connect',
directus-1  |   address: '172.25.0.3',
directus-1  |   port: 5432
directus-1  | }
directus-1 exited with code 1

It then re-starts and continues to populate the DB, but I guess this should not happen :)

Fetch the data from the server side instead of the client?

I've been exploring Directus for self-hosting scenarios over the past few weeks. While I've found it to be a powerful solution, I faced persistent CORS issues that ultimately led me to abandon my first project due to time constraints.

To overcome this, I've experimented with server-side data fetching, bypassing the SDK in favor of direct REST API calls. This effectively uses server routes as a proxy, eliminating the CORS issues I encountered. When deployed via Docker, this setup works seamlessly.

Given these challenges, I'm wondering if server-side data fetching is something you're considering adding to this template. It could provide a smoother development experience for those looking to self-host Directus.

I'd be more than willing to contribute to this feature in my spare time if it aligns with your roadmap.

This module cannot be imported in server runtime || og-image not showing

The projects works fine but I'm getting this error whenever I try to rebuild it.

✔ Server built in 96167ms
ℹ Initializing prerenderer

[3:08:01 PM]  ERROR  This module cannot be imported in server runtime. [importing @nuxt/kit from node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_nux_undt3zhfvsokhebtqgy6i27fba/node_modules/nuxt-simple-sitemap/dist/runtime/util/pageUtils.mjs]

ℹ Prerendering 2 routes
  ├─ /__og-image__/font/Inter/700.ttf (55ms)
  ├─ /__og-image__/font/Inter/400.ttf (40ms)
ℹ Prerendered 2 routes in 47.356 seconds
✔ Generated public .output/public                                                                                                                                                                                         
ℹ Building Nuxt Nitro server (preset: node-server)

[3:09:09 PM]  ERROR  This module cannot be imported in server runtime. [importing node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs from node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_nux_undt3zhfvsokhebtqgy6i27fba/node_modules/nuxt-simple-sitemap/dist/runtime/util/pageUtils.mjs]

Also note: after merging this PR #85 the link works as expected (not using the localhost anymore)
<meta property="og:image" content="https://mydomain.com/__og-image__/image/team/og.png">

But the og-image not appearing and gives me this error:
{ "url": "/__og-image__/image/og.png", "statusCode": 500, "statusMessage": "", "message": "Invalid JPEG", "stack": "" }

I'm not sure if they both are related, but any help would be appreciated.

Also, I would like to know where is the og-images stored in my server? because I can't see any of them created in the public path.

I'm selfhosting on Digital Ocean
Node version 20.12.2

pnpm i fails

Directus is hosted on DigitalOcean through Cloudron...everything works fine on that end

Get user permissions?

Hi guys,

I am working on the AgencyOS portal area.
Now I and what to add some logic to some modals and pages, based on the logged-in user (role).
I know I can get the logged-in user with the function: const { user } = useDirectusAuth();. but I am running into a few problems with this.

1. No "role" key and value in response
   This makes is hard to see if the user is a admin or a client for example.

2. Permissions cannot be checked without a role?
   Because no role is set in the user object, it makes it hard check for the correct permissions. I know middleware uses this check page permissions, but is not working for modals/slide-outs right?

Or should I use another way to check this?
Thanks in advance!

René

Default client password

I had to manually set the password of [email protected] to password in order to be able to enter the client area.

'Column block' not working in frontend

I am not sure if this is a bug, but it seems the 'column block' is not showing in the front-end. It is also not showing in the demo site of agencyOS, there should be a 'services' block on the home page below the 'form section', but it is not showing. Same if I add new Column blocks on a different page.

Issue Enabling Stripe Integration in Agency-OS with Stripe Webhook

Hey, I am attempting to enable Stripe on my agency-os platform, but I've encountered a roadblock. The documentation doesn't specify which endpoint URL should be used. Before I can create a Stripe token, I need to specify a URL, but it's unclear where I can find this information.

So my questions are:

1. What is the correct endpoint URL to use for Stripe integration in agency-os?
2. Where in the documentation can I find this information, or is it missing entirely?

Thanks is advance!

Got Error updating when applying AgencyOS template.

You selected AgencyOS
------------------
What is your Directus URL?: http://0.0.0.0:8055/
What is your Directus Admin Token?: iVDSN0L3M4EURASHyGRPm3cLpIc6Z9eG
------------------
Loaded Schema
Applying template - AgencyOS... ⣾
Loaded Roles
Loaded Folders
Loaded Files
Loaded Users
Loaded Dashboards
Loaded Panels
Applying template - AgencyOS... ⣯
Error updating organizations [
  {
    message: 'Invalid foreign key for field "owner" in collection "organizations".',
    extensions: {
      code: 'INVALID_FOREIGN_KEY',
      collection: 'organizations',
      field: 'owner'
    }
  }
Applying template - AgencyOS... ⡿
Error updating os_deals [
  {
    message: 'Invalid foreign key for field "owner" in collection "os_deals".',
    extensions: {
      code: 'INVALID_FOREIGN_KEY',
      collection: 'os_deals',
      field: 'owner'
    }
  }
Loaded Data
Loaded Flows
Loaded Operations
Loaded Presets
Loaded Settings
AgencyOS... done

and it didnot stop. it continued and output done

Is everything done? im not sure.

no error found when I was using. but im not sure it's everything done.

Error when applying template

Environnement
Directus version 10.6.0 SQLite version running on localhost
Macos 12.6.1

Description
Hello there,

I'm experiencing errors while using the npx directus-template-cli apply command.

This result in incomplete/breaking form

Magic link ends up with 401

Hello,
I have followed the guide for directus with agencyos template (docker) and Nuxt, all default (also build my own docker image basing on the guide). The frontend asks just for email (no password), but directus returns 401 and logging Invalid user credentials.
I guess, this magic link requires some additional config on directus or so (its not well explained).
I didn't forget to setup api token for Nuxt.
I have configured smtp variables, but i guess, the problem is somewhere in accepting this magic link auth method.

Hydration style mismatch

Directus hosted on Railway
Nuxt hosted on my localhost machine port 3001

Pages navigation don't load page content

Hi guys,

I just installed a new project in my local with pnpm and directus is runing on http://localhost:8055 using docker.

The project run, I click in the navigation item, the URL change, but nothing happens to the page.

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< Proxy(Object) {…} > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
    at unmountComponent (chunk-VDMLRAME.js?v=71d93eb8:8058:18)
    at unmount (chunk-VDMLRAME.js?v=71d93eb8:7969:7)
    at patchSuspense (chunk-VDMLRAME.js?v=71d93eb8:2790:9)
    at Object.process (chunk-VDMLRAME.js?v=71d93eb8:2673:7)
    at patch (chunk-VDMLRAME.js?v=71d93eb8:6809:16)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-VDMLRAME.js?v=71d93eb8:7542:9)
    at ReactiveEffect.run (chunk-VDMLRAME.js?v=71d93eb8:430:19)
    at instance.update (chunk-VDMLRAME.js?v=71d93eb8:7586:17)
    at callWithErrorHandling (chunk-VDMLRAME.js?v=71d93eb8:1660:33)
    at flushJobs (chunk-VDMLRAME.js?v=71d93eb8:1866:9)

Thanks,

CORS issues for client portal in "PROD" like deployment

So I've just added soft launched AgencyOS into my staging Directus instance and during testing most things seem to work ok. I've started customizing the "Blocks", pages, etc. But when I get back to the /portal related pages/functionality I'm getting the CORS issues again. The front-end is being worked on locally (obviously) and the backend is deployed in parity with what Production will look like (right now I'm using heroku).

The backend is located at a public domain such as: https://cms.example.com

I also have these ENV set on the Directus instance: in heroku:

CORS_ENABLED=true
CORS_ORIGIN=/^https:\/\/www.example.com$/,/^http:\/\/example.test:[0-9]{1,5}$/

Then on the nuxt app side, the production subdomain of the nuxt app will be @ www in PROD and then I also added a white-list entry in Directus for the testing local (as above) url which is resolved to 127.0.0.1 using dnsmasq locally on my machine.

When the portal page calls out to /login route directly for the login flow with Directus we get a CORS origin error.

@bryantgillespie a few questions:

Do you think this is just me and a user error; did I miss something?
Is that section of code trying to talk directly to Directus from the client?
If so, should the web client use its nuxt server routes for login flow, leaving all that logic in the nuxt side so that all that is same-origin?

directus apply template doesn't work

On local works, but now that I have the postgres db on railway, not only is really slow the loading off collections, but eventually will not complete successfully. Tables are correctly created, but seems there is no content inside.

End with this error:

Applying template - AgencyOS to http://0.0.0.0:8055
Loading 76 collections and 700 fields.... !
TypeError: Cannot read properties of undefined (reading 'status')

File uploads as "Client" role, end up in the main/root folder.

I don't know if this is possible at the moment, but using the current directus_files and directus_folder roles/permissions, when a Client user uploads a new file, it ends up in the root folder, which is not visible to the Client role, so it seems as if nothing happened.

WebSocket is already in CLOSING or CLOSED state

it connects to directus but when I open the chat I get the error in the web console: "WebSocket is already in CLOSING or CLOSED state"

docker compose on MacOS: "chown: changing ownership of '/var/lib/postgresql/data': Permission denied"

postgress does not start because of this error:
chown: changing ownership of '/var/lib/postgresql/data': Permission denied

Auto Selection Based on Current

When adding a contact to an organization from the Organization page, the organization is not pre-selected:

This same missing feature applies to other places under different sections, like adding activities.
I am unsure if this is due to a limitation on the M2M of Directus itself or if there is a way to configure this; this template is just missing it.
Regardless, IMHO, the impact on usability is significant enough to discuss trying to figure out a way to find a solution for this.

Use @nuxtjs/color-mode

On https://github.com/directus-community/agency-os/blob/main/composables/useDark.ts

See https://color-mode.nuxtjs.org/

It better supports the different Nuxt rendering modes

invalid admin token on localhost

What type of template would you like to apply?
Official templates
Select a template. AgencyOS
You selected AgencyOS

What is your Directus URL?: http://localhost/
What is your Directus Admin Token?: Yr0rolr_BVtSB_c0UBzpnyumHd08di2s
» Warning: Invalid token
What is your Directus Admin Token?:

A bunch of errors when trying to run this system

Hi,

First of all, thank you for share this interesting system.

I have Windows with WSL2 and all commands (and repo) are in WSL.

I clone the repo and open it in my IDE.

I moved to .directus dir and type docker compose up, in the console I see that:

I go to http://localhost:8055 and I can successfully login. So I create a token for admin user.

On another terminal window I type npx directus-template-cli@latest apply and paste my admin token. I choose Headless CMS - Website as template. Now I see a lot of errors like that:

but at the end it says:

So, I copy .env.example to .env, I update env vars.

I run pnpm i which installs all succesffully

i run pnpm dev and after few seconds I see that errors:

I open http://localhost:3000 and I see that:

But in directus it looks like I have home page:

Self-hosted Directus & Nuxt Agency OS issue

Hello, I have set up directus and nuxt on a self hosted ubuntu server according to your readme instructions. It seemingly installs fine with some small warning on the template application. But when I run pnpm dev I get the following error

[nuxt] [request error] [unhandled] [500] Cannot read properties of null (reading 'id') at ./components/base/VGallery.vue:101:17 at Module.ssrRenderList (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:442:7) at _sfc_ssrRender (./components/base/VGallery.vue:96:26) at renderComponentSubTree (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:695:9) at renderComponentVNode (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:641:12) at Module.ssrRenderComponent (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:84:10) at ./components/blocks/Gallery.vue:75:40 at renderFnWithContext (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:815:13) at ssrRenderSlotInner (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:111:17) at Module.ssrRenderSlot (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:93:3) definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.

Has this error been seen before?

pnpm issue not fixed

pnpm/pnpm#946

I ran into this right away on my pnpm i It doesn't seem like there is much of an issue just running npm. But I wondered why use a tool that clearly isn't well maintained. Note the "6 years later" comment.

"[Invoices] Generate Number" flow not working

When creating a new invoice this flow fails as shown.

it's trying to find a collection called os_invoice_config but it doesn't exist.

Link error?

Hey, Directus team!!

I think I found a wrong link.
Check the image. This is pointing to deploying a template in Railway.

Congrats, this looks amazing!

updates are not automatic

not sure it is related but
in my directus the build hook URL point to nelify while I followed the first video and it deployed the frontend on Vercel.
if I run a manual deployment in vercel the change are effective
how could I make sure any change made in the directus are automaticaly reflected in nuxt?

Error building the frontend

When running either pnpm i or pnpm build I am getting the following error (below).
this is happening both on a local install and also on netlify.
i am using the token from the admin user.

I'm not sure the npx directus-template-cli@latest apply command ran correctly.
I didn't get all the Loaded - Roles etc... only 2 of those came up, but i had about 10 or so Applying Template - AgencyOS... messages. Looks like all the tables have been created.

8:24:02 PM: Failed during stage "Install dependencies": dependency_installation script returned non-zero exit code: 1
8:24:01 PM: [start] Loading Directus Module
8:24:02 PM: [error] { errors:
8:24:02 PM: [ { message: "You don"t have permission to access this.", extensions: [Object] } ],
8:24:02 PM: response:
8:24:02 PM: _Response [Response] {
8:24:02 PM: [Symbol(realm)]: null,
8:24:02 PM: [Symbol(state)]:
8:24:02 PM: { aborted: false,
8:24:02 PM: rangeRequested: false,
8:24:02 PM: timingAllowPassed: true,
8:24:02 PM: requestIncludesCredentials: true,
8:24:02 PM: type: "default",
8:24:02 PM: status: 403,
8:24:02 PM: timingInfo: [Object],
8:24:02 PM: cacheState: "",
8:24:02 PM: statusText: "Forbidden",
8:24:02 PM: headersList: [_HeadersList],
8:24:02 PM: urlList: [Array],
8:24:02 PM: body: [Object] },
8:24:02 PM: [Symbol(headers)]:
8:24:02 PM: _HeadersList {
8:24:02 PM: cookies: [Array],
8:24:02 PM: [Symbol(headers map)]: [Map],
8:24:02 PM: [Symbol(headers map sorted)]: null } } }
8:24:02 PM: [error] undefined

Existing data?

Will this delete or overwrite existing data or collections in an existing install?

Extend globals

Hello together!

I want to extend globals in AgencyOS.

On Directus-site

For that, I added a field in Directus, which extends globals. This is the response for "/items/globals":

...
    "theme": {
      "primary": "violet",
      "gray": "slate",
      "borderRadius": "xl",
      "fonts": {
        "families": {
          "display": "Poppins",
          "body": "Inter",
          "code": "Fira Code"
        }
      }
    },
    **"opening_hours": [
      {
        "day": "Montag",
        "hours_from": "08:00",
        "hours_to": "17:00"
      },
    ]
...

On AgencyOS/Nuxt-Side extended the following files

globals.ts

opening_hours: { [key: string]: any } | null;

organization.ts

export interface Organization {
...
	opening_hours?: (string | OpeningHours)[];
...
}
export interface OpeningHours {
	id?: string;
	day?: string | null;
	hours_from?: string | null;
	hours_to?: string | null;
}

What am I do I forget?

NAV Bar not working fine

Hi guys, I dont know how to solve this problem.
If I try to click on any item on the nav bar not load the content, the URL address change ok, but the content is not filled.
But if I try enter on the URL or referesh, the content load ok.

I upload a video to show it.
AgencyOS_error_load.webm

"Unexpected Error" for Content > Project

Using a default blank installation, I'm getting the following error when visiting a content single page

Frontend not load

Hi guys, I'm trying to test AgencyOS, the backend was success with sqlite. Now I'm in the frontend and this is what I get:

`jose@jose-System:~/Documentos/opt/agencyosweb/web$ pnpm i
Lockfile is up to date, resolution step is skipped
Already up to date

@ postinstall /home/jose/Documentos/opt/agencyosweb/web
nuxt prepare

◐ Loading Directus Module 11:47:16 p. m.
✔ 1766 Redirects loaded 11:47:16 p. m.
ℹ • undefined From: undefined To: undefined 11:47:16 p. m.
ℹ • undefined From: undefined To: undefined 11:47:16 p. m.
ℹ • undefined From: undefined To: undefined 11:47:16 p. m.
ℹ • undefined From: undefined To: undefined 11:47:16 p. m.
ℹ • undefined From: undefined To: undefined 11:47:16 p. m.
ℹ • undefined From: undefined To: undefined 11:47:16 p. m.
ℹ • undefined From: undefined To: undefined (repeated 1760 times) 11:47:16 p. m.
✔ Globals loaded into appConfig 11:47:16 p. m.
✔ Directus Module Loaded 11:47:16 p. m.
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 11:47:26 p. m.

WARN Slow module @nuxtjs/tailwindcss took 9266.38ms to setup. 11:47:26 p. m.

WARN Slow module @nuxt/ui took 9542.39ms to setup. 11:47:26 p. m.

✔ Types generated in .nuxt 11:47:27 p. m.
Done in 14s
jose@jose-System:~/Documentos/opt/agencyosweb/web$ pnpm dev

@ dev /home/jose/Documentos/opt/agencyosweb/web
nuxt dev

Nuxt 3.10.3 with Nitro 2.9.1 11:48:46 p. m.
11:48:47 p. m.
➜ Local: http://localhost:3000/
➜ Network: use --host to expose

◐ Loading Directus Module 11:48:48 p. m.
✔ 1766 Redirects loaded 11:48:48 p. m.
ℹ • undefined From: undefined To: undefined 11:48:48 p. m.
ℹ • undefined From: undefined To: undefined 11:48:48 p. m.
ℹ • undefined From: undefined To: undefined 11:48:48 p. m.
ℹ • undefined From: undefined To: undefined 11:48:48 p. m.
ℹ • undefined From: undefined To: undefined 11:48:48 p. m.
ℹ • undefined From: undefined To: undefined 11:48:48 p. m.
ℹ • undefined From: undefined To: undefined (repeated 1760 times) 11:48:48 p. m.
✔ Globals loaded into appConfig 11:48:48 p. m.
✔ Directus Module Loaded 11:48:48 p. m.
➜ DevTools: press Shift + Alt + D in the browser (v1.0.8) 11:48:48 p. m.

ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 11:48:58 p. m.

WARN Slow module @nuxtjs/tailwindcss took 9090ms to setup. 11:48:58 p. m.

WARN Slow module @nuxt/ui took 9349.89ms to setup. 11:48:58 p. m.

ℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 11:48:59 p. m.
ℹ Vite client warmed up in 19630ms 11:49:20 p. m.
ℹ Vite server warmed up in 19052ms 11:49:20 p. m.

[11:49:20 p. m.] ERROR This module cannot be imported in server runtime. [importing @nuxt/kit from node_modules/.pnpm/nuxt-simple-sitemap@3.4.0_@nuxt+devtools@1.0.8_@vue+compiler-core@[email protected]_nux_undt3zhfvsokhebtqgy6i27fba/node_modules/nuxt-simple-sitemap/dist/runtime/util/pageUtils.mjs]

✔ Nuxt Nitro server built in 1625 ms nitro 11:49:21 p. m.
[Vue warn]: injection "Symbol(route location)" not found.
definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.
[Vue warn]: injection "Symbol(route location)" not found.
definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.
[Vue warn]: injection "Symbol(route location)" not found.
definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.

`

And this is my .env file content:

`#Directus Setup for Nuxt app
#Directus Cloud urls typically look like this https://your-instance.directus.app or if you're running a local instance of Directus, it will look lik>

DIRECTUS_URL="http://localhost:8055/admin"
DIRECTUS_SERVER_TOKEN="tKXUlNTRRZ1RBCiC7SZGFRF-LP1mpZ-nM"
SITE_URL="http://localhost:3000"

#Stripe Setup (If you want to allow payments within the portal)
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxx
STRIPE_PUBLISHABLE_KEY=pk_xxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxx

`
In the browser start the logo nux but after a few moment show this message in white backgroud:

I try with many urls and all urls I test show similar message

Error updating block_gallery_files

When applying the Agency OS template, I am receiving the following error:

Error updating block_gallery_files [
  {
    message: 'Invalid foreign key for field "directus_files_id" in collection "block_gallery_files".',
    extensions: {
      code: 'INVALID_FOREIGN_KEY',
      collection: 'block_gallery_files',
      field: 'directus_files_id'
    }
  }
]

The CLI then finishes, but when I try to then load the Nuxt site's homepage, I get the following

 {
  "url": "/",
  "statusCode": 500,
  "statusMessage": "",
  "message": "Cannot read properties of null (reading 'id')",
  "stack": "<pre><span class=\"stack\">at ./components/base/VGallery.vue:101:17</span>\n<span class=\"stack internal\">at Module.ssrRenderList (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:433:7)</span>\n<span class=\"stack\">at _sfc_ssrRender (./components/base/VGallery.vue:96:26)</span>\n<span class=\"stack internal\">at renderComponentSubTree (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:683:9)</span>\n<span class=\"stack internal\">at renderComponentVNode (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:631:12)</span>\n<span class=\"stack internal\">at Module.ssrRenderComponent (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:86:10)</span>\n<span class=\"stack\">at ./components/blocks/Gallery.vue:75:40</span>\n<span class=\"stack internal\">at renderFnWithContext (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:762:13)</span>\n<span class=\"stack internal\">at ssrRenderSlotInner (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:113:17)</span>\n<span class=\"stack internal\">at Module.ssrRenderSlot (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:95:3)</span></pre>"
}

Custom page-builder block not showing prop items?

Hi guys,

I have build a custom block for the page-builder called "block_downloads".
This block has 3 fields: "id", "title" and "files".
I have added this block to the pagebuilder call on the "[...permalink].vue" file.

So far so good.
Only issue is that I don't see my field when trying to recieve them with defineProps.
I have already created a BlockDownloads type for this block, and already added my collection to the page_blocks collection field.

The existing blocks all have the data available in the "data" prop.
I just can't figure out why this is not working for my custom block.

Thanks in advance!

dockerfile support

Hi guys,

Sorry for bothering.

This repo is 🚀

I would also love to host it on docker. I tried creating a docker file, but I can't make the build part work.

I always get this error
Error: Cannot find module '/app/node_modules/nuxt/bin/nuxt.mjs'

ARG NODE_VERSION=18.14.2
FROM node:${NODE_VERSION}-slim as base

WORKDIR /app

# Install pnpm globally
RUN npm install -g [email protected]

# Copy package files
COPY package.json pnpm-lock.yaml ./

# Install dependencies
RUN pnpm install

# Debug: List node_modules to check if nuxt is installed
RUN ls -la node_modules/nuxt
RUN ls -la node_modules/.bin

# Copy all source files
COPY . .

# Build the project
RUN pnpm build

# Prune development dependencies
RUN pnpm prune --prod

# Define the final stage for the production image
FROM node:${NODE_VERSION}-slim as production

WORKDIR /app

# Set environment variables
ARG PORT=3000
ENV PORT=$PORT

# Copy built files and production dependencies from the build stage
COPY --from=base /app/.output /app/.output
COPY --from=base /app/node_modules /app/node_modules

# Expose the port
EXPOSE $PORT

# Command to run the application
CMD ["node", ".output/server/index.mjs"]

Any idea?

Error: Invalid URL string on Cloudflare pages

The issue

I intend to deploy the Nuxt frontend as SSR on Cloudflare pages but keep getting this error

Failed to publish your Function. Got error: Uncaught TypeError: Invalid URL string.

Build Settings

Build command: pnpm build
Build output directory: /dist
Build system version: 2 (latest)
Root directory: /

Environment variables:

DIRECTUS_URL=<directus_url>
DIRECTUS_SERVER_TOKEN=*****
SITE_URL=customdomain.com
NUXT_PUBLIC_SITE_URL=customdomain.com #Added this variable based on the nuxt.config.js

Part of the log

✨ Compiled Worker successfully
[redacted logs]
Success: Assets published!
Error: Failed to publish your Function. Got error: Uncaught TypeError: Invalid URL string. 
at functionsWorker-0.8365433674024725.js:7285:30 in w$6   at functionsWorker-0.8365433674024725.js:7447:10

I also tried these build settings:

Build command: pnpm build
Build output directory:/.output/public

but the output folder could not be found.

Build command: pnpm build && pnpm start

and encountered this error

 > nuxt start
[error] Cannot find `nitro.json`. Did you run `nuxi build` first? Search path:
'/opt/buildhome/repo/server/.output/nitro.json',
'/opt/buildhome/repo/.output/nitro.json' ]
ELIFECYCLE  Command failed with exit code 1.
Failed: Error while executing user command. Exited with error code: 1
Failed: build command exited with code: 1
Failed: error occurred while running build command

Form success message with html elements rendered as plain text

Overview

After submitting the form for newsletter, the message shown is wrapped by literal <p> tags:

Investigation

It seems like it is technically correct that success_message is wrapped with <p> tags as seen in the template:

https://github.com/directus-community/directus-template-cli/blob/66f15fe2e710663d3d51a8a9d5e71f33ad1682a8/templates/agencyos/src/content/forms.json#L89

Particularly since success_message is a WYSIWYG input.

However due to how the relevant code in Agency OS renders the success message:

https://github.com/directus-community/agency-os/blob/3a1ef98ac5eabff2d6379acc050f6c5a1ce3121e/components/base/UForm.vue#L63-L65

the <p> tag will be rendered as plain text.

Maybe doing something like this would work via v-html:

			<VAlert v-if="form.on_success === 'message' && success" type="success">
				<div v-html="form.success_message ?? 'Success! Your form has been submitted.'"></div>
			</VAlert>

but this in turn means we may require something such as https://github.com/licitdev/directus-extension-sanitize-html to make sure success_message is sanitized properly for security purposes.

i18n support

I guess it's not difficult to support I18N in agency OS via Directus.. to show the menus, form labels in another user selected language.

Looking forward for this feature. If there is a framework established, I will be happy to do some translation.

CORS issue

My local setup throws CORS errors (see attachment). According to https://nitro.unjs.io/config#routes I tried to added

export default defineNuxtConfig ({ 
  routeRules: {
    '/**': { cors: true, headers: { 'access-control-allow-methods': 'GET' } },
  }
})

but to no avail.

I also worked through solutions posted in these articles:
https://mookypoo.medium.com/nuxt-js-how-to-handle-cors-error-a4c5022611d0
nuxt/nuxt#14598
without success.

Any idea how to solve this problem?

"You don't have permission to access this"

Hi,
I'm testing out the agency-os and am using a generated token on our directus cloud to try and build the site. However I get this error:

 ERROR  Cannot start nuxt:  { errors:                                                                                                                                                                                                                                   11:54:43 AM
   [ { message: "You don't have permission to access this.", extensions: [Object] } ],
  response:
   Response {
     [Symbol(realm)]: null,
     [Symbol(state)]:
      { aborted: false,
        rangeRequested: false,
        timingAllowPassed: true,
        requestIncludesCredentials: true,
        type: 'default',
        status: 403,
        timingInfo: [Object],
        cacheState: '',
        statusText: 'Forbidden',
        headersList: [HeadersList],
        urlList: [Array],
        body: [Object] },
     [Symbol(headers)]:
      HeadersList { cookies: null, [Symbol(headers map)]: [Map], [Symbol(headers map sorted)]: null } } }

I have tried the token directly on the directus rest api and it works fine. Like so:
https://MY_DIRECTUS_APP.directus.app/items/pages?fields[]=*.*.*.*.*&access_token=-MY_ACCESS_TOKEN

The token is created on an admin user. Is there some other step that needs to be taken to get this to work?

Error routines:ssl3_get_record:wrong version number

On localhost, this app causes an error that seems to be related to missing SSL certificates. Here is what happens in my terminal on my MacBook's localhost beginning with yarn install:

directus-agency-tmpl-fe git:(main) ✗ yarn install
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
success Already up-to-date.

[6:11:47 AM] Nuxi 3.5.3
[6:11:47 AM] Nuxt 3.5.3 with Nitro 2.5.2

[6:13:46 AM] Nuxi 3.5.3
[6:13:46 AM] Nuxt 3.5.3 with Nitro 2.5.2
[6:13:46 AM] 
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.122.43:3000/
  > Network:  http://[2001:4bc9:1f98:5e35:ce5:720e:a6e9:bb58]:3000/
  > Network:  http://[2001:4bc9:1f98:5e35:f8e6:60c4:ff7d:26c9]:3000/

[6:13:46 AM] ◐ Loading Directus Module

Cannot start nuxt:  write EPROTO 009E0AF901000000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:355:

  at Transport.request (node_modules/@directus/sdk/dist/sdk.cjs.js:720:23)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Transport.get (node_modules/@directus/sdk/dist/sdk.cjs.js:734:16)
  at async ItemsHandler.readByQuery (node_modules/@directus/sdk/dist/sdk.cjs.js:64:32)
  at async setup (modules/directus-build.ts:29:33)
  at async normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2140:18)
  at async installModule (node_modules/nuxt/node_modules/@nuxt/kit/dist/index.mjs:2407:95)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:2928:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:204:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:248:5)

 ERROR  [unhandledRejection] Cannot read properties of undefined (reading 'close')                                            6:15:17 AM

  at hardRestart (node_modules/nuxi/dist/chunks/dev.mjs:159:27)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Some posts related to this error:
https://stackoverflow.com/questions/54757867/how-to-fix-ssl-wrong-version-number-error-in-nuxtjs
axios/axios#4840
https://stackoverflow.com/questions/60935596/error-ssl3-get-recordwrong-version-number-in-node-js-when-making-https-post-r

(Not sure, if they help. I personally do not know how to apply this fix in this template, since the issue seems to stem from the Directus SDK.)

Images cannot be loaded, files path not found

Upload/Download a file not working:

{"errors":[{"message":"Route //assets/df0745c2-b6e3-4b37-b64d-55a4eb0033ab doesn't exist.","extensions":{"code":"ROUTE_NOT_FOUND","path":"//assets/df0745c2-b6e3-4b37-b64d-55a4eb0033ab"}}]}

I use postgres in railway and aws s3 buckets, permissions are okay, is enabled directus_files for the client and in directus files work find so aws works. I do not understand why the client look in the assets folder in which files are not stored, it should look into AWS bucket right? I can see the files there. How do I change it?

"Cannot find name 'defineNuxtConfig' [...]"

As shown in the attached screenshot, an error concerning defineNuxtConfig happens. After importing it manually

import { defineNuxtConfig } from 'nuxt/config'

an error remains saying Cannot start nuxt: Request failed with status code 400

Vue: Type  DirectusCollections  does not satisfy the constraint  TypeMap . Index signature for type 'string' is missing in type 'DirectusCollections'.

https://github.com/notflip/agency-os/blob/031451669d926c9dea6419d8ad9d9ca6073af670/modules/directus-build.ts#L22

After a fresh install, I'm getting the following error

Vue: Type  DirectusCollections  does not satisfy the constraint  TypeMap . Index signature for type 'string' is missing in type 'DirectusCollections'.

Add New modular Directus SDK

pnpm build - Memory requirements

What should I expect? I found that doing the build failed with the good old heap out of memory error. I had to increase the size of my AWS instance again, because this was for real. I ended up peaking on the build with about 6G in use and all was well.

5.15.0-1051-aws #56~20.04.1-Ubuntu SMP Tue Nov 28 15:43:31 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux

node -v v20.10.0

npm -v 10.2.3

pnpm -v 8.13.1

env | grep NODE
NODE_OPTIONS=--max-old-space-size=32768

So this worked, but I am wondering why I need a large instance just to build an Agency website??

Also running pnpm start tells me to run ./server/index.mjs,

but that is actually located here

:/home/directus/team-osb# node .output/server/index.mjs
Listening on http://[::]:3000

passwordRequest not working in useDirectusAuth.ts?

Hi,

For a client project I use the AgencyOS template and so far I am really happy with it!
I have created a signup and login flow for users, and this is working great.

The only issue I am facing now, is that the passwordRequest doesn't seem to work.
I use the following script for this:

<script setup>
const { passwordRequest } = useDirectusAuth();
const loading = ref(false);
const error = ref(null);
const success = ref(false);

// Default client credentials
const credentials = reactive({
	email: localStorage.getItem('savedUsername') || '',
});

async function newPasswordRequest() {
	const { email } = unref(credentials);
	// const passwordResetUrl = 'http://localhost:3000/auth/reset-password';
	loading.value = true;
	error.value = null;

	try {
		await passwordRequest(email);
		success.value = true;
	} catch (err) {
		error.value = err.message;
	}

	loading.value = false;
}
</script>

This get triggered with a form submission, but then nothing happens.
Does this function exist in the AgencyOS template, and if not whats the easiest way to use this?
Thanks is advance!

Errors in docker logs

If I start directus with docker compose up, following the instructions, I get various error messages in the logs:

2023-10-25 15:50:12 
2023-10-25 15:50:12    ╭───────────────────────────────────────────────────╮
2023-10-25 15:50:12    │                                                   │
2023-10-25 15:50:12    │                 Update available!                 │
2023-10-25 15:50:12    │                                                   │
2023-10-25 15:50:12    │                  10.6.3 → 10.7.0                  │
2023-10-25 15:50:12    │                 2 versions behind                 │
2023-10-25 15:50:12    │                                                   │
2023-10-25 15:50:12    │                 More information:                 │
2023-10-25 15:50:12    │   https://github.com/directus/directus/releases   │
2023-10-25 15:50:12    │                                                   │
2023-10-25 15:50:12    ╰───────────────────────────────────────────────────╯
2023-10-25 15:50:12 
2023-10-25 15:50:14 [13:50:14.458] WARN: Couldn't register bundle "directus-extension-agency-os"
2023-10-25 15:50:14 [13:50:14.459] WARN: Cannot find module '/directus/extensions/directus-extension-agency-os/dist/api.js' imported from /directus/node_modules/.pnpm/file+api/node_modules/@directus/api/dist/extensions.js
2023-10-25 15:50:14     err: {
2023-10-25 15:50:14       "type": "Error",
2023-10-25 15:50:14       "message": "Cannot find module '/directus/extensions/directus-extension-agency-os/dist/api.js' imported from /directus/node_modules/.pnpm/file+api/node_modules/@directus/api/dist/extensions.js",
2023-10-25 15:50:14       "stack":
2023-10-25 15:50:14           Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/directus/extensions/directus-extension-agency-os/dist/api.js' imported from /directus/node_modules/.pnpm/file+api/node_modules/@directus/api/dist/extensions.js
2023-10-25 15:50:14               at new NodeError (node:internal/errors:405:5)
2023-10-25 15:50:14               at finalizeResolution (node:internal/modules/esm/resolve:327:11)
2023-10-25 15:50:14               at moduleResolve (node:internal/modules/esm/resolve:946:10)
2023-10-25 15:50:14               at defaultResolve (node:internal/modules/esm/resolve:1132:11)
2023-10-25 15:50:14               at nextResolve (node:internal/modules/esm/loader:163:28)
2023-10-25 15:50:14               at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
2023-10-25 15:50:14               at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
2023-10-25 15:50:14               at ESMLoader.import (node:internal/modules/esm/loader:524:22)
2023-10-25 15:50:14               at importModuleDynamically (node:internal/modules/esm/translators:110:35)
2023-10-25 15:50:14               at importModuleDynamicallyCallback (node:internal/process/esm_loader:36:14)
2023-10-25 15:50:14       "code": "ERR_MODULE_NOT_FOUND"
2023-10-25 15:50:14     }
2023-10-25 15:50:14 [13:50:14.496] WARN: Couldn't bundle App extensions
2023-10-25 15:50:14 [13:50:14.496] WARN: Could not resolve "./extensions/directus-extension-agency-os/dist/app.js" from "virtual:entry"
2023-10-25 15:50:14     err: {
2023-10-25 15:50:14       "type": "Error",
2023-10-25 15:50:14       "message": "Could not resolve \"./extensions/directus-extension-agency-os/dist/app.js\" from \"\u0000virtual:entry\"",
2023-10-25 15:50:14       "stack":
2023-10-25 15:50:14           RollupError: Could not resolve "./extensions/directus-extension-agency-os/dist/app.js" from "virtual:entry"
2023-10-25 15:50:14               at error (file:///directus/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
2023-10-25 15:50:14               at ModuleLoader.handleInvalidResolvedId (file:///directus/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:23979:24)
2023-10-25 15:50:14               at file:///directus/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:23941:26
2023-10-25 15:50:14       "code": "UNRESOLVED_IMPORT",
2023-10-25 15:50:14       "exporter": "./extensions/directus-extension-agency-os/dist/app.js",
2023-10-25 15:50:14       "id": "\u0000virtual:entry",
2023-10-25 15:50:14       "watchFiles": [
2023-10-25 15:50:14         "\u0000virtual:entry"
2023-10-25 15:50:14       ]
2023-10-25 15:50:14     }
2023-10-25 15:50:14 [13:50:14.498] INFO: Loaded extensions: directus-extension-agency-os
2023-10-25 15:50:14 [13:50:14.502] INFO: Initializing bootstrap...
2023-10-25 15:50:19 [13:50:19.579] INFO: Installing Directus system tables...
2023-10-25 15:50:19 [13:50:19.716] INFO: Running migrations...
2023-10-25 15:50:19 [13:50:19.721] INFO: Applying Remove Collection Foreign Keys...
2023-10-25 15:50:19 [13:50:19.731] INFO: Applying Remove System Relations...
2023-10-25 15:50:19 [13:50:19.736] INFO: Applying Remove System Collections...
2023-10-25 15:50:19 [13:50:19.742] INFO: Applying Remove System Fields...
2023-10-25 15:50:19 [13:50:19.748] INFO: Applying Add Cascade System Relations...
2023-10-25 15:50:19 [13:50:19.783] INFO: Applying Change Webhook URL Type...
2023-10-25 15:50:19 [13:50:19.789] INFO: Applying Add Relations Sort Field...
2023-10-25 15:50:19 [13:50:19.793] INFO: Applying Remove Locked Fields...
2023-10-25 15:50:19 [13:50:19.796] INFO: Applying Webhooks Collections Text...
2023-10-25 15:50:19 [13:50:19.801] INFO: Applying Add Refresh Interval...
2023-10-25 15:50:19 [13:50:19.804] INFO: Applying Make Filesize Nullable...
2023-10-25 15:50:19 [13:50:19.809] INFO: Applying Add Collections Accountability...
2023-10-25 15:50:19 [13:50:19.813] INFO: Applying Remove Files Interface...
2023-10-25 15:50:19 [13:50:19.817] INFO: Applying Rename Interfaces...
2023-10-25 15:50:19 [13:50:19.837] INFO: Applying Restructure Relations...
2023-10-25 15:50:19 [13:50:19.853] INFO: Applying Add Foreign Key Constraints...
2023-10-25 15:50:19 [13:50:19.862] INFO: Applying Add System Fk Triggers...
2023-10-25 15:50:19 [13:50:19.880] INFO: Applying Add Collections Icon Color...
2023-10-25 15:50:19 [13:50:19.883] INFO: Applying Add Insights...
2023-10-25 15:50:19 [13:50:19.900] INFO: Applying Add Deep Clone Config...
2023-10-25 15:50:19 [13:50:19.903] INFO: Applying Change Filesize Bigint...
2023-10-25 15:50:19 [13:50:19.915] INFO: Applying Add Conditions to Fields...
2023-10-25 15:50:19 [13:50:19.918] INFO: Applying Add Default Folder...
2023-10-25 15:50:19 [13:50:19.924] INFO: Applying Replace Groups...
2023-10-25 15:50:19 [13:50:19.927] INFO: Applying Add Required to Fields...
2023-10-25 15:50:19 [13:50:19.931] INFO: Applying Update Groups...
2023-10-25 15:50:19 [13:50:19.935] INFO: Applying Change Image Metadata Structure...
2023-10-25 15:50:19 [13:50:19.938] INFO: Applying Add Geometry Config...
2023-10-25 15:50:19 [13:50:19.942] INFO: Applying Remove Limit Column...
2023-10-25 15:50:19 [13:50:19.946] INFO: Applying Add Auth Provider...
2023-10-25 15:50:19 [13:50:19.962] INFO: Applying Webhooks Collections Not Null...
2023-10-25 15:50:19 [13:50:19.967] INFO: Applying Move Module Setup...
2023-10-25 15:50:19 [13:50:19.973] INFO: Applying Webhooks URL Not Null...
2023-10-25 15:50:19 [13:50:19.982] INFO: Applying Add Collection Organization...
2023-10-25 15:50:19 [13:50:19.991] INFO: Applying Replace Fields Group...
2023-10-25 15:50:20 [13:50:20.003] INFO: Applying Replace M2M Interface...
2023-10-25 15:50:20 [13:50:20.007] INFO: Applying Rename Login Action...
2023-10-25 15:50:20 [13:50:20.014] INFO: Applying Update Presets...
2023-10-25 15:50:20 [13:50:20.023] INFO: Applying Add Auth Data...
2023-10-25 15:50:20 [13:50:20.028] INFO: Applying Add Webhook Headers...
2023-10-25 15:50:20 [13:50:20.033] INFO: Applying Set Unique to User Token...
2023-10-25 15:50:20 [13:50:20.041] INFO: Applying Update Special Geometry...
2023-10-25 15:50:20 [13:50:20.045] INFO: Applying Remove Collections Listing...
2023-10-25 15:50:20 [13:50:20.050] INFO: Applying Add Notifications...
2023-10-25 15:50:20 [13:50:20.070] INFO: Applying Add Shares...
2023-10-25 15:50:20 [13:50:20.093] INFO: Applying Add Project Descriptor...
2023-10-25 15:50:20 [13:50:20.099] INFO: Applying Remove Default Project Color...
2023-10-25 15:50:20 [13:50:20.106] INFO: Applying Add Bookmark Icon and Color...
2023-10-25 15:50:20 [13:50:20.109] INFO: Applying Add Translation Strings...
2023-10-25 15:50:20 [13:50:20.114] INFO: Applying Rename Field Typecast Flags...
2023-10-25 15:50:20 [13:50:20.117] INFO: Applying Add Field Validation...
2023-10-25 15:50:20 [13:50:20.122] INFO: Applying Fix Typecast Flags...
2023-10-25 15:50:20 [13:50:20.126] INFO: Applying Add Default Language...
2023-10-25 15:50:20 [13:50:20.134] INFO: Applying Remove Default Value Panel Icon...
2023-10-25 15:50:20 [13:50:20.141] INFO: Applying Add Flows...
2023-10-25 15:50:20 [13:50:20.167] INFO: Applying Add Color to Insights Icon...
2023-10-25 15:50:20 [13:50:20.170] INFO: Applying Drop Non Null From IP of Activity...
2023-10-25 15:50:20 [13:50:20.173] INFO: Applying Drop Non Null From Sender of Notifications...
2023-10-25 15:50:20 [13:50:20.175] INFO: Applying Rename Hook Trigger to Event...
2023-10-25 15:50:20 [13:50:20.179] INFO: Applying Update Notifications Timestamp Column...
2023-10-25 15:50:20 [13:50:20.184] INFO: Applying Add Custom Aspect Ratios...
2023-10-25 15:50:20 [13:50:20.187] INFO: Applying Add Origin to Accountability...
2023-10-25 15:50:20 [13:50:20.192] INFO: Applying Update Material Icons...
2023-10-25 15:50:20 [13:50:20.198] INFO: Applying Add Preview Settings...
2023-10-25 15:50:20 [13:50:20.203] INFO: Applying Migrate Translation Strings...
2023-10-25 15:50:20 [13:50:20.214] INFO: Applying Require Shares Fields...
2023-10-25 15:50:20 [13:50:20.279] INFO: Setting up first admin role...
2023-10-25 15:50:20 [13:50:20.288] INFO: Adding first admin user...
2023-10-25 15:50:20 [13:50:20.375] INFO: Done
2023-10-25 15:50:20 
2023-10-25 15:50:20    ╭───────────────────────────────────────────────────╮
2023-10-25 15:50:20    │                                                   │
2023-10-25 15:50:20    │                 Update available!                 │
2023-10-25 15:50:20    │                                                   │
2023-10-25 15:50:20    │                  10.6.3 → 10.7.0                  │
2023-10-25 15:50:20    │                 2 versions behind                 │
2023-10-25 15:50:20    │                                                   │
2023-10-25 15:50:20    │                 More information:                 │
2023-10-25 15:50:20    │   https://github.com/directus/directus/releases   │
2023-10-25 15:50:20    │                                                   │
2023-10-25 15:50:20    ╰───────────────────────────────────────────────────╯
2023-10-25 15:50:20 
2023-10-25 15:50:22 [13:50:22.661] WARN: Couldn't register bundle "directus-extension-agency-os"
2023-10-25 15:50:22 [13:50:22.662] WARN: Cannot find module '/directus/extensions/directus-extension-agency-os/dist/api.js' imported from /directus/node_modules/.pnpm/file+api/node_modules/@directus/api/dist/extensions.js
2023-10-25 15:50:22     err: {
2023-10-25 15:50:22       "type": "Error",
2023-10-25 15:50:22       "message": "Cannot find module '/directus/extensions/directus-extension-agency-os/dist/api.js' imported from /directus/node_modules/.pnpm/file+api/node_modules/@directus/api/dist/extensions.js",
2023-10-25 15:50:22       "stack":
2023-10-25 15:50:22           Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/directus/extensions/directus-extension-agency-os/dist/api.js' imported from /directus/node_modules/.pnpm/file+api/node_modules/@directus/api/dist/extensions.js
2023-10-25 15:50:22               at new NodeError (node:internal/errors:405:5)
2023-10-25 15:50:22               at finalizeResolution (node:internal/modules/esm/resolve:327:11)
2023-10-25 15:50:22               at moduleResolve (node:internal/modules/esm/resolve:946:10)
2023-10-25 15:50:22               at defaultResolve (node:internal/modules/esm/resolve:1132:11)
2023-10-25 15:50:22               at nextResolve (node:internal/modules/esm/loader:163:28)
2023-10-25 15:50:22               at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
2023-10-25 15:50:22               at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
2023-10-25 15:50:22               at ESMLoader.import (node:internal/modules/esm/loader:524:22)
2023-10-25 15:50:22               at importModuleDynamically (node:internal/modules/esm/translators:110:35)
2023-10-25 15:50:22               at importModuleDynamicallyCallback (node:internal/process/esm_loader:36:14)
2023-10-25 15:50:22       "code": "ERR_MODULE_NOT_FOUND"
2023-10-25 15:50:22     }
2023-10-25 15:50:22 [13:50:22.695] WARN: Couldn't bundle App extensions
2023-10-25 15:50:22 [13:50:22.695] WARN: Could not resolve "./extensions/directus-extension-agency-os/dist/app.js" from "virtual:entry"
2023-10-25 15:50:22     err: {
2023-10-25 15:50:22       "type": "Error",
2023-10-25 15:50:22       "message": "Could not resolve \"./extensions/directus-extension-agency-os/dist/app.js\" from \"\u0000virtual:entry\"",
2023-10-25 15:50:22       "stack":
2023-10-25 15:50:22           RollupError: Could not resolve "./extensions/directus-extension-agency-os/dist/app.js" from "virtual:entry"
2023-10-25 15:50:22               at error (file:///directus/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
2023-10-25 15:50:22               at ModuleLoader.handleInvalidResolvedId (file:///directus/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:23979:24)
2023-10-25 15:50:22               at file:///directus/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:23941:26
2023-10-25 15:50:22       "code": "UNRESOLVED_IMPORT",
2023-10-25 15:50:22       "exporter": "./extensions/directus-extension-agency-os/dist/app.js",
2023-10-25 15:50:22       "id": "\u0000virtual:entry",
2023-10-25 15:50:22       "watchFiles": [
2023-10-25 15:50:22         "\u0000virtual:entry"
2023-10-25 15:50:22       ]
2023-10-25 15:50:22     }
2023-10-25 15:50:22 [13:50:22.697] INFO: Loaded extensions: directus-extension-agency-os
2023-10-25 15:50:22 [13:50:22.710] WARN: PUBLIC_URL should be a full URL
2023-10-25 15:50:22 [13:50:22.710] WARN: Upload directory (/directus/uploads) is not read/writeable!
2023-10-25 15:50:22 [13:50:22.828] INFO: Watching extensions for changes...
2023-10-25 15:50:22 [13:50:22.866] INFO: GraphQL Subscriptions started at ws://0.0.0.0:8055/graphql
2023-10-25 15:50:22 [13:50:22.866] INFO: WebSocket Server started at ws://0.0.0.0:8055/websocket
2023-10-25 15:50:22 [13:50:22.880] INFO: Server started at http://0.0.0.0:8055

Self hosted directus server with agency os results in 500 error on init

I have gone through all the setups starting with self hosting directus and configuring the agency os template on directus (visible on my directus dash) and used vercel to deploy the agency os template. After Agency Os is deployed i get

{ "url": "/", "statusCode": 500, "statusMessage": "", "message": "Cannot read properties of null (reading 'id')", "stack": "" } error

on my window. I originally thought it was an error with the backend connection but when i checked the directus logs the frontend seems to have connected successfully with the backend. I am not a pro developer so maybe this is a newbie issue, is there anyone who has had the same error with a solution.
The last request from the frontend to the backend is the following:
directus-1 | [20:42:52] GET /items/forms?filter=%7B%22key%22%3A%7B%22_eq%22%3A%22newsletter%22%7D%7D 200 21ms

my vercel deployment is at https://news-agency-two.vercel.app/