Merge branch 'main' into feat/suspense-router

__fixtures__/test-project/web/package.json

@@ -27,6 +27,7 @@
     "postcss": "^8.4.23",
     "postcss-loader": "^7.3.0",
     "prettier-plugin-tailwindcss": "^0.2.8",
+    "storybook": "7.0.12",
     "tailwindcss": "^3.3.2"
   }
 }

docs/docs/cli-commands.md

@@ -1989,11 +1989,12 @@ yarn redwood serve [side]
 
 `yarn rw serve` is useful for debugging locally or for self-hosting—deploying a single server into a serverful environment. Since both the api and the web sides run in the same server, CORS isn't a problem.
 
-| Arguments & Options | Description                                                                    |
-| ------------------- | ------------------------------------------------------------------------------ |
-| `side`              | Which side(s) to run. Choices are `api` and `web`. Defaults to `api` and `web` |
-| `--port`            | What port should the server run on [default: 8911]                             |
-| `--socket`          | The socket the server should run. This takes precedence over port              |
+| Arguments & Options | Description                                                                                                                                     |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `side`              | Which side(s) to run. Choices are `api` and `web`. Defaults to `api` and `web`                                                                  |
+| `--port`            | What port should the server run on [default: 8911]                                                                                              |
+| `--host`            | What host should the server run on. This defaults to the value of `web.host` in the `redwood.toml` file which itself defaults to `'localhost'`. |
+| `--socket`          | The socket the server should run. This takes precedence over port                                                                               |
 
 ### serve api
 
@@ -2005,11 +2006,12 @@ yarn rw serve api
 
 This command uses `apiUrl` in your `redwood.toml`. Use this command if you want to run just the api side on a server (e.g. running on Render).
 
-| Arguments & Options | Description                                                       |
-| ------------------- | ----------------------------------------------------------------- |
-| `--port`            | What port should the server run on [default: 8911]                |
-| `--socket`          | The socket the server should run. This takes precedence over port |
-| `--apiRootPath`     | The root path where your api functions are served                 |
+| Arguments & Options | Description                                                                                                                                     |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--port`            | What port should the server run on [default: 8911]                                                                                              |
+| `--host`            | What host should the server run on. This defaults to the value of `api.host` in the `redwood.toml` file which itself defaults to `'localhost'`. |
+| `--socket`          | The socket the server should run. This takes precedence over port                                                                               |
+| `--apiRootPath`     | The root path where your api functions are served                                                                                               |
 
 For the full list of Server Configuration settings, see [this documentation](app-configuration-redwood-toml.md#api).
 If you want to format your log output, you can pipe the command to the Redwood LogFormatter:
@@ -2032,11 +2034,12 @@ This command serves the contents in `web/dist`. Use this command if you're debug
 >
 > Probably, but it can be a challenge to setup when you just want something running quickly!
 
-| Arguments & Options | Description                                                                           |
-| ------------------- | ------------------------------------------------------------------------------------- |
-| `--port`            | What port should the server run on [default: 8911]                                    |
-| `--socket`          | The socket the server should run. This takes precedence over port                     |
-| `--apiHost`         | Forwards requests from the `apiUrl` (defined in `redwood.toml`) to the specified host |
+| Arguments & Options | Description                                                                                                                                     |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--port`            | What port should the server run on [default: 8911]                                                                                              |
+| `--host`            | What host should the server run on. This defaults to the value of `web.host` in the `redwood.toml` file which itself defaults to `'localhost'`. |
+| `--socket`          | The socket the server should run. This takes precedence over port                                                                               |
+| `--apiHost`         | Forwards requests from the `apiUrl` (defined in `redwood.toml`) to the specified host                                                           |
 
 If you want to format your log output, you can pipe the command to the Redwood LogFormatter:
 

package.json

@@ -87,7 +87,7 @@
     "npm-packlist": "7.0.4",
     "nx": "16.2.1",
     "nx-cloud": "16.0.5",
-    "octokit": "2.0.16",
+    "octokit": "2.0.18",
     "ora": "5.4.1",
     "prompts": "2.4.2",
     "rimraf": "5.0.1",

