Add examples for eight more frameworks

[bobzilladev]

Almost all the files in this PR are auto-generated by the various frameworks, but are necessary to test the actual example code. The following files linked to in the README.md are the new ngrok pieces:

• Fastify - examples/ngrok-fastify.js
• Hapi - examples/ngrok-hapi.js
• Koa - examples/ngrok-koa.js
• Nest.js - examples/nestjs/src/main.ts
• Next.js - examples/next.config.js
• Remix - examples/remix/remix.config.js
• Svelte - examples/svelte/svelte.config.js
• Vue - examples/vue/vite.config.ts

[bobzilladev]

Current dependencies on/for this PR:

• main
  • PR #36 👈

This comment was auto-generated by Graphite.

[nijikokun]

Few pieces of feedback:

• Each example should be self-contained project in it's own folder similar to Prisma and NextJS examples.
  • Since we don't have a library for templates we could point users to use degit for cloning and running an example: npx degit github:user/repo/directory/sub-directory#branch-name <folder-name> then npm i

Framework Specific:

• Express

  • What local port is this running on?
  • Probably not within scope but questions I have as someone who develops with express:
  • How do I run multiple express servers with this?
  • How does this work with something like nodemon?

• Fastify

  • I would expect to start the server listener then point ngrok to that rather than the reverse. This is how I handle express listeners today using the ngrok library
  • I would also expect to use async/await and methods not builder pattern

Example of listening then attaching ngrok with async/await:

// Listen to server
server.listen(port, async function () {
  // Start ngrok process
  if (process.env.NGROK_TOKEN) {
    await ngrok.authtoken(process.env.NGROK_TOKEN);
    url = await ngrok.connect(port);
  }
  console.log(`Server is listening on ${port}!`)
  console.log(`Server available at ${url}`)
})

• Hapi

  • Similar feedback to fastly, start server then connect ngrok

• Koa

  • Odd to have the require next to the listen statement, would move to the top of the file

• Nest

  • Similar to Hapi / Fastly, do server listen then connect ngrok

• Nextjs

  • Make tunnel is weird, should probably be based on ENV variable -- see express example above
  • Port and host could be parseInt(process.env.PORT, 10) || 3000 as per this example since they get established as env variables.

• Remix / Nextjs / Svelte

  • Would suggest putting ngrok logic into it's own file and requiring it inside the config file to keep things clean.

[bobzilladev]

@nijikokun Thanks for all the feedback! I've pushed a commit that hopefully addresses everything.

Each example should be self-contained project in it's own folder similar to Prisma and NextJS examples.

Migrated to this layout.

Point users to use degit for cloning and running an example: npx degit github:user/repo/directory/sub-directory#branch-name then npm i

Added info to Examples section of README.md.

Express: What local port is this running on?

Added logging of socket address.

Express: How do I run multiple express servers with this?

Can call listen(app) with multiple app's and each will forward on a separate generated pipe/tcp socket.

Express: How does this work with something like nodemon?

Looks like nodemon restarts the entire node process, so would want to use tunnel with domain to have a deterministic domain to iterate on.

Start the server listener then point ngrok.

Have reordered the setup calls in Fastify, Hapi, and Nest.

Fastify: I would also expect to use async/await.

Moved ngrok setup into async block to use await rather than promise methods.

Koa: require...would move to the top of the file

Moved.

Next: Make tunnel is weird, should probably be based on ENV variable.

Unfortunately Next first runs a child process to build, then the parent does its setup, so an environment variable can't maintain a single tunnel. I've added a comment around this non-intuitive behavior.

Next: Port and host...as env variables.

Caught PORT in Remix but missed in Next, have added. There doesn't appear to be Next support for host via env.

Would suggest putting ngrok logic into it's own file and requiring it inside the config file to keep things clean.

Moved logic to ngrok.config files in Next.js, Remix, Svelt, and Vue examples and updated README.

[nijikokun]

The changes look great! Nice work!

Just looks like there are some leftover files in the examples directory (node modules and package.json)?

[bobzilladev]

I've removed the node_modules symlink. Kept the package.json for the basic single-file examples which need ngrok, ts-node, and winston.