Nuxt/n-grok How to Expose your Localhost to the Internet

When you want to show your app to someone but don’t want or can’t deploy it. If only they could see your browser in dev mode to help fix that error showing in the console or see your new design and ok it. — Debbie O'Brien

Introducing nuxt/n-grok. ngrok exposes your localhost to the world for easy testing and sharing! No need to mess with DNS or deploy just to have others test out your changes.

Quick guide

1. Add @nuxtjs/ngrok dependency using yarn or npm to your project

yarn add @nuxtjs/ngrok

2. Add @nuxtjs/ngrok to the buildModules section of your nuxt.config.js

buildModules: [
    '@nuxtjs/ngrok',
]

3. Run your app npm or yarn run dev you should now see a link to your Public URL

When running Nuxt in dev mode you will now see a Public Url in the Nuxt CLI that you can copy and share with anyone. They will then be able to see your localhost and watch your live changes while working in dev mode.

Note that, out the box, there are no security options passed. Your dev server is exposed to the world without protection. To set up password protection, follow the guide below.

Set up password protection

When you don’t have password protection set up, you are going to run into this warning.

To clear the above warning, you can set up a username and password by using the option ngrokauth and passing in a username and password separated by a colon username:password. To keep the user and password values a secret you should add them to your .env file with the key NGROK_AUTH.

.env

NGROK_AUTH='username:password'

nuxt.config.js

ngrok: {
    ngrokauth: process.env.NGROK_AUTH
}

Run your app npm or yarn run dev you should now see the prompt below.

for more options, check out the well-written documentations.