Start develop proxy before actual develop process (#25015)

This should fix Codesandbox sometimes exposing the wrong port.

They simply expose the first port that is ever opened at `:80`, which before
could be the random port assigned to the actual develop process.

By always starting the proxy at `:8000` (or the user selected port),
Codesandbox _should_ always expose that port at `:80`, resolving any
incompatibilities.

Author: mxstbr

packages/gatsby/src/commands/develop.ts

@@ -116,6 +116,14 @@ module.exports = async (program: IProgram): Promise<void> => {
     getRandomPort(),
   ])
 
+  // NOTE(@mxstbr): We need to start the develop proxy before the develop process to ensure
+  // codesandbox detects the right port to expose by default
+  const proxy = startDevelopProxy({
+    proxyPort: proxyPort,
+    targetPort: developPort,
+    program,
+  })
+
   const developProcess = new ControllableScript(`
     const cmd = require(${JSON.stringify(developProcessPath)});
     const args = ${JSON.stringify({
@@ -160,12 +168,6 @@ module.exports = async (program: IProgram): Promise<void> => {
     })
   }
 
-  const proxy = startDevelopProxy({
-    proxyPort: proxyPort,
-    targetPort: developPort,
-    program,
-  })
-
   let unlock
   if (!isCI()) {
     unlock = await createServiceLock(program.directory, `developstatusserver`, {