fix: add frontendless flag [EXT-6292] (#2423)

michaelpineirocontentful · web-flow · commit 7574af9d0e8e · 2025-04-02T08:48:42.000-06:00
* fix: add frontendless flag [ext-6292]

- added frontendless flag (short circuits function-template generation)

fix: add frontendless flag [ext-6292]

fix: Wording and renamed flag to `--skip-ui`

* fix: remove console log

* fix: add frontendless flag [ext-6292]

- added frontendless flag (short circuits function-template generation)

fix: add frontendless flag [ext-6292]

fix: Wording and renamed flag to `--skip-ui`

* fix: remove console log

* fix: app-scripts version

* chore: Update README's for CCA and added generate-function to app-scripts README
diff --git a/packages/contentful--app-scripts/README.md b/packages/contentful--app-scripts/README.md
@@ -60,6 +60,40 @@ interface Script<Result, Options> {
 >
 > Both interactive and nonInteractive version of the same script is meant to return the same result.
 
+### Generate Function
+Allows generating a new function template from our [function examples](https://github.com/contentful/apps/tree/master/function-examples). Automatically updates `contentful-app-manifest.json` and merges scripts/dependencies from `package.json` into existing project.
+
+#### Interactive mode:
+
+In the interactive mode, the CLI will ask for all required options.
+
+> **Example**
+>
+> ```shell
+> $ npx --no-install @contentful/app-scripts generate-function
+> ```
+
+#### Non-interactive mode:
+
+When passing the `--ci` argument the command will fail when the required variables are not set as arguments.
+
+> **Example**
+>
+> ```shell
+> $ npx --no-install @contentful/app-scripts generate-function --ci \
+>     --name <name> \
+>     --example <example> \
+>     --language <javascript/typescript> \
+> ```
+
+**Options:**
+
+| Argument            | Description                                                                                                                                | Default value        |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- |
+| `--name`      | The name of your function.                                                                                      |                      |
+| `--example` | The name of the example as listed in our [function examples](https://github.com/contentful/apps/tree/master/function-examples)                                                                                                            |                      |
+| `--language`   | Choice of javascript or typescript                                                                                          |                      |
+
 ### Create App Definition
 
 Allows creating a new [AppDefinition](https://www.contentful.com/developers/docs/extensibility/app-framework/app-definition/)
diff --git a/packages/contentful--create-contentful-app/README.md b/packages/contentful--create-contentful-app/README.md
@@ -96,6 +96,7 @@ Options:
   -s, --source <url>                            provide a template by its source repository.
                                                 format: URL (HTTPS or SSH) or vendor:user/repo (e.g., github:user/repo)
   -f, --function <function-template-name>       include the specified function template
+  --skip-ui                                     use with --function to clone the template without a user interface (UI).
   -h, --help                                    shows all available CLI options
 ```
 
diff --git a/packages/contentful--create-contentful-app/package-lock.json b/packages/contentful--create-contentful-app/package-lock.json
diff --git a/packages/contentful--create-contentful-app/src/index.ts b/packages/contentful--create-contentful-app/src/index.ts
@@ -15,6 +15,7 @@ import { CREATE_APP_DEFINITION_GUIDE_URL, EXAMPLES_REPO_URL } from './constants'
 import { getTemplateSource } from './getTemplateSource';
 import { track } from './analytics';
 import { generateFunction } from '@contentful/app-scripts';
+import fs from 'fs';
 
 const DEFAULT_APP_NAME = 'contentful-app';
 
@@ -99,16 +100,43 @@ async function validateAppName(appName: string): Promise<string> {
 
 async function initProject(appName: string, options: CLIOptions) {
   const normalizedOptions = normalizeOptions(options);
-
   try {
     appName = await validateAppName(appName);
 
     const fullAppFolder = resolve(process.cwd(), appName);
 
     console.log(`Creating a Contentful app in ${highlight(tildify(fullAppFolder))}.`);
 
-    const isInteractive =
-      !normalizedOptions.example &&
+    if (normalizedOptions.function && normalizedOptions.skipUi) {
+      await addFunctionTemplate(fullAppFolder);
+    } else {
+      await addAppExample(fullAppFolder);
+    }
+
+    updatePackageName(fullAppFolder);
+
+    const useYarn = normalizedOptions.yarn || detectManager() === 'yarn';
+
+    wrapInBlanks(
+      highlight(
+        `---- Installing the dependencies for your app (using ${chalk.cyan(
+          useYarn ? 'yarn' : 'npm'
+        )})...`
+      )
+    );
+    if (useYarn) {
+      await exec('yarn', [], { cwd: fullAppFolder });
+    } else {
+      await exec('npm', ['install', '--no-audit', '--no-fund'], { cwd: fullAppFolder });
+    }
+    successMessage(fullAppFolder, useYarn);
+  } catch (err) {
+    error(`Failed to create ${highlight(chalk.cyan(appName))}`, err);
+    process.exit(1);
+  }
+
+  async function addAppExample(fullAppFolder: string) {
+    const isInteractive = !normalizedOptions.example &&
       !normalizedOptions.source &&
       !normalizedOptions.javascript &&
       !normalizedOptions.typescript &&
@@ -130,47 +158,38 @@ async function initProject(appName: string, options: CLIOptions) {
       if (normalizedOptions.function === true) {
         normalizedOptions.function = 'external-references';
       }
-      process.chdir(fullAppFolder);
-      wrapInBlanks(
-        `To add additional function templates to your app, use ${highlight(
-          chalk.green(`
-          npx @contentful/app-scripts@latest generate-function \\
-            --ci \\
-            --name <name> \\
-            --example <example> \\
-            --language <typescript/javascript>`)
-        )}`
-      );
-      const functionName = normalizedOptions.function
-        .toLowerCase()
-        .replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
-      await generateFunction.nonInteractive({
-        example: normalizedOptions.function,
-        language: normalizedOptions.javascript ? 'javascript' : 'typescript',
-        name: functionName,
-      });
+      await addFunctionTemplate(fullAppFolder);
     }
+  }
 
-    updatePackageName(fullAppFolder);
-
-    const useYarn = normalizedOptions.yarn || detectManager() === 'yarn';
+  async function addFunctionTemplate(fullAppFolder: string) {
+  if (!fs.existsSync(fullAppFolder)) {
+      fs.mkdirSync(fullAppFolder, { recursive: true });
+    }
 
+    process.chdir(fullAppFolder);
     wrapInBlanks(
-      highlight(
-        `---- Installing the dependencies for your app (using ${chalk.cyan(
-          useYarn ? 'yarn' : 'npm'
-        )})...`
-      )
+      `To add additional function templates to your app, use ${highlight(
+        chalk.green(`
+          npx @contentful/app-scripts@latest generate-function \\
+            --ci \\
+            --name <n> \\
+            --example <example> \\
+            --language <typescript/javascript>`)
+      )}`
     );
-    if (useYarn) {
-      await exec('yarn', [], { cwd: fullAppFolder });
-    } else {
-      await exec('npm', ['install', '--no-audit', '--no-fund'], { cwd: fullAppFolder });
+    if (typeof normalizedOptions.function !== 'string') {
+      throw new Error('Function template name is required');
     }
-    successMessage(fullAppFolder, useYarn);
-  } catch (err) {
-    error(`Failed to create ${highlight(chalk.cyan(appName))}`, err);
-    process.exit(1);
+    const functionName = normalizedOptions.function
+      .toLowerCase()
+      .replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+    await generateFunction.nonInteractive({
+      example: normalizedOptions.function,
+      language: normalizedOptions.javascript ? 'javascript' : 'typescript',
+      name: functionName,
+      keepPackageJson: normalizedOptions.skipUi === true
+    } as any);
   }
 }
 
@@ -207,6 +226,7 @@ async function initProject(appName: string, options: CLIOptions) {
       ].join('\n')
     )
     .option('-f, --function [function-template-name]', 'include the specified function template')
+    .option('--skip-ui', 'use with --function to clone the template without a user interface (UI).')
     .action(initProject);
   await program.parseAsync();
 })();
diff --git a/packages/contentful--create-contentful-app/src/types.ts b/packages/contentful--create-contentful-app/src/types.ts
@@ -6,6 +6,7 @@ export type CLIOptions = Partial<{
   source: string;
   example: string;
   function: string | boolean;
+  skipUi: boolean;
 }>;
 
 export const ContentfulExample = {
diff --git a/packages/create-contentful-app/README.md b/packages/create-contentful-app/README.md
@@ -86,5 +86,6 @@ Options:
   -s, --source <url>                            provide a template by its source repository.
                                                 format: URL (HTTPS or SSH) or vendor:user/repo (e.g., github:user/repo)
   -f, --function <function-template-name>       include the specified function template
+  --skip-ui                                     use with --function to clone the template without a user interface (UI).
   -h, --help                                    shows all available CLI options
 ```
