Support opt-in to CORS proxy (#82)

packages/create-app/.gitignore

@@ -1,3 +1,3 @@
 # Override root lib/ ignore
-!templates/template-next-static-export/src/lib/
-!**/__snapshots__/expected-template-next-static-export/src/lib/
+!templates/**/src/lib/
+!**/__snapshots__/**/src/lib/

packages/create-app/README.md

@@ -30,17 +30,18 @@ The CLI can be run without any arguments and the user will be guided with intera
 npx @osdk/create-app [project] [--<option>]
 ```
 
-| Option               | Description                                                                |
-| -------------------- | -------------------------------------------------------------------------- |
-| --overwrite          | Overwrite project directory if already exists [boolean]                    |
-| --template           | Template name to use [string]                                              |
-| --foundryUrl         | URL for the Foundry stack [string]                                         |
-| --applicationUrl     | URL the production application will be hosted on [string]                  |
-| --skipApplicationUrl | Skip filling in URL the production application will be hosted on [boolean] |
-| --application        | Application resource identifier (rid) [string]                             |
-| --clientId           | OAuth client ID for application [string]                                   |
-| --osdkPackage        | OSDK package name for application [string]                                 |
-| --osdkRegistryUrl    | URL for NPM registry to install OSDK package [string]                      |
+| Option               | Description                                                                      |
+| -------------------- | -------------------------------------------------------------------------------- |
+| --overwrite          | Overwrite project directory if already exists [boolean]                          |
+| --template           | Template name to use [string]                                                    |
+| --foundryUrl         | URL for the Foundry stack [string]                                               |
+| --applicationUrl     | URL the production application will be hosted on [string]                        |
+| --skipApplicationUrl | Skip filling in URL the production application will be hosted on [boolean]       |
+| --application        | Application resource identifier (rid) [string]                                   |
+| --clientId           | OAuth client ID for application [string]                                         |
+| --osdkPackage        | OSDK package name for application [string]                                       |
+| --osdkRegistryUrl    | URL for NPM registry to install OSDK package [string]                            |
+| --corsProxy          | Include a CORS proxy for Foundry API requests during local development [boolean] |
 
 ## Templates
 

packages/create-app/changelog/@unreleased/pr-82.v2.yml

@@ -0,0 +1,5 @@
+type: improvement
+improvement:
+  description: Support opt-in to CORS proxy
+  links:
+  - https://github.com/palantir/osdk-ts/pull/82

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/.env.development

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_FOUNDRY_API_URL=http://localhost:8080
+NEXT_PUBLIC_FOUNDRY_REDIRECT_URL=http://localhost:8080/auth/callback
+NEXT_PUBLIC_FOUNDRY_CLIENT_ID=123

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/.env.production

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_FOUNDRY_API_URL=https://example.palantirfoundry.com
+NEXT_PUBLIC_FOUNDRY_REDIRECT_URL=https://app.example.palantirfoundry.com/auth/callback
+NEXT_PUBLIC_FOUNDRY_CLIENT_ID=123

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/.npmrc

@@ -0,0 +1,2 @@
+//example.palantirfoundry.com/artifacts/api/repositories/ri.artifacts.main.repository.fake/contents/release/npm:_authToken=${FOUNDRY_TOKEN}
+@fake:registry=https://example.palantirfoundry.com/artifacts/api/repositories/ri.artifacts.main.repository.fake/contents/release/npm

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/README.md

@@ -0,0 +1,29 @@
+# expected-template-next-static-export-cors-proxy
+
+This project was generated with `@osdk/create-app` and demonstrates using the OSDK package `@fake/sdk` with React on top of Next.js. Check out the [Next.js](https://nextjs.org/docs) docs for further configuration.
+
+## Developing
+
+Run the following command or equivalent with your preferred package manager to start a local development server on `http://localhost:8080`:
+
+```sh
+npm run dev
+```
+
+Development configuration is stored in `.env.development`.
+
+In order to make API requests to Foundry, a CORS proxy has been set up for local development which may be removed if the stack is configured to allow `http://localhost:8080` to load resources. The configured OAuth client must also allow `http://localhost:8080/auth/callback` as a redirect URL.
+
+## Deploying
+
+Run the following command or equivalent with your preferred package manager to create a production build of your application:
+
+```sh
+npm run build
+```
+
+Production configuration is stored in `.env.production`.
+
+If you did not fill in the URL your production application will be hosted on you will need to fill in the `NEXT_PUBLIC_FOUNDRY_REDIRECT_URL` in `.env.production`.
+
+In order to make API requests to Foundry, CORS must be configured for the stack to allow the production origin to load resources. The configured OAuth client must also allow the production origin auth callback as a redirect URL.

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/foundry.config.json

@@ -0,0 +1,11 @@
+{
+  "foundryUrl": "https://example.palantirfoundry.com",
+  "site": {
+    "application": "ri.third-party-applications.main.application.fake",
+    "directory": "./out",
+    "autoVersion": {
+      "type": "git-describe",
+      "tagPrefix": ""
+    }
+  }
+}

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/next.config.js

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false,
+  output: "export",
+  // Rewrites are used to proxy requests during local development only for CORS
+  // and will warn when using this feature together with export.
+  rewrites: () => [
+    {
+      source: "/:prefix(multipass/api|api)/:path*",
+      destination: "https://example.palantirfoundry.com/:prefix/:path*",
+    },
+  ],
+};
+
+module.exports = nextConfig;

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "expected-template-next-static-export-cors-proxy",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev -p 8080",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@fake/sdk": "latest",
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.0.4"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4"
+  }
+}

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/src/app/auth/callback/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+import client from "@/lib/client";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+/**
+ * Component to render at `/auth/callback`
+ * This calls signIn() again to save the token, and then navigates the user back to the home page.
+ */
+function AuthCallback() {
+  const [error, setError] = useState<string | undefined>(undefined);
+  const router = useRouter();
+
+  // This effect conflicts with React 18 strict mode in development
+  // https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development
+  useEffect(() => {
+    client.auth
+      .signIn()
+      .then(() => router.replace("/"))
+      .catch((e: unknown) => setError((e as Error).message ?? e));
+  }, [router]);
+  return <div>{error != null ? error : "Authenticating…"}</div>;
+}
+
+export default AuthCallback;

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/src/app/globals.css

@@ -0,0 +1,75 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/src/app/layout.module.css

@@ -0,0 +1,11 @@
+.logo {
+  height: 6em;
+  width: auto;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}

packages/create-app/src/__snapshots__/expected-template-next-static-export-cors-proxy/src/app/layout.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import Image from "next/image";
+import css from "./layout.module.css";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Ontology SDK + Next.js",
+  description: "Generated by @osdk/create-app",
+};
+
+function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <div id="root">
+          <a
+            href="https://www.palantir.com/docs/foundry/ontology-sdk/overview/"
+            target="_blank"
+          >
+            <Image
+              src="/palantir.svg"
+              alt="Palantir logo"
+              className={css.logo}
+              width={16}
+              height={16}
+              priority
+            />
+          </a>
+          <a href="https://nextjs.org/" target="_blank">
+            <Image
+              src="/next.svg"
+              alt="Next logo"
+              className={css.logo}
+              width={16}
+              height={16}
+              priority
+            />
+          </a>
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}
+
+export default RootLayout;