Unable to obtain the correct dev proxy port in Nuxt 3.7.x vite:serverCreated hook.

[jeddygong]

When creating the Nuxt module.

I cannot obtain the correct dev proxy port using nuxt.options.devServer.port in Nuxt 3.7.x vite:serverCreated hook.

Because the dev porxy port returns a random port.

Usage of Nuxt 3.7.x

Nuxt 3.7.x on StackBlitz

  modules: [
    function (inlineOptions, nuxt) {
      // Always 3000 port
      console.log(`modules port: ${nuxt.options.devServer.port}`); // 3000

      nuxt.hook('vite:serverCreated', (viteServer, env) => {
        console.log(`Hook vite:serverCreated: ${nuxt.options.devServer.port}`); // Random port number

        // do something
      });
    }
  ]

This hope to use nuxt.options.devServer.port to obtain the correct dev proxy port in Nuxt 3.7.x vite: serverCreated hook.

Usage of Nuxt 3.6.5

Nuxt 3.6.5 on StackBlitz

  modules: [
    function (inlineOptions: any, nuxt: any) {
      // Always 3000 port
      console.log(`modules port: ${nuxt.options.devServer.port}`); // 3000

      nuxt.hook('vite:serverCreated', (viteServer: any, env: any) => {
        console.log(`Hook vite:serverCreated: ${nuxt.options.devServer.port}`); // 3000

        // do something
      });
    },
  ]

[jeddygong]

@pi0 Please.

[pi0]

Hi, dear @jeddygong thanks for making a new issue. (ctx: https://github.com/nuxt/cli/issues/205,)

The random port is actually the real new port that the nuxt dev server listens to and vite dev server also shares so this is correct.

As explained in #205, if you need to access the public port (3000) for some reason, you can use listen hook and access listener.url or await listener.getUrls().

import { defineNuxtModule } from 'nuxt/kit';

export default defineNuxtModule({
  setup(_, nuxt) {
    let url = '';
    nuxt.hook('listen', (devServer, listener) => {
      url = listener.url;
    });
    nuxt.hook('vite:serverCreated', (viteServer, env) => {
      // prints Hook vite:serverCreated { url: 'http://localhost:3000/', port: '3000' }                                     13:53:19
      console.log(`Hook vite:serverCreated`, {
        url,
        port: new URL(url).port,
      });

      // do something
    });
  },
});

However caching results between hooks like above, is nothing i would recommend and might cause other issues. If you can explain to me what do something part is going to do that requires strictly the public dev server url, i would have better idea.

In any case hope above answered your question.

[jeddygong]

Hi, @pi0 Nice afternoon.

I also think using a listen hook is not a very good approach.

So, this is what I'm doing now:

import { defineNuxtModule } from 'nuxt/kit';

export default defineNuxtModule({
  setup(_, nuxt) {
    nuxt.hook('vite:serverCreated', (viteServer, env) => {
      const ENV_URL = process.env.__NUXT_DEV_PROXY__ || process.env.__NUXT_DEV_LISTENER__;
      const devUrl = JSON.parse(ENV_URL || '{}')?.url;
      const port = devUrl.match(/:(\d+)\//)[1];
      console.log('port:', port); // 3000

      // do something
    });
  },
});

See more nuxt.ts.

But using process.env__NUXT_DEV_LISTENER__ And process.env__NUXT_DEV_LISTENER__ Obtaining the proxy port may cause other issues.

So I wonder if there is a better method or API.

I am creating a nuxt module that can set up local hosts. My open source library is https://github.com/jeddygong/hosts.

[pi0]

Thanks for explaining your use-case. I think for Nuxt, you might not need a vite hook plugin anymore and can directly open host/tunnel from the listen hook.