convex/src/cli/codegen_templates/clientConfig.ts

Client for the Convex Cloud

import { ProjectConfig } from "../lib/config";
import { GeneratedJsWithTypes, header } from "./common";

// The port used for local development.
// Picked as an unassigned port from https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.txt
// High number because this is an internal service.
export const LOCALHOST_PORT = 8187;

const devDeploymentConfigJS = `
  ${header("Generated development client configuration.")}

  /**
   * The DEV Convex client configuration.
   * 
   * This configuration connects your client to your dev Convex deployment
   * when \`npx convex dev\` is running.
   * 
   * To generate the production version, run \`npx convex deploy\`.
   * 
   * Usage:
   *
   * \`\`\`ts
   * import clientConfig from "../convex/_generated/clientConfig";
   *
   * const convex = new ConvexReactClient(clientConfig);
   * \`\`\`
   */
  const clientConfig = {
    address: "http://localhost:${LOCALHOST_PORT}"
  };
  export default clientConfig;
  `;

const devDeploymentConfigDTS = `
  ${header("Generated development client configuration.")}
  import type { ClientConfiguration } from "convex/browser";

  /**
   * The DEV Convex client configuration.
   * 
   * This configuration connects your client to your dev Convex deployment
   * when \`npx convex dev\` is running.
   * 
   * To generate the production version, run \`npx convex deploy\`.
   * 
   * Usage:
   *
   * \`\`\`ts
   * import clientConfig from "../convex/_generated/clientConfig";
   *
   * const convex = new ConvexReactClient(clientConfig);
   * \`\`\`
   */
  declare const clientConfig: ClientConfiguration;
  export default clientConfig;
  `;
export const devDeploymentConfig: GeneratedJsWithTypes = {
  JS: devDeploymentConfigJS,
  DTS: devDeploymentConfigDTS,
};

const prodDeploymentConfigDTS = `
${header("Generated production client configuration.")}
import type { ClientConfiguration } from "convex/browser";

/**
 * NOCOMMIT
 * 
 * We recommend not committing this config into your main branch, because it
 * references your production deployment. Instead:
 * 1. Run \`npx convex codegen\` to generate your dev config and check
 *    that in.
 * 2. When you want to deploy, run \`npx convex deploy\` first. This will
 *    generate your production config. Then run your bundler.
 */ 

/**
 * The PRODUCTION Convex client configuration.
 * 
 * This configuration connects your client to your production Convex deployment.
 *
 * To generate the dev version, run \`npx convex dev\` or \`npx convex codegen\`.
 *
 * Usage:
 *
 * \`\`\`ts
 * import clientConfig from "../convex/_generated/clientConfig";
 *
 * const convex = new ConvexReactClient(clientConfig);
 * \`\`\`
 */
declare const clientConfig: ClientConfiguration;
export default clientConfig;
`;

export function prodDeploymentConfig(
  config: ProjectConfig
): GeneratedJsWithTypes {
  const prodDeploymentConfigJS = `
  ${header("Generated production client configuration.")}

  /**
   * NOCOMMIT
   * 
   * We recommend not committing this config into your main branch, because it
   * references your production deployment. Instead:
   * 1. Run \`npx convex codegen\` to generate your dev config and check
   *    that in.
   * 2. When you want to deploy, run \`npx convex deploy\` first. This will
   *    generate your production config. Then run your bundler.
   */ 

  /**
   * The PRODUCTION Convex client configuration.
   * 
   * This configuration connects your client to your production Convex deployment.
   *
   * To generate the dev version, run \`npx convex dev\` or \`npx convex codegen\`.
   *
   * Usage:
   *
   * \`\`\`ts
   * import clientConfig from "../convex/_generated/clientConfig";
   *
   * const convex = new ConvexReactClient(clientConfig);
   * \`\`\`
   */
  const clientConfig = {
    address: "${config.prodUrl}"
  };
  export default clientConfig;
  `;
  return {
    JS: prodDeploymentConfigJS,
    DTS: prodDeploymentConfigDTS,
  };
}