send grid.png

Learn how to integrate and use SendGrid for seamless email communication. Follow our step-by-step guide to set up and optimize your email services.

Using SendGrid for Email Communication | FAB Builder Guide

Using SendGrid for E-Mail communication

#### Generate API Key, Goto Settings > API keys

![](https://storage-for-tutors.ams3.digitaloceanspaces.com/helpdesk/tenant/651456610067eba9d6188aac/content/image/sg_keys.png)

#### **Restricted** Key can be generated with "**Full Access**" to "**Mail Send**"\\

![](https://storage-for-tutors.ams3.digitaloceanspaces.com/helpdesk/tenant/651456610067eba9d6188aac/content/image/sg_permissionskeys.png)

#### Copy the generated key

**Now create Dynamic Templates for the 3 basic email types**

* Invitation
* E-Mail Verification
* Forgot Password

![](https://storage-for-tutors.ams3.digitaloceanspaces.com/helpdesk/tenant/651456610067eba9d6188aac/content/image/sg_dynamic%20templates.png)

#### For Local, Update the Template ID's in .env file&#x20;

#### For Server, Add Environment Variables as&#x20;

```js
SENDGRID_EMAIL_FROM = "no-reply@baryonventures.com"

SENDGRID_KEY = "SG.bc7c5WYzQ6OxLuC0mtk8sA.XXXXXXXXXXXXXXXXXXXXXXyhIkjxVMO9uMJsWOkNgE0"

SENDGRID_TEMPLATE_EMAIL_ADDRESS_VERIFICATION = "d-e3e06979b26d44XXXXXXXXXXXea42a"

SENDGRID_TEMPLATE_INVITATION = "d-485b1XXXXXXXXXXXXX6ed2c69e6ab1"

SENDGRID_TEMPLATE_PASSWORD_RESET = "d-57f6eXXXXXXXXXXXXXXX7cf11c25b"
```

blog-image-6.png

Using SendGrid for Email Communication  Fab Builder Guide.jpg

Github.png

Learn how to set up GitHub access using SSH. This comprehensive guide walks you through the configuration process for secure and efficient code management.

Setup GitHub Access Using SSH | FAB Builder Guide

Setup GitHub access using SSH

**1.** Create an account on GitHub with company provided email

**2.** Open git bash or terminal

The best option to use git bash is to use the terminal provided in VS code

Execute the following command with your email (form which you have signed up)

ssh-keygen -t ed25519 -C "your\_email@coderower.com"

Use the predefined settings, and continue until it gets completed

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/step1.png)

**3.** Now copy the public key generated

cat /c/Users/garim/.ssh/id\_ed25519.pub

**4.** Go to GitHub > Settings > SSH and GPG Keys

**Add a New SSH key**

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/github_ssh_settings.png)

Put "CodeRower Account" in the title

Paste the public key copied above in the key section

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/dithub_add_ssh_key.png)

**-- And it's done.**

Go to the project repository and clone the repo using ssh link, you can find it here

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh_sshclone.PNG)

blog-image-5.png

Setup GitHub Access Using SSH  Fab Builder Guide.jpg

CMS.png

Learn how to set up Google Cloud Platform (GCP) Cloud Storage in FAB Builder. Follow our detailed guide for seamless cloud storage integration and management.

Setup GCP Cloud Storage | FAB Builder Configuration Guide

Setup GCP Cloud Storage

To use Google Cloud Storage, change the FILE\_STORAGE\_PROVIDER variable fo the backend/.env file to use gcp.

FILE\_STORAGE\_PROVIDER = "gcp"

