Merge branch 'main' into djc-simplify-server-logs

.eslintrc.js

@@ -1,11 +1,11 @@
 const path = require('path')
 
-const findUp = require('findup-sync')
+const { findUp } = require('@redwoodjs/project-config')
 
 // Framework Babel config is monorepo root ./babel.config.js
-// `yarn lint` runs for each workspace, which needs findup for path to root
+// `yarn lint` runs for each workspace, which needs findUp for path to root
 const findBabelConfig = (cwd = process.cwd()) => {
-  const configPath = findUp('babel.config.js', { cwd })
+  const configPath = findUp('babel.config.js', cwd)
   if (!configPath) {
     throw new Error(`Eslint-parser could not find a "babel.config.js" file`)
   }

__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:
 

docs/docs/deploy/coherence.md

@@ -13,7 +13,7 @@ description: Serverful deploys on GCP or AWS via Coherence's full-lifecycle envi
 
 ## Coherence Prerequisites
 
-To deploy to Coherence, your Redwood project needs to be hosted on GitHub and you must have an [AWS](https://docs.withcoherence.com/docs/tutorials/creating-an-app-on-aws) or [GCP](https://docs.withcoherence.com/docs/tutorials/creating-an-app-on-gcp) account.
+To deploy to Coherence, your Redwood project needs to be hosted on GitHub and you must have an [AWS](https://docs.withcoherence.com/docs/overview/aws-deep-dive) or [GCP](https://docs.withcoherence.com/docs/overview/gcp-deep-dive) account.
 
 ## Coherence Deploy
 

docs/docs/graphql.md

@@ -1452,9 +1452,9 @@ The [GraphQL Playground](https://www.graphql-yoga.com/docs/features/graphiql) is
 
 > Because both introspection and the playground share possibly sensitive information about your data model, your data, your queries and mutations, best practices for deploying a GraphQL Server call to disable these in production, RedwoodJS **, by default, only enables introspection and the playground when running in development**. That is when `process.env.NODE_ENV === 'development'`.
 
-However, there may be cases where you want to enable introspection. You can enable introspection by setting the `allowIntrospection` option to `true`.
+However, there may be cases where you want to enable introspection as well as the GraphQL PLaygrouns. You can enable introspection by setting the `allowIntrospection` option to `true` and enable GraphiQL by setting `allowGraphiQL` to `true`.
 
-Here is an example of `createGraphQLHandler` function with the `allowIntrospection` option set to `true`:
+Here is an example of `createGraphQLHandler` function with the `allowIntrospection` and `allowGraphiQL` options set to `true`:
 ```ts {8}
 export const handler = createGraphQLHandler({
   authDecoder,
@@ -1464,6 +1464,7 @@ export const handler = createGraphQLHandler({
   sdls,
   services,
   allowIntrospection: true, // 👈 enable introspection in all environments
+  allowGraphiQL: true, // 👈 enable GraphiQL Playground in all environments
   onException: () => {
     // Disconnect from your database with an unhandled exception.
     db.$disconnect()
@@ -1475,8 +1476,13 @@ export const handler = createGraphQLHandler({
 
 Enabling introspection in production may pose a security risk, as it allows users to access information about your schema, queries, and mutations. Use this option with caution and make sure to secure your GraphQL API properly.
 
+The may be cases where one wants to allow introspection, but not GraphiQL.
+
+Or, you may want to enable GraphiQL, but not allow introspection; for example, to try out known queries, but not to share the entire set of possible operations and types.
+
 :::
 
+
 ### GraphQL Armor Configuration
 
 [GraphQL Armor](https://escape.tech/graphql-armor/) is a middleware that adds a security layer the RedwoodJS GraphQL endpoint configured with sensible defaults.

package.json

@@ -35,7 +35,7 @@
     "@actions/exec": "1.1.1",
     "@babel/cli": "7.21.5",
     "@babel/core": "7.21.8",
-    "@babel/generator": "7.21.5",
+    "@babel/generator": "7.21.9",
     "@babel/node": "7.20.7",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-decorators": "7.21.0",
@@ -49,7 +49,7 @@
     "@babel/runtime-corejs3": "7.21.5",
     "@faker-js/faker": "8.0.1",
     "@npmcli/arborist": "6.2.9",
-    "@playwright/test": "1.33.0",
+    "@playwright/test": "1.34.0",
     "@replayio/playwright": "0.3.30",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
@@ -70,7 +70,7 @@
     "core-js": "3.30.2",
     "cypress": "12.12.0",
     "cypress-wait-until": "1.7.2",
-    "eslint": "8.40.0",
+    "eslint": "8.41.0",
     "fast-glob": "3.2.12",
     "fs-extra": "11.1.1",
     "is-port-reachable": "3.1.0",
@@ -85,9 +85,9 @@
     "ncp": "2.0.0",
     "nodemon": "2.0.22",
     "npm-packlist": "7.0.4",
-    "nx": "16.2.1",
+    "nx": "16.2.2",
     "nx-cloud": "16.0.5",
-    "octokit": "2.0.14",
+    "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 })