feat: show progress while waiting for framework server to start (#4683)

* feat: show progress while waiting for framework server to start

* chore: update contributors field

* chore: update contributors field

* test: update snapshot tests

* chore: update contributors field

* chore: update contributors field

* style: run prettier

* chore: update contributors field

* chore: update contributors field

* test: add regex to remove extra dots that lead to flaky snapshots

* chore: update contributors field

* chore: update contributors field

* test: move normalizer into the framework test suite

the regex being applied was affecting other tests

* chore: update contributors field

* test: silly mistake

* style: lint

* test: update other tests to use the other normalizer func

Co-authored-by: ericapisani <ericapisani@users.noreply.github.com>
Co-authored-by: token-generator-app[bot] <token-generator-app[bot]@users.noreply.github.com>

package.json

@@ -41,6 +41,7 @@
     "Eduardo Bouças <mail@eduardoboucas.com> (https://twitter.com/eduardoboucas)",
     "Emily Zhang (https://twitter.com/mlylzhng)",
     "Erez Rokah (https://www.erezro.com)",
+    "Erica Pisani <pisani.erica@gmail.com>",
     "Evans Hauser (https://twitter.com/evanshauser)",
     "Finn Woelm (https://twitter.com/FinnWoelm)",
     "Flxbot",

src/commands/dev/dev.js

@@ -176,9 +176,12 @@ const startFrameworkServer = async function ({ settings }) {
   runCommand(settings.command, settings.env)
 
   try {
+    log(
+      `${NETLIFYDEVLOG} Waiting for framework port ${settings.frameworkPort}. This can be configured using the 'targetPort' property in the netlify.toml`,
+    )
     const open = await waitPort({
       port: settings.frameworkPort,
-      output: 'silent',
+      output: 'dots',
       timeout: FRAMEWORK_PORT_TIMEOUT,
       ...(settings.pollingStrategies.includes('HTTP') && { protocol: 'http' }),
     })

tests/integration/600.framework-detection.test.js

@@ -12,6 +12,9 @@ const { normalize } = require('./utils/snapshots')
 
 const content = 'Hello World!'
 
+// Remove extra '.'s resulting from different load times which lead to flaky snapshots
+const frameworkDetectionNormalizer = (output) => normalize(output.replace(/\.+(?=\.)/, ''))
+
 const test = isCI ? avaTest.serial.bind(avaTest) : avaTest
 
 test('should default to process.cwd() and static server', async (t) => {
@@ -27,7 +30,7 @@ test('should default to process.cwd() and static server', async (t) => {
       const response = await got(url).text()
       t.is(response, content)
 
-      t.snapshot(normalize(output))
+      t.snapshot(frameworkDetectionNormalizer(output))
     })
   })
 })
@@ -45,7 +48,7 @@ test('should use static server when --dir flag is passed', async (t) => {
       const response = await got(url).text()
       t.is(response, content)
 
-      t.snapshot(normalize(output))
+      t.snapshot(frameworkDetectionNormalizer(output))
     })
   })
 })
@@ -64,7 +67,7 @@ test('should use static server when framework is set to #static', async (t) => {
       const response = await got(url).text()
       t.is(response, content)
 
-      t.snapshot(normalize(output))
+      t.snapshot(frameworkDetectionNormalizer(output))
     })
   })
 })
@@ -84,7 +87,7 @@ test('should log the command if using static server and `command` is configured'
         const response = await got(url).text()
         t.is(response, content)
 
-        t.snapshot(normalize(output))
+        t.snapshot(frameworkDetectionNormalizer(output))
       },
     )
   })
@@ -105,7 +108,7 @@ test('should warn if using static server and `targetPort` is configured', async
         const response = await got(url).text()
         t.is(response, content)
 
-        t.snapshot(normalize(output))
+        t.snapshot(frameworkDetectionNormalizer(output))
       },
     )
   })
