Create App

Generates an interactive form and quick pick for any CLI to create an app. Easily Create ab App with Official Starter Templates or Boilerplate using CLI.

Features

• Easy to create a boilerplate app using the Create App: Interactive view.
• Bored of interactive form fields, no worries. Try the new Create App: Quick command to create a app in seconds using vscode quick pick command pallet.
• Add our own custom apps and commands that generates interactive form fields and quick picks.

Default Apps:

  Angular        Django        Electron        ExpressJs        Gatsby        Ionic     
  NestJs        NextJs        Preact        React        React Native        Svelte     
  Vite        VS Code Extension        Vue     

Create App: Interactive

• Give Ctrl/Cmd+Shift+P to open the command pallet and type Create App: Interactive to open the Create App view.
• This opens an interactive ui that prompts you tp pick the app name and provide configurations to create the app.

Create App: Quick

• Give Ctrl/Cmd+Shift+P to open the command pallet and type Create App: Quick to open the Create App quick prompt.
• This provides you the quick command pallet and prompt you the pick the app and its required minimal configurations to create the app.

Custom App Config interface

• Custom app can be provide in two ways.
  • use create-app.settings.customApps setting - provide a direct list of custom apps config.
  • or use create-app.settings.customAppPath setting - provide the json file path or folder path containing list of custom apps config.
  • Click here for more app config references.

interface Tags {
  label: string;
  description: string;
  command?: string; //  Provide a command to execute in terminal on click.
  href?: string; // Provide the link to webpage to redirect on click.
}

interface FieldProps {
  label?: string;
  type?: "textbox" | "checkbox" | "radio" | "browse" | "dropdown";
  prefix?: string; // set prefix of the field value. Ex: "prefix":"--template=\"".
  suffix?: string; // set suffix of the field value. Ex: "prefix":"\"".
  checkedValue?: string | boolean; // used only for field type checkbox.
  unCheckedValue?: string | boolean; // used only for field type checkbox.
  value?: string | boolean; // The prefix and suffix will be added to the value. Ex: --template="value".
  placeholder?: string;
  description?: string;
  order?: number; // mention the field render order position.
  hide?: boolean; // If true it will hide hide the field both in interactive form and Quick pick.
  buttonText?: string; // provide button text if the field type is "browse".
  required?: boolean; // By default all required fields will be prompted on command Create App: Quick.
  pattern?: string; // Set pattern to validate the value.
  prompt?: boolean; // If True this field will be prompted on command Create App: Quick.
  canSelectFile?: boolean; // Set to true or false when field type is "browse".
  canSelectFolder?: boolean; // Set to true or false when field type is "browse".
  errors?: { required?: string; pattern?: string }; // provide the error message.
  options?: Array<{
    // provide options if the field type is "radio" or "dropdown".
    label: string;
    value: any;
  }>;
}

interface AppProps {
  appName: string; // Provide a unique app name. This overrides the app configs if already exist with a same name.
  groupNames: string[]; // Set the Lst of group name. Example: If "App1" has a "Group1" and "App2" also has a "Group1. Then Both "App1" and "App2" will be shown in the "Group1".
  relatedAppNames: string[]; // Set the List of other App Name to navigate.
  commandTemplate: string | string[]; // Provide a command template here. Ex: "commandTemplate": "ng new ${fields.appId} --defaults" or "ng new ${fields['*']} --defaults".
  fields?: Record<string, FieldProps>; // Provide the app configuration to generate a app form fields. Ex: "fields": { "appId": { "type": "textbox", "required": true, value: "hello-world" } }.
  description?: string; // This description will be shown below the About section in the right side of the form.
  order?: number; // Provide the App order to display in the apps list.
  hide?: boolean; // If true this app will not be shown in both interactive and quick commands.
  logoPath?: string; // Provide the app logo path. If not provide it will show the create app logo.
  prerequisites?: Tags[]; // Provide the list of prerequisites commands and site links.
  additionalCommands?: Tags[]; // Provide the additional commands to execute in terminal.
  resources?: Tags[]; // List of links to refer the app.
  tags?: string[]; // Provide the list of stings that helps to find the app.
}

Substitution tokens

commandTemplate helps to generate the cli command. You can use the following substitution tokens in commandTemplate strings:

• ${fields} - get the field values.
• ${workspaceFolder} alias ${ced} - get the current working directory or a current workspace folder.
• ${workspaceFolderBasename} - get the current workspace folder base name.
• ${execPath} - get the command execution folder path.
• ${execPathBasename} - get the command execution folder path base name.
• ${env} - get the object of process.env. Ex: "${env.NODE_ENV}"

fields token

{
  "commandTemplate": [
    "npm install -g @angular/cli;" // Add semicolon (;) to end the command. This adds the new line after the semicolon.
    "ng new ${fields.appId} ${fields['template']};", // populates the value of the specified field name.
    "ng new ${fields.get('appId', 'template')};", // populates the value of the specified field name using get method.
    "ng new fields.get('*');", // populates all field values.
    "ng new ${fields.getExcept('appId', 'template')};", // populates all the field values except the given field names.
    "${fields.openInVsCode ? `code ${fields.appId};` : ''}" // conditionally updated the command based on other field values.
  ]
}