Skip to content

Commit

Permalink
Merge branch 'main' into FRI-224_Build-Component-Library-and-Publish
Browse files Browse the repository at this point in the history
  • Loading branch information
d-klotz committed Aug 8, 2024
2 parents e6fe463 + 9bc9921 commit feba909
Show file tree
Hide file tree
Showing 40 changed files with 2,113 additions and 4,158 deletions.
9 changes: 9 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,15 @@
"contributions": [
"test"
]
},
{
"login": "FerRiffel-LeftHook",
"name": "Fer Riffel",
"avatar_url": "https://avatars.githubusercontent.com/u/146733776?v=4",
"profile": "https://github.com/FerRiffel-LeftHook",
"contributions": [
"doc"
]
}
],
"contributorsPerLine": 7
Expand Down
45 changes: 45 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,48 @@
# v0.14.0 (Tue Aug 06 2024)

:tada: This release contains work from new contributors! :tada:

Thanks for all your work!

:heart: Daniel Klotz ([@d-klotz](https://github.com/d-klotz))

:heart: Fer Riffel ([@FerRiffel-LeftHook](https://github.com/FerRiffel-LeftHook))

#### 🚀 Enhancement

- `@friggframework/devtools`
- CLI for Frigg - Install command for now [#322](https://github.com/friggframework/frigg/pull/322) ([@seanspeaks](https://github.com/seanspeaks))

#### 🐛 Bug Fix

- `@friggframework/core`, `@friggframework/devtools`
- Add READMEs that will need updating, but for version releasing [#324](https://github.com/friggframework/frigg/pull/324) ([@seanspeaks](https://github.com/seanspeaks))
- small update to integration testing / tooling [#304](https://github.com/friggframework/frigg/pull/304) ([@MichaelRyanWebber](https://github.com/MichaelRyanWebber))
- `@friggframework/core`, `@friggframework/test`
- chore: bump deprecated npm package versions [#323](https://github.com/friggframework/frigg/pull/323) ([@d-klotz](https://github.com/d-klotz) [@seanspeaks](https://github.com/seanspeaks))

#### ⚠️ Pushed to `main`

- GITBOOK-22: Tom's Aug 4 changes ([@tomlefthook](https://github.com/tomlefthook))
- GITBOOK-21: Small update for ConnectWise and QBO ([@seanspeaks](https://github.com/seanspeaks))
- GITBOOK-20: Updates in Quick Start Tutorial & Create Frigg App ([@seanspeaks](https://github.com/seanspeaks))
- GITBOOK-14: Fer's Module Definition and Functions ([@FerRiffel-LeftHook](https://github.com/FerRiffel-LeftHook))
- GITBOOK-16: API Module library + sections ([@FerRiffel-LeftHook](https://github.com/FerRiffel-LeftHook))
- GITBOOK-11: Fer's Deployment and Secrets changes ([@seanspeaks](https://github.com/seanspeaks))
- GITBOOK-17: Add a short FYI of Frigg's documentation at the top ([@seanspeaks](https://github.com/seanspeaks))
- GITBOOK-12: Fer's Definition of Terms ([@seanspeaks](https://github.com/seanspeaks))
- GITBOOK-18: Added Core Concepts ([@seanspeaks](https://github.com/seanspeaks))

#### Authors: 5

- [@MichaelRyanWebber](https://github.com/MichaelRyanWebber)
- Daniel Klotz ([@d-klotz](https://github.com/d-klotz))
- Fer Riffel ([@FerRiffel-LeftHook](https://github.com/FerRiffel-LeftHook))
- Sean Matthews ([@seanspeaks](https://github.com/seanspeaks))
- Tom Elliott ([@tomlefthook](https://github.com/tomlefthook))

---

# v1.1.8 (Thu Jul 18 2024)

:tada: This release contains work from a new contributor! :tada:
Expand Down
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Frigg Integration Framework
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-26-orange.svg?style=flat-square)](#contributors-)
[![All Contributors](https://img.shields.io/badge/all_contributors-27-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

<img src="docs/FriggLogo.svg" style="width:250px">
Expand Down Expand Up @@ -92,6 +92,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
<td align="center"><a href="https://github.com/Jo-lefthook"><img src="https://avatars.githubusercontent.com/u/139414886?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jo-lefthook</b></sub></a><br /><a href="https://github.com/friggframework/frigg/commits?author=Jo-lefthook" title="Code">💻</a></td>
<td align="center"><a href="http://nmilcoff.com/"><img src="https://avatars.githubusercontent.com/u/12127846?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nmilcoff</b></sub></a><br /><a href="https://github.com/friggframework/frigg/commits?author=nmilcoff" title="Documentation">📖</a> <a href="https://github.com/friggframework/frigg/commits?author=nmilcoff" title="Tests">⚠️</a> <a href="https://github.com/friggframework/frigg/commits?author=nmilcoff" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/igorschechtel"><img src="https://avatars.githubusercontent.com/u/21978920?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Igor Schechtel</b></sub></a><br /><a href="https://github.com/friggframework/frigg/commits?author=igorschechtel" title="Tests">⚠️</a></td>
<td align="center"><a href="https://github.com/FerRiffel-LeftHook"><img src="https://avatars.githubusercontent.com/u/146733776?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fer Riffel</b></sub></a><br /><a href="https://github.com/friggframework/frigg/commits?author=FerRiffel-LeftHook" title="Documentation">📖</a></td>
</tr>
</table>

Expand Down
8 changes: 4 additions & 4 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ In general, there are four main areas of the docs, and four supplemental section

<details>

<summary>How does Frigg define "Integration"?</summary>
<summary>How does Frigg define "Integration?"</summary>

Application Programming Interfaces (APIs) are everywhere in software development. They can be made for SDKs, hardware, internal modules, HTTP requests to external systems, and more.

Expand Down Expand Up @@ -126,11 +126,11 @@ Read more about Frigg on [Wikipedia](https://en.wikipedia.org/wiki/Frigg).

## Frigg Explained to Developers

Simply put- Frigg is what you would build to rapidly develop integrations if you had unlimited resources and time. The added difference is the promise of Open Source-- not just your company, but a community of developers collaborating to solve the same core set of problems over and over again. Something you could never do internally.
Frigg is the framework you would have built to develop integrations, if you had unlimited resources and time. The added difference is the promise of Open Source-- i.e. a community of developers collaborating to solve the same core set of problems over and over again. This is something you could never do internally.

The Frigg Framework is an opinionated set of development tools, modules, classes, and plugins built with modern software development teams in mind. The aim of the framework is to have you up and running out of the box with a flexible set of tools to help rapidly add integrations to your software that your end users can manage individually without any intervention.
The Frigg Framework is an opinionated set of development tools, modules, classes, and plugins built with modern software development teams in mind. Frigg will have you up and running out-of-the-box with a flexible set of tools to help rapidly add integrations that your end users can self-serve.

The framework handles integration listing, authentication, and configuration "out of the box," built on a scalable serverless architecture with a growing library of prebuilt API Modules to greatly reduce time to wow. Along with the core "out of the box" features, the framework contains primitives to help address and flex to any use case.
Frigg handles integration listing, authentication, and configuration out-of-the-box, built on a scalable serverless architecture. It includes a growing library of prebuilt API Modules to greatly reduce time to "wow." Along with the core "out of the box" features, the framework contains primitives to help address and flex to any use case.

{% hint style="info" %}
#### A Note on Basic Architecture
Expand Down
4 changes: 2 additions & 2 deletions docs/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

* [Learning Frigg](tutorials/overview.md)
* [Quick Start Tutorial](tutorials/quick-start/README.md)
* [Initialize With Create Frigg App](tutorials/quick-start/create-frigg-app.md)
* [Initialize With Create Frigg App (CFA)](tutorials/quick-start/create-frigg-app.md)
* [Configuration](tutorials/quick-start/configuration.md)
* [Start Your Application](tutorials/quick-start/start-your-application.md)
* [Start Your Frigg App](tutorials/quick-start/start-your-frigg-app.md)
* [Connecting and Seeing Live Data](tutorials/quick-start/connecting-and-seeing-live-data.md)
* [Updating the Integration Logic](tutorials/quick-start/updating-the-integration-logic.md)
* [Advanced Tutorials](tutorials/advanced-tutorials/README.md)
Expand Down
16 changes: 12 additions & 4 deletions docs/tutorials/quick-start/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@

### Getting Started

Aloha! Ready to dive into the world of Frigg? Let’s get you up and running by creating a HubSpot integration (or what HubSpot calls an "app"). This exercise will guide you through setting up a Frigg app locally, integrating it with HubSpot, and seeing the magic happen in real-time. Don’t worry if you’re not a developer, we’ve got you covered with step-by-step instructions. Let's roll!
Aloha! Ready to dive into using Frigg? Let’s get a HubSpot integration (or what HubSpot calls an "app") up and running quickly. \
\
This exercise will guide you through setting up a Frigg app locally, integrating it with HubSpot, and experiencing the magic in real-time.&#x20;

IMPORTANT: Running Create Frigg App requires several software development packages to be installed locally on your computer. While each prerequisite tool is fairly easy to install and configure, you may want to have an engineer available for troubleshooting.

### Prerequisites

Expand All @@ -16,10 +20,14 @@ Before we start, make sure you have:

### Overview

Running the `create-frigg-app` command will generate a Frigg application that, within a few minutes, is deployable to your own infrastructure accounts. Let's get started with `Create Frigg App` and unpack the magic as we go.
Running the `create-frigg-app` command will generate a Frigg application that is deployable to your own infrastructure accounts in minutes.

Let's get started with `Create Frigg App` and unpack the magic as we go.

{% hint style="info" %}
**What is HubSpot and why use it in our tutorial?**
**What is HubSpot and why use it in this tutorial?**

HubSpot is a popular marketing and CRM tool that helps businesses manage customer interactions. In this exercise, we use HubSpot to demonstrate how Frigg connects with external APIs. Setting up a HubSpot app lets you see how to connect, authenticate, and pull data from an external service, making it a great way to learn integration basics.
HubSpot is a popular marketing and CRM tool that helps businesses manage customer interactions. In this exercise, we use HubSpot to demonstrate how your Frigg App connects with external APIs.\
\
Setting up a HubSpot app lets you see how to connect, authenticate, and pull data from an external service. HubSpot provides an easy way understand integration basics in a common context.
{% endhint %}
14 changes: 7 additions & 7 deletions docs/tutorials/quick-start/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Frontend

Now, still from your terminal, you will have to navigate to the Frontend Directory and set up your own config files for the frontend of your application. Copy the `.env.example` manually or with this command:
From your terminal, navigate to the Frontend Directory and set up your own config files for the frontend of your Frigg app. Copy the `.env.example` manually or with this command:

```
cd frontend
Expand All @@ -11,7 +11,7 @@ cp .env.example .env

## Backend

Currently, the configuration of the app is managed in two places for the backend. You can see the backend configuration here: `backend/src/configs/*.json` but you will also need a `.env` file in `/backend`. To set it up, use the following command:
Configuration of the app is currently managed in two places for the backend. You can see the backend configuration here: `backend/src/configs/*.json` but you will also need a `.env` file in `/backend`. To set it up, use the following command:

```
cd backend
Expand All @@ -20,7 +20,7 @@ cp .env.example .env

### Start MongoDB with Docker

Also, within the backend directory of your project, run the Docker command:
Within the backend directory of your project, now run the Docker command:

```
npm run docker:start
Expand All @@ -30,12 +30,12 @@ This will set up a MongoDB instance locally with the necessary configurations.

### Set up your HubSpot App

You also need to add your HubSpot credentials into the `dev.json` file. To do that, go to your HubSpot account, create a new HubSpot App and explore a bit as you'd like.\
Inside your App, head to the "Auth" Tab, next to "App Info", where your can find your app settings.&#x20;
You also need to add your HubSpot credentials into the `dev.json` file. Go to your HubSpot account and create a new HubSpot App, and explore HubSpot if you're not familiar with it.\
Inside your HubSpot App, head to the "Auth" Tab, next to "App Info," where your can find your app settings.&#x20;

<figure><img src="../../.gitbook/assets/image (5).png" alt=""><figcaption><p>HubSpot's Auth tab for your app</p></figcaption></figure>

From there, copy your Client ID and Client Secret into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields in the `dev.json` file.\
Now copy your Client ID and Client Secret into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields in the `dev.json` file.\
Add `oauth` to the HUBSPOT\_SCOPE array in `dev.json`. In the same tab, click the `+Add new scope` button, search for and add the scopes listed in your `dev.json` file.

<figure><img src="../../.gitbook/assets/image (6).png" alt=""><figcaption><p>Your scopes should look like this after adding them</p></figcaption></figure>
Expand All @@ -48,4 +48,4 @@ Save your changes in both the `dev.json` file and HubSpot Auth settings.

Finally, from HubSpot's Developer home, create a new developer test account. This will prepare your app for integration and testing.

With all the configs set up, you're now ready to continue and start your Frigg application.
With all these settings configured, you're now ready to start your Frigg application.
31 changes: 16 additions & 15 deletions docs/tutorials/quick-start/connecting-and-seeing-live-data.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,41 @@
# Connecting and Seeing Live Data

If you haven't already, select the "Create account (demo user)" option from the Login menu, a new user will be created for you with the pre-populated data you see on screen.\
After getting a successful confirmation, you're able to log in as the Demo User.
If you haven't already, select the "Create account (demo user)" option from the Login menu. A new user will be created for you with the pre-populated data you see on screen.\
After receiving a successful confirmation message, you're now able to log in as the Demo User.

You will see the Dashboard with HubSpot as an available connection.
You will see a directory with HubSpot as an available connection.

<figure><img src="../../.gitbook/assets/image (9).png" alt="" width="563"><figcaption><p>Your Dashboard in Frigg with your available integrations</p></figcaption></figure>

Click on the Connect button next to it and follow HubSpot's authorization flow.

You should now see a connected HubSpot card. Now it's time to see your app in action with live data from HubSpot!
When finished, you should see a connected HubSpot card. Now it's time to see your app in action with live data from HubSpot!

### Facing the No data available error
### "No Data Available" error

Select "Get Sample Data" from the HubSpot app dropdown menu to see live data fetched from your test account, you might see a "No data available" message. This is totally normal given that we didn't add any into your HubSpot account, so we have nothing there to fetch.
Select "Get Sample Data" from the HubSpot app dropdown menu to see live data fetched from your test account.

<figure><img src="../../.gitbook/assets/image (10).png" alt="" width="563"><figcaption><p>Oops! Looks like we forgot to add some test data</p></figcaption></figure>
Note that you might receive a "No data available" message. This is totally normal, given that we didn't add any info to your HubSpot account. There's nothing for our integration to fetch (yet).

### Adding Test Data
<figure><img src="../../.gitbook/assets/image (10).png" alt="" width="563"><figcaption><p>Oops! Looks like we forgot to add some test data to HubSpot</p></figcaption></figure>

To fix this, let's add some test data to your HubSpot account:
### Adding Test Data to HubSpot

From your HubSpot dashboard you should go to the "Deals" section in the CRM menu.\
Click "Create deal" to manually add details and save, or use the "Import" option to upload a CSV file with your test data.
To fix this, let's add some test data to your HubSpot account. From your HubSpot dashboard, you should go to the "Deals" section in the CRM menu.\


Click "Create Deal" to manually add details and save, or use the "Import" option to upload a CSV file with test data.

<figure><img src="../../.gitbook/assets/image (11).png" alt=""><figcaption><p>You can find the Deals section inside the CRM menu</p></figcaption></figure>

{% hint style="info" %}
For more detailed instructions on how to add data, you can visit the [HubSpot documentation](https://developers.hubspot.com/docs/api/crm/deals).
For more detailed instructions on how to add test data, visit the [HubSpot documentation](https://developers.hubspot.com/docs/api/crm/deals).
{% endhint %}

Once you've added the test data, refresh the page and select "Get Sample Data" from the HubSpot app dropdown menu.\
Now you should see your created deals. Seeing the data you just entered confirms that everything is connected and working correctly!
Once you've added test data, refresh the page and select "Get Sample Data" again. Now you should see Deals data displayed in your app. This confirms that everything is connected and working correctly!

<figure><img src="../../.gitbook/assets/image (12).png" alt="" width="563"><figcaption><p>We see you, Antique Star Wars Droids collection!</p></figcaption></figure>

***

And that’s it! You’ve successfully created and configured your Frigg app with HubSpot and are seeing the test data you added during the configuration process. Time to explore and have fun with your new setup!
And that’s it! You’ve successfully created and configured your Frigg app with HubSpot. Time to explore and have fun with your new setup!
10 changes: 6 additions & 4 deletions docs/tutorials/quick-start/create-frigg-app.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# Initialize With Create Frigg App
# Initialize With Create Frigg App (CFA)

### Use `npx` to Create the App

Open your terminal and cd to a location you want to install your Frigg application, then run the following command to create a new Frigg app, replacing `[my-app-integrations]` with your desired app name:
Be sure to double-check that you have all the [prerequisite tools installed](./) before attempting this tutorial.

Open your terminal and cd to a location where you want to install your Frigg application. Then run the following command to create a new Frigg app, replacing `[my-app-integrations]` with your desired app name:

```
npx create-frigg-app [my-app-integrations]
Expand All @@ -12,10 +14,10 @@ npx create-frigg-app [my-app-integrations]
**Note on naming:** We recommend naming your Frigg app something descriptive that reflects its purpose as a microservice that powers integrations; For example, "my-app-integrations" is a good fit.
{% endhint %}

Navigate to your newly created app directory using the following command:
Now navigate to your newly created app directory using the following command:

```
cd [my-app-integrations]
```

Congrats! You've just successfully scaffolded and installed your Frigg application. You can now continue with further configuration and customization.
Congrats! You've just successfully scaffolded and installed your Frigg app. Continue with further configuration and customization.
Loading

0 comments on commit feba909

Please sign in to comment.