@@ -123,7 +126,7 @@ test('should run `command` when both `command` and `targetPort` are configured',
         true,
       ),
     )
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -133,7 +136,7 @@ test('should force a specific framework when configured', async (t) => {
 
     // a failure is expected since this is not a true create-react-app project
     const error = await t.throwsAsync(() => withDevServer({ cwd: builder.directory }, () => {}, true))
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -142,7 +145,7 @@ test('should throw when forcing a non supported framework', async (t) => {
     await builder.withNetlifyToml({ config: { dev: { framework: 'to-infinity-and-beyond-js' } } }).buildAsync()
 
     const error = await t.throwsAsync(() => withDevServer({ cwd: builder.directory }, () => {}, true))
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -156,7 +159,7 @@ test('should detect a known framework', async (t) => {
 
     // a failure is expected since this is not a true create-react-app project
     const error = await t.throwsAsync(() => withDevServer({ cwd: builder.directory }, () => {}, true))
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -167,7 +170,7 @@ test('should throw if framework=#custom but command is missing', async (t) => {
     const error = await t.throwsAsync(() =>
       withDevServer({ cwd: builder.directory, args: ['--targetPort', '3000'] }, () => {}, true),
     )
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -178,7 +181,7 @@ test('should throw if framework=#custom but targetPort is missing', async (t) =>
     const error = await t.throwsAsync(() =>
       withDevServer({ cwd: builder.directory, args: ['--command', 'echo hello'] }, () => {}, true),
     )
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -193,7 +196,7 @@ test('should start custom command if framework=#custom, command and targetPort a
         true,
       ),
     )
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -218,7 +221,7 @@ test(`should print specific error when command doesn't exist`, async (t) => {
         true,
       ),
     )
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -247,7 +250,7 @@ test('should prompt when multiple frameworks are detected', async (t) => {
 
       await childProcess
     })
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -263,7 +266,7 @@ test('should not run framework detection if command and targetPort are configure
         true,
       ),
     )
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 
@@ -283,7 +286,7 @@ test('should filter frameworks with no dev command', async (t) => {
       const response = await got(url).text()
       t.is(response, content)
 
-      t.snapshot(normalize(output))
+      t.snapshot(frameworkDetectionNormalizer(output))
     })
   })
 })
@@ -302,7 +305,7 @@ test('should pass framework-info env to framework sub process', async (t) => {
 
     // a failure is expected since this is not a true Gatsby project
     const error = await t.throwsAsync(() => withDevServer({ cwd: builder.directory }, () => {}, true))
-    t.snapshot(normalize(error.stdout))
+    t.snapshot(frameworkDetectionNormalizer(error.stdout))
   })
 })
 

tests/integration/snapshots/600.framework-detection.test.js.md

@@ -1,4 +1,4 @@
-# Snapshot report for `tests/600.framework-detection.test.js`
+# Snapshot report for `tests/integration/600.framework-detection.test.js`
 
 The actual snapshot is saved in `600.framework-detection.test.js.snap`.
 
@@ -108,7 +108,8 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with custom config␊
-    hello␊
+    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
+    Waiting for localhost:3000.hello␊
     ◈ "echo hello" exited with code *. Shutting down Netlify Dev server`
 
 ## should force a specific framework when configured
@@ -117,7 +118,8 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with Create React App␊
-    ◈ Failed running command: react-scripts start. Please verify 'react-scripts' exists`
+    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
+    Waiting for localhost:3000.◈ Failed running command: react-scripts start. Please verify 'react-scripts' exists`
 
 ## should throw when forcing a non supported framework
 
@@ -132,7 +134,8 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with Create React App␊
-    ␊
+    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
+    Waiting for localhost:3000.␊
     > start␊
     > react-scripts start␊
     ␊
@@ -158,7 +161,8 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with #custom␊
-    hello␊
+    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
+    Waiting for localhost:3000.hello␊
     ◈ "echo hello" exited with code *. Shutting down Netlify Dev server`
 
 ## should print specific error when command doesn't exist
@@ -170,7 +174,8 @@ Generated by [AVA](https://avajs.dev).
     ◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings.␊
     ◈ See docs at: https://cli.netlify.com/netlify-dev#project-detection␊
     ◈ Starting Netlify Dev with #custom␊
-    ◈ Failed running command: oops-i-did-it-again forgot-to-use-a-valid-command. Please verify 'oops-i-did-it-again' exists`
+    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
+    Waiting for localhost:3000.◈ Failed running command: oops-i-did-it-again forgot-to-use-a-valid-command. Please verify 'oops-i-did-it-again' exists`
 
 ## should prompt when multiple frameworks are detected
 
@@ -184,7 +189,8 @@ Generated by [AVA](https://avajs.dev).
     > [Create React App] 'npm run start' ? Multiple possible start commands found Create React App-npm run start␊
     Add 'framework = "create-react-app"' to the [dev] section of your netlify.toml to avoid this selection prompt next time␊
     ◈ Starting Netlify Dev with Create React App␊
-    ␊
+    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
+    Waiting for localhost:3000.␊
     > start␊
     > react-scripts start␊
     ␊
@@ -199,7 +205,8 @@ Generated by [AVA](https://avajs.dev).
     ◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings.␊
     ◈ See docs at: https://cli.netlify.com/netlify-dev#project-detection␊
     ◈ Starting Netlify Dev with custom config␊
-    hello␊
+    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
+    Waiting for localhost:3000.hello␊
     ◈ "echo hello" exited with code *. Shutting down Netlify Dev server`
 
 ## should filter frameworks with no dev command
@@ -229,7 +236,8 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with Gatsby␊
-    ␊
+    ◈ Waiting for framework port 8000. This can be configured using the 'targetPort' property in the netlify.toml␊
+    Waiting for localhost:8000.␊
     > develop␊
     > node -p process.env.GATSBY_LOGGER␊
     ␊