use consistent hostname for live tunnel URL

[fool]

- Do you want to request a feature or report a bug?

feature.

- What is the current behavior?

Currently, a random suffix is appended to your netlify live hostname at each start of the tunnel, meaning the URL you'd share changes every time you use it even against an identical codebase.

Proposed solution is to either:

• create a flag to not do this
• or just not do it automagically.

@calavera mentioned some related things:

• related code is here: https://github.com/netlify/bitballoon/blob/master/app/models/site.rb#L1745 (sorry non-Netlify folks, you won't be able to see that)
• we'll need to handle session cleanup differently if we change the naming conventions.
• slack convo on the topic: https://netlify.slack.com/archives/CBC2U9MMG/p1565384911057700

[fool]

requested by this community thread: https://community.netlify.com/t/is-a-fixed-domain-for-dev-l-environment-possible/2642

[kmcaloon]

This would be incredibly useful, especially when troubleshooting functions/webhooks locally.

[gamebox]

This would also be awesome for testing OAuth flows, as you are usually required to configure the allowed domains ahead of time with the provider, and some (ahem Google) you can't provide localhost

[terrarum]

I am building something that integrates with two different services using webhooks, and every time I start netlify dev --live I have to update the URLs in two places. One of them can be set via a curl request so I'm pulling the live URL out of stdout and setting it but the other can't be done that way so I have to copy paste it every time. I'm also using Auth0 and have to set the URL there every time as well.

Having a static URL would be amazing.

[mikeslattery]

As a workaround, I made the following change to generate an env file.

+++ src/commands/dev/index.js
@@ -2,2 +2,3 @@
 const path = require('path')
 const process = require('process')
+const fs = require('fs')
@@ -273,4 +274,5 @@
     process.env.URL = url
     process.env.DEPLOY_URL = url
+    fs.writeFileSync('.netlify/.env.live', "URL=" + url + "\nDEPLOY_URL=" + url)

     printBanner({ url, log })

The generated file, .netlify/.env.live, looks like:

URL=https://vandalay-309a73.netlify.live
DEPLOY_URL=https://vandalay-309a73.netlify.live

I'll submit a PR, if people want it.

[redmagic]

For what it's worth, you can create a development page in your site and have that call a function with the current domain in it. That function could do the webhooks updating part by calling the appropriate api's.

Dev page:

---
title: Development tools
layout: layouts/html.njk
permalink: "dev/"
---
<form action="/.netlify/functions/update-webhooks" method="post">
    <input name="domain" size="100" id="update-webhooks" type="text" />
    <button>Update webhooks</button>
</form>
<script>
    document.querySelector('#update-webhooks').value = `${window.location.protocol}//${window.location.host}`
</script>

update-webhooks.ts:

import type { Handler, HandlerContext, HandlerEvent, HandlerResponse } from '@netlify/functions';

export const handler: Handler = async (event: HandlerEvent, context: HandlerContext): Promise<HandlerResponse> => {
    const domain = unescape(event.body).split('=')[1];
    
    //Update your webhooks here
    
    return {
        statusCode: 200
    };
};

[mikeslattery]

I refined my workaround (see above) so I don't need to patch the plugin. I put this in my project. I run this instead of netlify dev.

#!/usr/bin/env node

// netlify dev

const fs = require('fs')
const cli = require('netlify-cli')

process.argv.splice(2, 0, ...['dev', '--live'])
cli.run().then(() => {
  // export the live URL
  fs.writeFileSync(
    '.netlify/.env.live',
    'URL=' + process.env.URL + '\nDEPLOY_URL=' + process.env.DEPLOY_URL
  )
})

The .netlify/.env.live file won't be updated until after compiling is complete. You can modify the then() above if you want to do any post-processing with javascript APIs (e.g. auth0, stripe, etc)

Or here's an example bash script you could refer to that does some post-processing for setting up a stripe webhook:

#!/bin/bash
set -eu   # strict mode

# Launch netlify dev in background, and wait for file update.  (My script above.)
rm .netlify/.env.live
./netlifydev.js &
while ! [[ -f .netlify/.env.live ]]; do sleep 1; done

# Load results
source .netlify/.env.live

# Put any other commands here to publish your URL to wherever
# This is an example setting stripe webhook.  First, delete existing webhook
stripe webhook_endpoints list | jq '.data[].id' -r | xargs -L1 stripe stripe webhook_endpoints delete
# add new hook
stripe webhook_endpoints create --url="$DEPLOY_URL"

# block on netlify dev
wait -n

[isaac-martin]

any update here? currently still needing to use ngrok alongside netlify dev

[eduardoboucas]

This is now available with CLI v15.4.0.

When you use Netlify Dev with the --live flag, a random URL will be generated and used for all live sessions started in that machine.

Additionally, if you choose to specify your own subdomain with --live=<subdomain>, we'll generate a custom URL like https://<subdomaiin>--<site name>.netlify.live.

If anything isn't working as expected, please let us know on this issue and we'll reopen.

I know it took us a while to get this one out — thanks for your patience, and I hope you find it useful!