Go to [https://cloud.google.com/](https://cloud.google.com/) and create an account.Create a new project for the development environment.Go to Storage > Browser and create a new Bucket.Save the bucket name on the FILE\_STORAGE\_BUCKET variable. The value must be your bucket-name.

<img height="338" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/Screenshot%202023-05-06%20at%2011.08.08%20PM.png" />

In the example of this image, it will be **fab-builder.appspot.com**.

FILE\_STORAGE\_BUCKET = "fab-builder.appspot.com"

#### The service key

Now our app needs a service key to be able to access the bucket.Create a service account key that has permission to manage Google Cloud Storage buckets. Follow this: [https://cloud.google.com/iam/docs/creating-managing-service-account-keys#creating\_service\_account\_keys](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#creating_service_account_keys).

After you download the JSON file, you will see that it looks like this:

```js
{
"type": "service_account",
"project_id": "...",
"private_key_id": "...",
"private_key": "...",
"client_email": "...",
"client_id": "...",
"auth_uri": "...",
"token_uri": "...",
"auth_provider_x509_cert_url": "...",
"client_x509_cert_url": "..."
}
```

Now we must place this entire file into a single environment variable.If you use VSCode, you can use the join lines command.Now place this line on

theGOOGLE\_CLOUD\_PLATFORM\_CREDENTIALS variable.

GOOGLE\_CLOUD\_PLATFORM\_CREDENTIALS = { "type": "service\_account", "project\_id": "...", "private\_key\_id": "...", "private\_key": "...", "client\_email": "...", "client\_id": "...", "auth\_uri": "...", "token\_uri": "...", "auth\_provider\_x509\_cert\_url": "...", "client\_x509\_cert\_url": "..." }

#### CORS

Install the [https://cloud.google.com/sdk](https://cloud.google.com/sdk).Sign in to your account by calling gcloud auth login .

Create a gcp-cors.json file on the same folder that you are at the command line

```js
[{
"maxAgeSeconds": 3600,
"method": ["GET", "HEAD", "POST", "PUT"],
"origin": ["*"],
"responseHeader": ["Content-Type", "Access-Control-Allow-Origin"]
}]
```

Run this script. Make sure you replace the your-bucket-name by the bucket you created!

gsutil cors set gcp-cors.json gs://your-bucket-name

Done! You are now ready to use the Google Cloud File storage on your project.

blog-image-4.png

Setup GCP Cloud Storage  Fab Builder Configuration Guide.jpg

GCP1.png

Learn how to set up GCP Cloud Run deployment using GitHub Actions. This guide provides a step-by-step approach for seamless cloud deployment automation.

Setting Up GCP Cloud Run Deployment with GitHub Actions

Setting-up GCP Cloud Run deployment using action

**Step 1:** Create GCP project and enable services for Cloud Run

1. Cloud Build API

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gcp-cr-servuce.png)

2\. Cloud Run API

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gcp-rr-servuce.png)

**Step 2:** Create service account on the GCP project

* Create Account from **IAM & Admin** > **Service Account**

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/service%20account%20email.png)

* Grant Permissions

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/service%20account%20permissions.png)

* Generate KEY

<img height="564" width="773" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/generate%20key.png" />

* Download Key as json file

<img height="463" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/downlad%20key.png" />

**Step 3:** Update workflow of GitHub action

* Add Action Secret in the repo

<img height="379" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh%20secrests.png" />

1. GCP\_PROJECT

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/action%20secret%20project%20name.png)

2\. GCP\_APPLICATION - Name of the service you want

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/action%20secret%20application%20name.png)

3\. GCP\_EMAIL

<img height="567" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/action%20secret%20email.png" />

4\. GCP\_CREDENTIALS

* a. Open the Service Account JSON key in VS code
* b. select - all (ctrl +a / cmd + a)
* c. Execute Global Command (ctrl + shift + p / cmd + shift + p) -> "Join Lines"

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/vs%20join%20lines.png)

Add to GitHub action secret as

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh%20secrests%20credentials.png)

* Create custom workflow in GitHub action

<img height="315" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh-custome%20workflow.png" />

* Set the Scripts according branch you want to configure deployment for

<img height="411" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh-workflow%20script.png" />

name: cloudrun-deploy

on:

push:

branches:

\- main

jobs:

setup-build-publish-deploy:

name: Setup, Build, Publish, and Deploy

runs-on: ubuntu-latest

steps:

\- name: Checkout

uses: actions/checkout@master

*# Setup gcloud CLI*

\- uses: google-github-actions/setup-gcloud@v0.6.0

with:

service\_account\_email: ${{ secrets.GCP\_EMAIL }}

service\_account\_key: ${{ secrets.GCP\_CREDENTIALS }}

export\_default\_credentials: true

*# Configure Docker with Credentials*

\- name: Configure Docker

run: |

gcloud auth configure-docker

*# Build the Docker image*

\- name: Build & Publish

run: |

gcloud config set project ${{ secrets.GCP\_PROJECT }}

gcloud builds submit --tag gcr.io/${{ secrets.GCP\_PROJECT }}/${{ secrets.GCP\_APPLICATION }}

gcloud config set run/region us-central1

*# Deploy the Docker image to the GKE cluster*

\- name: Deploy

run: |

gcloud run deploy ${{ secrets.GCP\_APPLICATION }} --image gcr.io/${{ secrets.GCP\_PROJECT }}/${{ secrets.GCP\_APPLICATION }} \\

\--platform managed \\

\--allow-unauthenticated \\

\--memory=1Gi \\

\--region asia-south2

Commit the file

<img height="241" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/commit%20gh.png" />

Push changes and wait for few sconds.

You can navigate to actions and observe action is in progress. take a look at the execution to make sure it won't break.

