Separate port and host in configuration

Many cloud providers have an environment variable PORT.
an application is supposed to listen in that port.

Currently,  the yaml for listen address looks like this:
```yaml
backend:
  listen: 0.0.0.0:7000
```

the problem is that I can't use the port environment variable there.

This PR changes it to this:
```yaml
backend:
  listen:
    host: 0.0.0.0
    port: 7000
```

if I want to use the PORT environment variable, now I can do it like this:

```yaml
backend:
  listen:
    host: 0.0.0.0
    port:
      $secret:
         env: PORT
```

packages/backend-common/src/service/lib/config.ts

@@ -37,11 +37,18 @@ export type BaseOptions = {
  * ```
  */
 export function readBaseOptions(config: ConfigReader): BaseOptions {
-  // TODO(freben): Expand this to support more addresses and perhaps optional
-  const { host, port } = parseListenAddress(config.getString('listen'));
+  if (typeof config.get('listen') === 'string') {
+    // TODO(freben): Expand this to support more addresses and perhaps optional
+    const { host, port } = parseListenAddress(config.getString('listen'));
+    return removeUnknown({
+      listenPort: port,
+      listenHost: host,
+    });
+  }
+
   return removeUnknown({
-    listenPort: port,
-    listenHost: host,
+    listenPort: config.getOptionalNumber('listen.port'),
+    listenHost: config.getOptionalString('listen.host'),
   });
 }
 

packages/create-app/templates/default-app/app-config.yaml

@@ -7,7 +7,9 @@ organization:
 
 backend:
   baseUrl: http://localhost:7000
-  listen: 0.0.0.0:7000
+  listen:
+    host: 0.0.0.0
+    port: 7000
   cors:
     origin: http://localhost:3000
     methods: [GET, POST, PUT, DELETE]