Open silverbackdan opened 2 years ago
I have a working module for Nuxt 3 if interested:
import ngrok from "ngrok";
import type { Ngrok } from "ngrok";
import chalk from "chalk";
import { defineNuxtModule, addTemplate } from "@nuxt/kit";
import consola from "consola";
import { IncomingMessage } from "connect";
import { ServerResponse } from "http";
// https://github.com/bubenshchykov/ngrok
export type ModuleOptions = Partial<Ngrok.Options>;
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: {},
setup: async (moduleOptions: ModuleOptions, nuxt) => {
const CREATE_NGROK_TEMPLATE = (url) => {
addTemplate({
filename: 'ngrok.mjs',
write: true,
getContents: () => `export const url = ${JSON.stringify(url)}`,
});
}
// Don't start NGROK in production mode
if (nuxt.options.dev === false) {
CREATE_NGROK_TEMPLATE(null)
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"
);
}
let url: string;
nuxt.hook("listen", async (_server: any, { port }: { port: number }) => {
if (moduleOptions.authToken) {
await ngrok.authtoken(moduleOptions.authToken);
}
url = await ngrok.connect({
...moduleOptions,
addr: port,
} as Ngrok.Options);
CREATE_NGROK_TEMPLATE(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;
}
});
},
});
Instead of populating the public runtime config it creates a build file in .nuxt/ngrok.mjs
You can import this elsewhere
import { url as ngrokUrl } from '#build/ngrok.mjs'
That's all :)
I now have an issue, I was able to solve the web socket infinite reloading because connection failed before using this in nuxt config
server: {
hmr: {
protocol: "ws",
host: "127.0.0.1",
},
}
But this workaround no longer works over http or https.. is anyone able to offer any clues on how to make this work?
I've taken the liberty of using this module as a basis and creating a Nuxt 3 compatible module:
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:
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.