packages/api-server/src/cliHandlers.ts

@@ -18,13 +18,31 @@ const sendProcessReady = () => {
   return process.send && process.send('ready')
 }
 
+const redwoodProjectConfig = getConfig()
+
 export const commonOptions = {
-  port: { default: getConfig().web?.port || 8910, type: 'number', alias: 'p' },
+  port: {
+    default: redwoodProjectConfig.web.port,
+    type: 'number',
+    alias: 'p',
+  },
+  host: {
+    default: redwoodProjectConfig.web.host,
+    type: 'string',
+  },
   socket: { type: 'string' },
 } as const
 
 export const apiCliOptions = {
-  port: { default: getConfig().api?.port || 8911, type: 'number', alias: 'p' },
+  port: {
+    default: redwoodProjectConfig.api.port,
+    type: 'number',
+    alias: 'p',
+  },
+  host: {
+    default: redwoodProjectConfig.api.host,
+    type: 'string',
+  },
   socket: { type: 'string' },
   apiRootPath: {
     alias: ['rootPath', 'root-path'],
@@ -36,7 +54,15 @@ export const apiCliOptions = {
 } as const
 
 export const webCliOptions = {
-  port: { default: getConfig().web?.port || 8910, type: 'number', alias: 'p' },
+  port: {
+    default: redwoodProjectConfig.web.port,
+    type: 'number',
+    alias: 'p',
+  },
+  host: {
+    default: redwoodProjectConfig.web.host,
+    type: 'string',
+  },
   socket: { type: 'string' },
   apiHost: {
     alias: 'api-host',
@@ -46,7 +72,7 @@ export const webCliOptions = {
 } as const
 
 export const apiServerHandler = async (options: ApiServerArgs) => {
-  const { port, socket, apiRootPath } = options
+  const { port, host, socket, apiRootPath } = options
   const tsApiServer = Date.now()
   process.stdout.write(c.dim(c.italic('Starting API Server...\n')))
 
@@ -57,14 +83,15 @@ export const apiServerHandler = async (options: ApiServerArgs) => {
 
   const http = startFastifyServer({
     port,
+    host,
     socket,
     fastify,
   }).ready(() => {
     console.log(c.italic(c.dim('Took ' + (Date.now() - tsApiServer) + ' ms')))
 
     const on = socket
       ? socket
-      : c.magenta(`http://localhost:${port}${apiRootPath}`)
+      : c.magenta(`http://${host}:${port}${apiRootPath}`)
     console.log(`API listening on ${on}`)
     const graphqlEnd = c.magenta(`${apiRootPath}graphql`)
     console.log(`GraphQL endpoint at ${graphqlEnd}`)
@@ -76,10 +103,10 @@ export const apiServerHandler = async (options: ApiServerArgs) => {
 }
 
 export const bothServerHandler = async (options: BothServerArgs) => {
-  const { port, socket } = options
+  const { port, host, socket } = options
   const tsServer = Date.now()
   process.stdout.write(c.dim(c.italic('Starting API and Web Servers...\n')))
-  const apiRootPath = coerceRootPath(getConfig().web.apiUrl)
+  const apiRootPath = coerceRootPath(redwoodProjectConfig.web.apiUrl)
 
   let fastify = createFastifyInstance()
 
@@ -89,15 +116,16 @@ export const bothServerHandler = async (options: BothServerArgs) => {
 
   startFastifyServer({
     port,
+    host,
     socket,
     fastify,
   }).ready(() => {
     console.log(c.italic(c.dim('Took ' + (Date.now() - tsServer) + ' ms')))
     const on = socket
       ? socket
-      : c.magenta(`http://localhost:${port}${apiRootPath}`)
-    const webServer = c.green(`http://localhost:${port}`)
-    const apiServer = c.magenta(`http://localhost:${port}`)
+      : c.magenta(`http://${host}:${port}${apiRootPath}`)
+    const webServer = c.green(`http://${host}:${port}`)
+    const apiServer = c.magenta(`http://${host}:${port}`)
     console.log(`Web server started on ${webServer}`)
     console.log(`API serving from ${apiServer}`)
     console.log(`API listening on ${on}`)
@@ -108,14 +136,14 @@ export const bothServerHandler = async (options: BothServerArgs) => {
 }
 
 export const webServerHandler = async (options: WebServerArgs) => {
-  const { port, socket, apiHost } = options
+  const { port, host, socket, apiHost } = options
   const tsServer = Date.now()
   process.stdout.write(c.dim(c.italic('Starting Web Server...\n')))
-  const apiUrl = getConfig().web.apiUrl
+  const apiUrl = redwoodProjectConfig.web.apiUrl
   // Construct the graphql url from apiUrl by default
   // But if apiGraphQLUrl is specified, use that instead
   const graphqlEndpoint = coerceRootPath(
-    getConfig().web.apiGraphQLUrl ?? `${apiUrl}/graphql`
+    redwoodProjectConfig.web.apiGraphQLUrl ?? `${apiUrl}/graphql`
   )
 
   let fastify = createFastifyInstance()
@@ -131,15 +159,16 @@ export const webServerHandler = async (options: WebServerArgs) => {
   }
 
   startFastifyServer({
-    port: port,
+    port,
+    host,
     socket,
     fastify,
   }).ready(() => {
     console.log(c.italic(c.dim('Took ' + (Date.now() - tsServer) + ' ms')))
     if (socket) {
       console.log(`Listening on ` + c.magenta(`${socket}`))
     }
-    const webServer = c.green(`http://localhost:${port}`)
+    const webServer = c.green(`http://${host}:${port}`)
     console.log(`Web server started on ${webServer}`)
     console.log(`GraphQL endpoint is set to ` + c.magenta(`${graphqlEndpoint}`))
     sendProcessReady()

packages/api-server/src/server.ts

@@ -2,16 +2,17 @@ import { FastifyInstance } from 'fastify'
 
 export interface HttpServerParams {
   port: number
+  host?: string
   socket?: string
   fastify: FastifyInstance
 }
 
 export const startServer = ({
   port = 8911,
+  host = 'localhost',
   socket,
   fastify,
 }: HttpServerParams) => {
-  const host = 'localhost'
   const serverPort = socket ? parseInt(socket) : port
 
   fastify.listen({ port: serverPort, host })

packages/api-server/src/watch.ts

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+// This script is called by the `yarn rw dev` command. Specifically, it's the api command.
 
 import { fork } from 'child_process'
 import type { ChildProcess } from 'child_process'
@@ -16,6 +17,9 @@ import { buildApi } from '@redwoodjs/internal/dist/build/api'
 import { loadAndValidateSdls } from '@redwoodjs/internal/dist/validateSchema'
 import { getPaths, ensurePosixPath, getConfig } from '@redwoodjs/project-config'
 
+const redwoodProjectPaths = getPaths()
+const redwoodProjectConfig = getConfig()
+
 const argv = yargs(hideBin(process.argv))
   .option('debug-port', {
     alias: 'dp',
@@ -26,15 +30,18 @@ const argv = yargs(hideBin(process.argv))
     alias: 'p',
     description: 'Port',
     type: 'number',
+    default: redwoodProjectConfig.api.port,
+  })
+  .option('host', {
+    description: 'Host',
+    type: 'string',
+    default: redwoodProjectConfig.api.host,
   })
-  .help()
-  .alias('help', 'h')
   .parseSync()
 
-const rwjsPaths = getPaths()
-
+// If this is run via the yarn rw dev command, this will have already been called.
 dotenv.config({
-  path: rwjsPaths.base,
+  path: redwoodProjectPaths.base,
 })
 
 // TODO:
@@ -77,9 +84,9 @@ const rebuildApiServer = () => {
     }
 
     // OpenTelemetry SDK Setup
-    if (getConfig().experimental.opentelemetry.enabled) {
+    if (redwoodProjectConfig.experimental.opentelemetry.enabled) {
       const opentelemetrySDKScriptPath =
-        getConfig().experimental.opentelemetry.apiSdk
+        redwoodProjectConfig.experimental.opentelemetry.apiSdk
       if (opentelemetrySDKScriptPath) {
         console.log(
           `Setting up OpenTelemetry using the setup file: ${opentelemetrySDKScriptPath}`
@@ -101,12 +108,10 @@ const rebuildApiServer = () => {
       forkOpts.execArgv = forkOpts.execArgv.concat([`--inspect=${debugPort}`])
     }
 
-    const port = argv.port ?? getConfig().api.port
-
     // Start API server
     httpServerProcess = fork(
       path.join(__dirname, 'index.js'),
-      ['api', '--port', port.toString()],
+      ['api', '--port', argv.port.toString(), '--host', `${argv.host}`],
       forkOpts
     )
   } catch (e) {
@@ -126,16 +131,16 @@ const delayRestartServer = debounce(
 )
 
 // NOTE: the file comes through as a unix path, even on windows
-// So we need to convert the rwjsPaths
+// So we need to convert the redwoodProjectPaths
 
 const IGNORED_API_PATHS = [
-  'api/dist', // use this, because using rwjsPaths.api.dist seems to not ignore on first build
-  rwjsPaths.api.types,
-  rwjsPaths.api.db,
+  'api/dist', // use this, because using redwoodProjectPaths.api.dist seems to not ignore on first build
+  redwoodProjectPaths.api.types,
+  redwoodProjectPaths.api.db,
 ].map((path) => ensurePosixPath(path))
 
 chokidar
-  .watch(rwjsPaths.api.base, {
+  .watch(redwoodProjectPaths.api.base, {
     persistent: true,
     ignoreInitial: true,
     ignored: (file: string) => {
@@ -174,7 +179,9 @@ chokidar
     }
 
     console.log(
-      c.dim(`[${eventName}] ${filePath.replace(rwjsPaths.api.base, '')}`)
+      c.dim(
+        `[${eventName}] ${filePath.replace(redwoodProjectPaths.api.base, '')}`
+      )
     )
     delayRestartServer.cancel()
     delayRestartServer()

packages/cli/src/commands/__tests__/dev.test.js

@@ -76,6 +76,7 @@ describe('yarn rw dev', () => {
     getConfig.mockReturnValue({
       web: {
         port: 8910,
+        host: 'localhost',
       },
       api: {
         port: 8911,
@@ -100,7 +101,7 @@ describe('yarn rw dev', () => {
     )
 
     expect(apiCommand.command).toMatchInlineSnapshot(
-      `"yarn cross-env NODE_ENV=development NODE_OPTIONS=--enable-source-maps yarn nodemon --quiet --watch "/mocked/project/redwood.toml" --exec "yarn rw-api-server-watch --port 8911 --debug-port 18911 | rw-log-formatter""`
+      `"yarn cross-env NODE_ENV=development NODE_OPTIONS=--enable-source-maps yarn nodemon --quiet --watch "/mocked/project/redwood.toml" --exec "yarn rw-api-server-watch --port 8911 --host '::' --debug-port 18911 | rw-log-formatter""`
     )
 
     expect(generateCommand.command).toEqual('yarn rw-gen-watch')
@@ -110,6 +111,7 @@ describe('yarn rw dev', () => {
     getConfig.mockReturnValue({
       web: {
         port: 8910,
+        host: 'localhost',
       },
       api: {
         port: 8911,
@@ -127,14 +129,15 @@ describe('yarn rw dev', () => {
     const apiCommand = find(concurrentlyArgs, { name: 'api' })
 
     expect(apiCommand.command).toContain(
-      'yarn rw-api-server-watch --port 8911 --debug-port 90909090'
+      "yarn rw-api-server-watch --port 8911 --host '::' --debug-port 90909090"
     )
   })
 
   it('Can disable debugger by setting toml to false', async () => {
     getConfig.mockReturnValue({
       web: {
         port: 8910,
+        host: 'localhost',
       },
       api: {
         port: 8911,
@@ -157,6 +160,7 @@ describe('yarn rw dev', () => {
     getConfig.mockReturnValue({
       web: {
         port: 8910,
+        host: 'localhost',
         bundler: 'vite', // <-- enable vite mode
       },
       api: {