feat: print function URL on first load (closes #3618) (#3646)

* feat: print function URL on first load (closes #3618)

* chore: fix test

* feat: use terminal-link to unclutter output on supported terminals

* fix: remove parens

* feat: use default fallback

* fix: formatting

* fix: right ordering

* fix: add missing deps

Co-authored-by: Netlify Team Account 1 <netlify-team-account-1@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Erez Rokah <erezrokah@users.noreply.github.com>

package.json

@@ -176,6 +176,7 @@
     "strip-ansi-control-characters": "^2.0.0",
     "tabtab": "^3.0.2",
     "tempy": "^1.0.0",
+    "terminal-link": "^2.1.1",
     "through2-filter": "^3.0.0",
     "through2-map": "^3.0.0",
     "to-readable-stream": "^2.1.0",

src/lib/functions/netlify-function.js

@@ -7,7 +7,17 @@ const BACKGROUND_SUFFIX = '-background'
 const difference = (setA, setB) => new Set([...setA].filter((item) => !setB.has(item)))
 
 class NetlifyFunction {
-  constructor({ config, directory, mainFile, name, projectRoot, runtime, timeoutBackground, timeoutSynchronous }) {
+  constructor({
+    config,
+    directory,
+    mainFile,
+    name,
+    projectRoot,
+    runtime,
+    settings,
+    timeoutBackground,
+    timeoutSynchronous,
+  }) {
     this.config = config
     this.directory = directory
     this.errorExit = errorExit
@@ -17,6 +27,7 @@ class NetlifyFunction {
     this.runtime = runtime
     this.timeoutBackground = timeoutBackground
     this.timeoutSynchronous = timeoutSynchronous
+    this.settings = settings
 
     // Determines whether this is a background function based on the function
     // name.
@@ -93,6 +104,10 @@ class NetlifyFunction {
       return { result: null, error }
     }
   }
+
+  get url() {
+    return `http://localhost:${this.settings.port}/.netlify/functions/${this.name}`
+  }
 }
 
 module.exports = { NetlifyFunction }

src/lib/functions/registry.js

@@ -2,6 +2,8 @@
 const { mkdir } = require('fs').promises
 const { env } = require('process')
 
+const terminalLink = require('terminal-link')
+
 const { NETLIFYDEVERR, NETLIFYDEVLOG, chalk, log, warn } = require('../../utils')
 const { getLogMessage } = require('../log')
 
@@ -10,12 +12,13 @@ const runtimes = require('./runtimes')
 const { watchDebounced } = require('./watcher')
 
 class FunctionsRegistry {
-  constructor({ capabilities, config, isConnected = false, projectRoot, timeouts }) {
+  constructor({ capabilities, config, isConnected = false, projectRoot, settings, timeouts }) {
     this.capabilities = capabilities
     this.config = config
     this.isConnected = isConnected
     this.projectRoot = projectRoot
     this.timeouts = timeouts
+    this.settings = settings
 
     // An object to be shared among all functions in the registry. It can be
     // used to cache the results of the build function — e.g. it's used in
@@ -140,7 +143,7 @@ class FunctionsRegistry {
     this.functions.set(name, func)
     this.buildFunctionAndWatchFiles(func)
 
-    log(`${NETLIFYDEVLOG} ${chalk.green('Loaded')} function ${chalk.yellow(name)}.`)
+    log(`${NETLIFYDEVLOG} ${chalk.green('Loaded')} function ${terminalLink(chalk.yellow(name), func.url)}.`)
   }
 
   async scan(directories) {
@@ -192,6 +195,7 @@ class FunctionsRegistry {
         runtime,
         timeoutBackground: this.timeouts.backgroundFunctions,
         timeoutSynchronous: this.timeouts.syncFunctions,
+        settings: this.settings,
       })
 
       this.registerFunction(name, func)

src/lib/functions/server.js

@@ -180,6 +180,7 @@ const startFunctionsServer = async ({
       config,
       isConnected: Boolean(siteUrl),
       projectRoot: site.root,
+      settings,
       timeouts,
     })
 

src/lib/functions/server.test.js

@@ -37,6 +37,8 @@ test.before(async (t) => {
     projectRoot,
     config: {},
     timeouts: { syncFunctions: 1, backgroundFunctions: 1 },
+    // eslint-disable-next-line no-magic-numbers
+    settings: { port: 8888 },
   })
   await functionsRegistry.scan([functionsPath])
   app = express()