on successful completion you can see your service is running on GCP cloud run.

<img height="559" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gr%20service.png" />

You can now use the URL to call the service

blog-image-3.png

Setting Up GCP Cloud Run Deployment with GitHub Actions.jpg

stripe.png

Learn how to integrate Stripe payments for subscription plans. Follow our guide to set up and manage recurring payments seamlessly.

Integrate Stripe Payments for Subscription Plans | Guide

Integrate Stripe Payments for Subscription Plans

To integrate Stripe Payments for subscription plans, you can follow these general steps to set up the integration and manage recurring billing. Here’s a simple overview:

### 1. **Create a Stripe Account**

* If you don’t already have one, sign up on the [Stripe website](https://stripe.com/).
* After signing in, you'll need to set up your business and billing details to start using Stripe.

### 2. **Install Stripe SDK**

* Depending on your backend language (Node.js, Python, Ruby, etc.), install the Stripe SDK to your project.

For **Node.js**, run:

```js
npm install stripe
```

### 3. **Set Up Stripe API Keys**

* In your Stripe dashboard, find your **API keys** under **Developers > API keys**.
* Use the **Publishable key** on the front end and the **Secret key** on the back end.

### 4. **Create Subscription Plans in Stripe**

* Go to **Billing > Products** in your Stripe Dashboard.
* Create a new **product** and set up pricing options (monthly, yearly, etc.) that will be offered to customers.

### 5. **Build the Checkout Page**

* On the frontend, integrate Stripe’s **Checkout** to create a subscription process.

Example of creating a checkout session with **Stripe.js**:

HTML

```js
<script src="https://js.stripe.com/v3/"></script>

<button id="checkout-button">Subscribe</button>

<script type="text/javascript">
  var stripe = Stripe('your-publishable-key-here');
  var checkoutButton = document.getElementById('checkout-button');

  checkoutButton.addEventListener('click', function () {
    fetch('/create-checkout-session', { method: 'POST' })
      .then(function (response) { return response.json(); })
      .then(function (sessionId) {
        return stripe.redirectToCheckout({ sessionId: sessionId });
      })
      .then(function (result) {
        if (result.error) {
          alert(result.error.message);
        }
      })
      .catch(function (error) {
        console.error('Error:', error);
      });
  });
</script>
```

### 6. **Create Checkout Session on the Server**

* On the server-side, you’ll create a checkout session to handle the customer’s payment. Here’s an example using **Node.js**:

```js
const stripe = require('stripe')('your-secret-key-here');

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'Subscription Plan',
          },
          unit_amount: 1000, // $10.00
        },
        quantity: 1,
      },
    ],
    mode: 'subscription',
    success_url: 'https://your-site.com/success',
    cancel_url: 'https://your-site.com/cancel',
  });

  res.json({ id: session.id });
});
```

### 7. **Handle Webhooks for Subscription Events**

* Set up **webhooks** to receive notifications when the subscription status changes, such as successful payments, cancellations, or failures.
* Register your webhook URL in the Stripe dashboard under **Developers > Webhooks**.

Example of handling a webhook:

```js
const endpointSecret = 'your-webhook-secret';
const sig = req.headers['stripe-signature'];

try {
  const event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);

  switch (event.type) {
    case 'invoice.payment_succeeded':
      // Handle successful payment
      break;
    case 'invoice.payment_failed':
      // Handle failed payment
      break;
    // Add more event types as needed
  }

  res.json({ received: true });
} catch (err) {
  console.error('Webhook error:', err);
  res.status(400).send('Webhook error');
}

```

### 8. **Manage Customer Subscriptions**

* You can use Stripe’s dashboard or API to manage subscriptions, such as upgrading, downgrading, or canceling the subscription.

### 9. **Display Subscription Details to Customers**

* After the customer subscribes, use the **Stripe API** to fetch the subscription details and display it on their profile or dashboard.

By following these steps, you'll be able to integrate Stripe Payments with subscription plans in your system.

blog-image-2.png

Integrate Stripe Payments for Subscription Plans  Guide.jpg

flutter.png

Learn how to initialize platforms in your Flutter application. This guide provides step-by-step instructions for setting up and configuring platform support.

Initialize Platforms in Flutter Application | FAB Builder

Initialise Platforms in Flutter Application

Initialize Platforms in Flutter Application  Fab Builder.jpg

Explore the FAB Builder Knowledge Base for expert guides, solutions, tutorials & FAQs. Get the support you need to master our tools and optimize your projects.

Fab Builder

Analytics

Customer Experience

Page Pilot

Blogs

Case Studies

Knowledge Base

Hackathon

The quickest way to master Product Growth, Management, and Trends.