POC Typescript project example

.github/workflows/main.yml

@@ -0,0 +1,24 @@
+name: Build Project & Commit
+on:
+  pull_request:
+      types:
+        - closed
+jobs:
+  build:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Build Project
+        uses: actions/setup-node@v3
+        with:
+          node-version: '12.x'
+      - run: npm install
+      - run: npm run build --if-present
+      - name: Commit Changes
+        uses: EndBug/add-and-commit@v9
+        with:
+          add: './dist -f'
+          default_author: github_actor
+          message: 'HubSpot Action: Build Project'
+          pathspec_error_handling: exitImmediately

README.md

@@ -1 +1,16 @@
-# getting-started-project-template
+# getting-started-project-template
+
+This is the Getting Started project for HubSpot developer projects. This repo contains code that is intended to help developers to get up and running with developer projects quickly and easily.
+
+## Requirements
+There are a few things that must be set up before you can make use of this getting started project.
+- You must have an active HubSpot account.
+- You must have the [HubSpot CLI](https://www.npmjs.com/package/@hubspot/cli) installed and set up.
+- You must have access to developer projects (developer projects are not currently available to the public).
+
+## Usage
+The HubSpot CLI is configured to pull from the latest release of this project. To get started, run the following CLI command in your terminal:
+
+`hs project create`
+
+The CLI should walk you throug the rest of the setup flow.

hsproject.json

@@ -1,4 +1,5 @@
 {
   "name": "project_name",
-  "srcDir": "src"
+  "srcDir": "dist",
+  "preUploadScript": "npm run build"
 }

package.json

@@ -0,0 +1,12 @@
+{
+  "devDependencies": {
+    "@types/node": "^18.6.5",
+    "rsync": "^0.6.1",
+    "typescript": "^4.7.4"
+  },
+  "scripts": {
+    "copy-files": "rsync -av --exclude='*.ts' ./project/ dist",
+    "ts-compile": "tsc",
+    "build": "npm run ts-compile && npm run copy-files"
+  }
+}

project/app/app.functions/crm-card.ts

@@ -0,0 +1,63 @@
+// For external API calls
+const axios = require('axios');
+
+exports.main = async (
+  context: Context,
+  sendResponse: (a: FunctionResponse) => void
+) => {
+
+  // Store contact firstname, configured as propertiesToSend in crm-card.json
+  const { firstname } = context.propertiesToSend;
+
+  const introMessage = {
+    type: "text",
+    format: "markdown",
+    text: "_An example of a CRM card extension that displays data from Hubspot, uses ZenQuotes public API to display daily quote, and demonstrates custom actions using serverless functions._",
+  };
+
+  try {
+    const { data } = await axios.get("https://zenquotes.io/api/random");
+
+    const quoteSections = [
+      {
+        type: "tile",
+        body: [
+          {
+            type: "text",
+            format: "markdown",
+            text: `**Hello ${firstname}, here's your quote for the day**!`
+          },
+          {
+            type: "text",
+            format: "markdown",
+            text: `**Quote**: ${data[0].q}`
+          },
+          {
+            type: "text",
+            format: "markdown",
+            text: `**Author**: ${data[0].a}`
+          }
+        ]
+      },
+      {
+        type: "button",
+        text: "Get new quote",
+        onClick: {
+          type: "SERVERLESS_ACTION_HOOK",
+          serverlessFunction: "crm-card"
+        }
+      }
+    ];
+
+    sendResponse({ sections: [introMessage, ...quoteSections] });
+  } catch (error) {
+    // "message" will create an error feedback banner when it catches an error
+    sendResponse({
+      message: {
+        type: 'ERROR',
+        body: `Error: ${error.message}`
+      },
+      sections: [introMessage]
+    });
+  }
+};

src/app/app.json → project/app/app.json

@@ -1,6 +1,6 @@
 {
-  "name": "App",
-  "description": "",
+  "name": "Example App",
+  "description": "An example private app that contains a single CRM card extension.",
   "scopes": [
     "crm.objects.contacts.read",
     "crm.objects.contacts.write"
@@ -10,7 +10,8 @@
     "crm": {
       "cards": [
         {
-          "file": "./crm-card.json"
+          "file": "./crm-card.json",
+          "version": "2"
         }
       ]
     }

project/app/crm-card.json

@@ -0,0 +1,17 @@
+{
+  "type": "crm-card",
+  "version": "2",
+  "data": {
+    "title": "Example CRM Card",
+    "fetch": {
+      "targetFunction": "crm-card",
+      "objectTypes": [
+        {
+          "name": "contacts",
+          "propertiesToSend": ["firstname"],
+          "actions":[]
+        }
+      ]
+    }
+  }
+}

project/types/main.d.ts

@@ -0,0 +1,14 @@
+// Context types
+interface PropertiesToSend {
+  firstname: String;
+}
+
+interface Context {
+  propertiesToSend: PropertiesToSend;
+}
+
+// Function Response types
+interface FunctionResponse {
+  sections?: Array<object>;
+  message?: { type: string; body: string };
+}

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+      "outDir": "dist",
+      "rootDir": "./project"
+  }
+}