Allow module to use different a baseURL for client and server rendering?

[matt-clegg]

My setup invloves running a Nuxt 3 frontend and Directus backend in Docker using Docker Compose. I can access the frontend from http://localhost:3000 and Directus from http://localhost:8055.

I'm currently using the Directus SDK package with the following plugin.js file.

import { Directus } from '@directus/sdk';

let directus;

if(process.client){
	// TODO: set live server url, https://directus.domain.com
	directus = new Directus('/proxy');
}else{
	directus = new Directus('http://directus:8055');
}

export default defineNuxtPlugin(() => {
	return {
		provide: { directus },
	};
});

I'm setting the Directus URL based on whether it's being called from the client or the server.

The /proxy endpoint points to the nitro proxy which forwards requests to http://localhost:8055, this is used for local development, to avoid CORS issues and is called from when client side rendering. When deployed the client Directus endpoint would be something like https://directus.domain.com.

The http://directus:8055 endpoint is how Nuxt is able to reach Directus inside Docker, and is called when server side rendering.

When hosted on a live server, this allows me to have server side rendering call Directus directly without having to make an API call out to the internet and then back to the same box.

Currently, the nuxt-directus module only accepts a single baseURL, which would be the live Directus domain. Would it be possible to configure the nuxt-directus module with a client and server URL?

[casualmatt]

Hello,

Your use case is interesting but is normally solved using local DNS in a production environment, so I would suggest going that way in this case too.

[matt-clegg]

Ah I see. So in live the Directus baseURL would be something like https://directus.domain.com, but when developing on localhost the baseURL would be http://directus.local:8055 which would be set from my Windows hosts file?

[matt-clegg]

I might have found a solution for local development. I set the environment variable in my Nuxt container DIRECTUS_URL=http://host.docker.internal:8055 and added the following to my frontend development docker-compose.override.yml:

extra_hosts:
  - "host.docker.internal:host-gateway"

In my hosts file, docker desktop had already added this entry 192.168.0.231 host.docker.internal. I also had to set CORS_ENABLED=true in Directus so the client side rendering could access Directus.