Version

module: 2.0.0
nuxt: 2.15.7

Nuxt Mode SPA

I've just installed @nuxtjs/ngrok without any configuration and it doesn't work after two or three times running it

The docs make it sound as if an auth token is optional, but I am getting this message when opening the ngrok url from the terminal after running $ npm run dev

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

I've taken the liberty of using this module as a basis and creating a Nuxt 3 compatible module:

import ngrok from "ngrok";
import type { Ngrok } from "ngrok";
import chalk from "chalk";
import { defineNuxtModule } from "@nuxt/kit";
import type { Server as HttpServer } from "http";
import type { Server as HttpsServer } from "https";
import consola from "consola";

// https://github.com/bubenshchykov/ngrok
export type ModuleOptions = Partial<Ngrok.Options>;
declare module "@nuxt/schema" {
  interface NuxtConfig {
    [CONFIG_KEY]?: ModuleOptions;
  }
}
const CONFIG_KEY = "ngrok";

export default defineNuxtModule({
  meta: {
    // Usually  npm package name of your module
    name: "ngrok",
    // The key in `nuxt.config` that holds your module options
    configKey: CONFIG_KEY,
    // Compatibility constraints
    compatibility: {
      nuxt: "^3.0.0",
    },
  },
  // Default configuration options for your module
  defaults: {
    authtoken: process.env.NGROK_TOKEN,
    auth: process.env.NGROK_AUTH,
  },
  hooks: {},
  async setup(moduleOptions, nuxt) {
    // Don't start NGROK in production mode
    if (nuxt.options.dev === false) {
      return;
    }
    if (!moduleOptions.auth) {
      // eslint-disable-next-line no-console
      consola.warn(
        "[ngrok] Dev server exposed to internet without password protection! Consider using `ngrok.auth` options"
      );
    }
    // Start NGROK when Nuxt server is listening
    let url: string;

    nuxt.hook(
      "listen",
      async (_server: HttpServer | HttpsServer, listener: any) => {
        if (moduleOptions.authtoken) {
          await ngrok.authtoken(moduleOptions.authtoken);
        }
        const { port } = new URL(listener.url);
        url = await ngrok.connect({
          ...moduleOptions,
          addr: port,
        } as Ngrok.Options);

        nuxt.options.publicRuntimeConfig.ngrok = { url };
        consola.success(chalk.underline.green(`ngrok connected: ${url}`));
      }
    );

    // Disconnect ngrok connection when closing nuxt
    nuxt.hook("close", () => {
      if (url) {
        ngrok.disconnect();
        consola.success(chalk.underline.yellow("ngrok disconnected"));
        url = null;
      }
    });
  },
});

There is a bug in Nuxt 3 where if we modify the nuxt config file, the listen hook is not called again after the close hook.

Additionally, right now I seem to have to use this config:

  vite: {
    server: {
      hmr: {
        protocol: "ws",
        host: "127.0.0.1",
      },
    }
  }

This prevents an infinite reload when accessing via the ngrok domain..

This is a WIP and no sure how to resolve the vite hmr issue in a more robust way right now. Happy for someone else to take over or if there's a solution I'm happy to implement and create a PR.

Good afternoon, on my new computer (m1 / ventura) the module refuses to work. I don’t know how this is possible, but on the old one everything is fine (intel / high siera). The problem is that when calling ngrok asynchronous functions nuxt stops and nothing further happens

nuxt.hook("listen", async (_server, {port}) => {
  if (options.authtoken) {
    await ngrok2.authtoken(options.authtoken); // here
  }
  url = await ngrok2.connect({...options, addr: port}); // and here
  nuxt.options.publicRuntimeConfig.ngrok = {url};
  nuxt.options.cli.badgeMessages.push(`Public URL: ${chalk2.underline.yellow(url)}`);
});

If you remove these calls, then the nuxt will start, but in this case the module will not work either.

I am attaching a screenshot of the terminal, nothing happens after launch

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update all non-major dependencies (chalk, ngrok)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update actions/cache action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update codecov/codecov-action action to v4
• chore(deps): update dependency chalk to v5
• chore(deps): update dependency defu to v6
• chore(deps): update dependency ngrok to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

First of all nice work on module 💯

• - I think worth mentioning about NGROK_TOKEN in docs
• - Why we need adding to runtimeConfig.url? Anyway if necessary, we should keep it namespaced ($config.ngrok.url)
• - chalk dependency is missing in package.json
• - package.json lacks description (and probably ngrok tag)
• - We may need to set version +1 major than current published package (2.0.0)
• - It would be nice putting a link to packages we use in wrapper modules (https://github.com/bubenshchykov/ngrok) with a comment in top