DEV Community: Leonidas Costas

Delayed and scheduled payments with Stripe

Leonidas Costas — Fri, 03 Sep 2021 14:24:56 +0000

Hi Sparta!

In this article I will share with you how to execute delayed or scheduled payments in your React and NestJS app 💳

The full source code and the documentation is available on GitHub or on FMP 🙂

This payment module will be added top of the React/Node/MySQL starter. This starter has already been presented to you in this article.

How does it work ?

We'll use Stripe API in order to:

1. Save customer's payment credentials
2. Execute an offline payment when we want (by triggering the backend from a UI in the front, by adding a cron in the backend...).

For the first step, we'll use Stripe's SetupIntent that are meant to save credit card info that can be later used as we wish.

For the second step, we'll use Stripe's PaymentIntent that are meant to execute a payment instantly.

High picture of the workflow

1. User loads the page where he can save it's card.
2. Frontend asks backend to create a Stripe SetupIntent in order to let the user save it's payment credentials.
3. Backend creates the SetupIntent and returns the corresponding one time secret to the frontend.
4. User fills all info about it's card (number, CVV...) and does the 3DS authentication if needed. He press the "save my card" buttton.
5. Backend is receiving several notifications about the SetupIntent status thanks to a Webhook. It saves all payment status in database as logs records.
6. If the SetupIntent has a correct status (received from the webhook), the stripeCustomer is saved in database in the User table (so we can retrieve all it's card info later).
7. When you then want to trigger an offline payment for this user, backend only needs to ask stripe all card infos for this particular stripeCustomer. It then triggers a PaymentIntent with all infos previously retrieved, and... TADA ! The delayed payment is done 🎉

Step by step guide

Step 1 - Backend

Add folder backend/stripe in your backend/src/api.
Don't forget to add StripeModule in the imports of the app.module.

Add folder backend/payment in your backend/src/api.

Don't forget to add PaymentModule in the imports of the app.module.

In the backend folder, install following dependency:
npm install stripe@8.132.0

Step 2 - Frontend

Add folder frontend/screenExample in your frontend/src/pages.

Add following code in pages.navigation.tsx :

    <Route exact path="/example" component={PaymentSiScreen}/>

Add folder frontend/services/stripe.service.ts in your frontend/services.

In the frontend folder, install following dependency:
npm install @stripe/stripe-js@1.11.0

Step 3 - Stripe credentials

Backend:
Update stripeSecretKey in StripeController and StripeService with the secretKey from your stripe account.

Frontend:
Add stripe public key in PaymentSiScreen :

    stripeSecretKey: "pk_test_XxxXXXXxXXXXXXXxXXxxxxxXxxXXXXxXXXXXXXxXXxxxxxXxxXXXXxXXXXXXXxXXxxxxxXxxXXXXxXXXXXXXxXXxxxxx"

Step 4 - Stripe webhook

In your Stripe account, create a webhook and publish it to production. Your webhook setup will need following events:

setup_intent.created
setup_intent.requires_action
setup_intent.canceled
setup_intent.setup_failed
setup_intent.succeeded
payment_intent.created
payment_intent.requires_action
payment_intent.requires_capture
payment_intent.canceled
payment_intent.payment_failed
payment_intent.succeeded

Once published, you'll have a webhookSecret available.
You can now update stripeWebhookSecretKey in StripeService with this webhookSecret.

Bonus

If you want to contact your users when they correctly saved their card or when a delayed payment failed, you can use a mailer module and send mail in the webhook function in stripe/stripe.service.ts. This other module is available here.

Conclusion

I hope this module will help you ! Do not hesitate to pin and star on GitHub if you appreciated the article ❤️

Links:

The platform sharing the starter and it's modules: Fast Modular Project
Module "Delayed and scheduled payments" on GitHub.

Automatic Mail Campaign Creation with Mailjet

Leonidas Costas — Thu, 02 Sep 2021 14:37:57 +0000

Hi Sparta!

In this article I will share with you how to create marketing campaigns, newsletters... automatically in your NestJS backend 💌

The full source code and the documentation is available on GitHub or on FMP 🙂

This newsletter / marketing campaign module will be added top of the React/Node/MySQL starter. This starter has already been presented to you in this article.

How does it work ?

We'll use Mailjet's API in order to:

Create a "Contact" for every user of your app
Add them to an already existing ContactList created on Mailjet side
Update their metadatas (whether or not their profil are verified)
Create campaign draft
Send a test mail to a dev adress in order to preview the futur campaign that will be sent
Schedule the campaign for all user's missing the verification of their profil

High picture of the workflow

A user sign up to your web app.
A user is created in databse and on Mailjet side as a "Contact" (name, email, hasVerifiedProfil)
Every day a 6pm05 we generate automatically a campaign draft to ask for the verification of their account (for user's who haven't done it before).
The campaign is scheduled for 6pm35.
The draft is sent to you, in order to verify their is no issue in content that will be sent to your user. If an issue occurs, you can delete the scheduled campaign in your Mailjet account. You could then retrigger the campaign generation with Postman once the content is corrected.

Step by step guide

1 - Account creation

Create a MailJet account here.

Step 2 - Install mailjet dependency

Install the node-mailjet dependency in the backend directory of your project.

npm install node-mailjet@3.3.1

Step 3 - Mailjet credentials

Add your mailjet API credentials in your environments files (DEV, STAGING & PROD) found in the backend/src/environments directory.

export const environment = {
  ...,
  mailjet: {
    apiKey: '%YOUR_API_KEY%',
    secretKey: '%YOUR_SECRET_KEY%',
    contactListID: TODO_LATER,
  },
  ...
};

Your credentials can be found using this link.

Step 4 - Contact lists config Create two contact lists in your Mailjet account. One will be used in dev env mylist_dev and the other one will be used for production mylist_prod.

To do so, in your Mailjet account : "Contact" > "Contact List" > "Create a contact a list".

Properties of your user should contains at least "email" (string), "name" (string) and hasVerified (boolean).

Once created, the the contactListID in backend/src/environments in the mailjet config.

Step 5 - Segment config
A segment is a subset of contacts from a contact list that matchs your condition on the metadatas of the contact.
In our case, we'll create a segment "verification_not_done" that will contains all contact from mylist_prod having hasVerified properties equal to false.
Step 6 - Mail template config
Create your campaign template with your Mailjet account : "Models" > "My Marketing Models" > "Create a new model".
Once created, copy the ID of the template and set it as value of ACCOUNT_VERIFICATION_TEMPLATE in campaign-templates.enum.ts.

Step 7 - Back

Add folder backend/campaign in your backend/src/api.
Don't forget to add CampaignModule in the imports of the app.module.

Add folder backend/mailer in your backend/src/shared.
Don't forget to add MailerModule in the imports of the app.module.

Step 8 - Contact creation on sign up

When your user sign up, you should create a contact on mailjet side.

To do so, in file backend/src/api/auth.controller.ts add:

import { MailerService } from '../../shared/mailer/mailer.service';

...

    @Post('signup')
    async signUp(@Body() createUserDto: CreateUserDto): Promise<{ success: boolean, token?: string, id?: number }> {

        ...

        const mailjetContact = await this.mailService.createContact(user);

        if (mailjetContact.body.Data[0].ID) {
            console.log("Mailjet contactID", mailjetContact.body.Data[0].ID);
            await this.mailService.addContactToContactList(mailjetContact.body.Data[0].ID);

            await this.usersService.update(user, { contactId: mailjetContact.body.Data[0].ID });
            await this.mailService.updateDefaultContactMetadatas(mailjetContact.body.Data[0].ID, createUserDto.firstname);
        }

You can then verify in your contactList on your mailjet acccount the new user created on sign up.

Step 9 - Automatic campaign creation

Every friday at 6pm05, your campaign will be created, and scheduled at 6pm35 on all users that did not verify their account.

    // Every friday at 6pm05
    @Cron('0 5 18 * * 5', {
        name: 'sendMarketingCampaignVerifyAccount',
        timeZone: 'Europe/Paris',
    })
    async sendMarketingCampaignVerifyAccount() {
        ...
    }

To make the NestJS cron work, please install following dependencies:

    npm install --save @nestjs/schedule
    npm install --save-dev @types/cron

Bonus

To avoid any issue being categorized as "SPAM" you should configure the SPF and DKIM configuration for your sending mail address and your domain : Mailjet profil > "Preferences" > "Domains" > "DKIM/SPF authentication".

Conclusion

I hope this module will help you ! Do not hesitate to pin and star on GitHub if you appreciated the article ❤️

Links:

The platform sharing the starter and it's modules: Fast Modular Project
Module "Automatic campaign Mailjet" on GitHub.

User's location by browser's permission or IP address

Leonidas Costas — Fri, 28 May 2021 16:14:43 +0000

This module allows you to locate your user either by navigator permission, either by IP address.

What does it bring?

(For the browser solution) Navigator permission ask
(For the browser solution) Navigator coordinate ask
(For the IP solution) Retrieving of IP address in the backend
(For the IP solution) Calls to ip-api.com service in order to get the location of a specific IP
3 hours of work saved

Prerequisites

To make this module work, a 13€/month subscription to ip-api service is needed.

Retrieving user’s location with it’s IP address and IP-API

Step 1

We’ll store user’s IP address present in the « x-forwarded-for » field from the HTTP header of its request.

request.ipAddress = request?.headers['x-forwarded-for']?.split(',')[0] || request.connection.remoteAddress

This ip address is now accessible through request.ipAddress, but we’ll create a custom decorator to ease the retrieve of it.

Step 2

Create a custom decorator to get the ipAdress using a decorator instead of accessing directly request.ipAddress:

import { createParamDecorator, ExecutionContext } from '@nestjs/common';

export const IpAddress = createParamDecorator(
    (data: unknown, ctx: ExecutionContext) => {
        const request = ctx.switchToHttp().getRequest();
        return request.ipAddress;
    },
);

Step 3

Create a Controller that uses this custom decorator

Step 4

In your controller, use your service that gets users latitude and longitude from it’s IP (using ip-api service).

        const headers = {
            Accept: "application/json",
            "Content-Type": "application/json"
        };
        const res = await fetch(`https://pro.ip-api.com/json/${ip}?key=[ENTER YOUR KEY HERE]`, {
            method: "get",
            headers
        });
        const json = await res.json();
        return {
            latitude: json.lat,
            longitude: json.lon
        }

Retrieving user’s location with navigator permissions

Step 1

You can use the navigator web api standards to tell the browser to ask for the user to authorize thee usage of it’s location.

export const getGeolocationPermission = async () => {
    const permission = await navigator.permissions.query({
        name: "geolocation"
    });
    return permission.state;
};

Step 2

If the user accepted the prompt, you’ll be able to ask the navigator for its latitude and longitude with the navigator.geolocation.getCurrentPosition() function.

The entire source code and a distance computation between two locations are available here.

You are now free to use those two methods as a way to retrieve user’s location:

either thanks to it’s IP address
either through it’s browser

Conclusion

I hope this module will help you saving some time while trying to implement a system to retrieve the location of your users.
If you have any question, I'll be present as usual in the comment section !

Links:

The platform sharing the starter and it's modules : Fast Modular Project
User's location module open source code here. Do not hesitate to pin and like if you appreciated the article ❤️

SEO and multilingual web app with distinct URLs

Leonidas Costas — Sun, 16 May 2021 09:03:19 +0000

I’ll present you in this article how to have a SEO friendly multilingual web app.

If you want to have worldwide users using your web application, you are at the right place.

As you may know, Google won’t display your website in France if it is written in Russian. Obviously, you’ll need to translate all the pages of your web application for each country targeted. But this is not enough, and here is why I decided to write this article 😃

Even if you have multiple languages available on your website, you must notify Google that you have them.

How ? We’ll see how to use distinct URLs and Hreflang tags.

Prerequisites

You can use this module to learn how SEO works for multilingual website, or just to copy past it in your project to improve your SEO direclty.

Stay SEO friendly

The common solution to translate a web app is to store user’s language in a local storage or a cookie in the browser/device.

This is correct but not SEO friendly at all as Google can't know that you have multiple languages 😢
Indeed, the Google bot gets your pages through a curl command, and does not have any local storage or cookies.

use distincts URLs!

And… distincts URLs comes to the rescue!

You can use them to distinguish your translated pages by:

domain
subdomain
extension
repertory
query

As examples, Twitter uses queries:

https://www.twitter.com?lang=en
https://www.twitter.com?lang=fr

and Wikipedia uses subdomains:

https://en.wikipedia.org/wiki/LinkedIn
https://fr.wikipedia.org/wiki/LinkedIn

Choose the one you prefer, the important point here is to have different URLs 😃

use hreflang!

Hreflang tags are used to specify all the translations available for a page.
It helps Google to understand that your apps has several languages, in addition to the distinct URLs you set up.

The theoretical part is now over, we can move on to the funny part, the implementation 😊
For this part, as it’s more code oriented, everything is available here and on GitHub.

It gives:

the setup of the React router according to your distinct URLs
utils functions
the setup of hreflang tags with react-helmet

Conclusion

Hope you enjoyed the article, do not hesitate to ask if you have any question on the theoretical part or on the implemation steps. I’ll be in the comment section as usual.

Pin & like if you enjoyed this article ! ❤️

Scalable Websockets with AWS API Gateway and AWS Lambda

Leonidas Costas — Fri, 30 Apr 2021 15:52:22 +0000

Hi Sparta!

In this article I will share with you how to add scalable websockets system in your app with AWS API Gateway and AWS Lambda. Websockets are used to implement any real time system in like a chat or a notification system.

Please note that AWS is not mandatory to implement simple websockets, but it gives us the scalability we are looking for if we are dealing with an app with thousands of users.

On my side, I used this module on top of the React/Node/MySQL starter. This starter has already been presented to you in this article.

What does it bring?

Open source code
Documentation and "Quick Start"
Complete integration of websockets in your React / NestJS / MySQL starter (it can be easily adapted to a node backend)
AWS Lambda functions source code
20 hours of work saved :D

Prerequisite

By getting the code here, you'll have the websockets already integrated in the web starter. You'll get a functional project with an authentication and a websocket system in less than 20 minutes :D

Note that using the starter is not mandatory, you can also use the module as standalone. The integration won't be as easy as with the starter, but it should still be simple to integrate it in your already created project :)

Websockets in 3 words

With a standard (REST/SOAP) API, frontend sends information to the server and get a proper answer. This is enough most of the time but it means that the frontend/user need to perform an action to get up to date datas.

Let's imagine a chat where users would have to press a "refresh button" to get new messages displayed... this would be quite annoying. Websockets come to the rescue !

Websocket is a bidirectional connection that you initiate between a server and a client. This connection allows the frontend to speak to the server and vice-versa without any call to an API. If we take back the example of the chat, websockets allow the server to say to the user that he has a new message (without any action from him).

The entire open source code and a step by step integration on the starter is available here.

High level picture of the workflow

The websocket connection will be setup between the client (browser or mobile app) and API Gateway (for sockets). We could have established a websocket connection directly with the backend but this could lead to a shutdown of your API if your server can't scale and if there is too many connections to be maintained. Thanks to API Gateway, the sockets will be handle in a separated server that can scale, independently from your back server.

1) User logs in. He initializes a websocket connection with the API Gateway. The API generates a unique identifier of this connection: connectionId. Once the connection is established, frontend send to the API Gateway (with the socket created) a "connected event". The AWS Lambda that handle the "websocket connection flow" calls our backend endpoint to link this user with this connectionId in our database. The backend saves this infos. For every users connected on our app, we now have one or several connectionId associated.

2) The backend want to send an event to users. For all users, it get their connectionId and ask the API Gateway to send a message to the websocket identified by this connectionId.

3) Users receive the event (without any call to the backend) and adapt their frontend accordingly.

4) A user logs out. This closes the websocket, and notify the API Gateway with a "disconnected event". The AWS Lambda that handle the "websocket disconnection flow" calls our backend endpoint to delete the link between this user and the connectionId in our database. The backend saves this infos.

Configure your AWS API Gateway

1) Create an API Gateway (for sockets) with all default parameters
Add 2 routes:

auth: will be called from the frontend when we receive a new connection
$disconnect: will be called from the frontend when we receive connection closing event

2) Set your API Gateway credentials in the environments variables of your backend:

    ...
    apiGateway: {
      endpoint:
        'https://xxxxxxx.execute-api.eu-west-3.amazonaws.com/env',
      accessKeyId: 'XXXXXXXXXXXXXXXXXX',
      secretAccessKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      region: 'eu-west-3',
    },

3) Set your API Gateway endpoint in the environments variables of your frontend:

socketUrl: "wss://XXXXXXXX.execute-api.eu-west-3.amazonaws.com/env"

Configure your AWS Lambdas

1) Setup the "Connection flow" with AWS Lambda.
Create an AWS Lambda anted websocket-connection and plug it to the auth route of the API Gateway.

In the code of this lambda you should call a backend endpoint we'll create soon. This endpoint will be in charge of saving in database the connectionId of the websocket the user just connected too. Please check here to copy paste the code for this lambda :)

2) Setup the "Disconnection" flow with AWS Lambda.
Create an AWS Lambda anted websocket-disconnection and plug it to the $disconnect route of the API Gateway.

In the code of this lambda you should call a backend endpoint we'll create soon. This endpoint will be in charge of deleting the association between a user and a connectionId in our database. Please check here to copy paste the code for this lambda :)

Setup the websockets in your React frontend

1) Install following package

npm i reconnecting-websocket@4.4.0

2) Init your websocket connection with the API Gateway Socket when the user is connected.

You should establish the connection with the API Gateway thanks to the endpoint stored in your environment variable previously:

        let ws = new ReconnectingWebSocket(
            environment.socketUrl, [], {
            minReconnectionDelay: 500,
            maxReconnectionDelay: 500,
            reconnectionDelayGrowFactor: 1
        });
        ...

You should of course implement:
ws.onopen method: to define what to do when a connection is created.

ws.onmessage method: to define what to do when receiving a new message.

ws.onclose method: to define what to do when a connection is closed.

3) Close the connection when he is loging out: ws.close();

Prepare our NestJS backend for websockets

1) Create a new NestJS module SocketConnectionsModule to manage websockets connections. Do not forget to add it to the import section of your app.module.

Our SocketConnectionEntity will associate a connectionId to a User. A user can have several websockets connections as he may be connected to your app through several browsers or with a mobile application.

@Entity('users')
export class UserEntity implements User {
    ...
    @OneToMany(type => SocketConnectionEntity, socketConnection => socketConnection.user)
    socketConnections: SocketConnectionEntity[];
    ...
}

@Entity('socket_connection')
export class SocketConnectionEntity implements SocketConnection {
    @PrimaryGeneratedColumn()
    id: number;

    @Column({ name: "connection_id" })
    connectionId: string;

    @ManyToOne(() => UserEntity, user => user.socketConnections, { onDelete: 'CASCADE' })
    @JoinColumn({ name: "user_id" })
    user: User;

    @Column({ type: "datetime", default: () => "CURRENT_TIMESTAMP" })
    timestamp: Date;
}

The controller and the service will let us create, get or delete user's connection in database (the SocketConnectionEntity we just created). Those two endpoints are used by the AWS Lambdas we created previously.

@Controller('socket-connections')
export class SocketConnectionsController {

    constructor(private socketConnectionService: SocketConnectionsService) { }

    @Post()
    @Roles('user', 'premium', 'admin')
    async create(@Body() body, @AuthUser() user) {
        return await this.socketConnectionService.create(user, body.connectionId);
    }

    @Delete(':connectionId')
    async delete(@Param() param) {
        return await this.socketConnectionService.deleteConnection(param.connectionId);
    }
}

2) Create a SocketService to ask the API Gateway to send a message to a specific connectionId. Do not forget to import the was sdk import { ApiGatewayManagementApi } from 'aws-sdk'; and create your awsGW object with your API Gateway credentials stored previously in your environment variables.

    async sendMessage(userId, data) {
        const connections = await this.socketConnectionService.getUserConnections(userId);

        for (const connection of connections) {
            console.log("Socket post to : ", connection.connectionId);
            this.awsGW.postToConnection({
                ConnectionId: connection.connectionId,
                Data: JSON.stringify(data)
            }, async (err, success) => {
                if (err) {
                    if (!err.retryable) {
                        // Socket id is disabled
                        await this.socketConnectionService.deleteConnection(connection.connectionId);
                    }
                }
            });
        }
    };

Conclusion

I hope this module will help you saving some time while trying to implement websockets in your project. If you have any question, I'll be present as usual in the comment section !

Links:

The platform sharing the starter and it's modules : Fast Modular Project
Module "Websocket with API Gateway and AWS Lambda" repository here.

Do not hesitate to pin and like if you appreciated the article ❤️

Add a Redis cache to your NestJS backend

Leonidas Costas — Wed, 28 Apr 2021 14:53:19 +0000

Hi Sparta!

In this article I will share with you how to use Redis as scalable cache system in your NestJS backend.

The full source code and the documentation is available here 🙂

This cache system module will be added top of the React/Node/MySQL starter. This starter has already been presented to you in this article.

Redis in 3 words

Redis is an open source in-memory data structure store, that can be used either as a cache, either as a database, or a message broker (like JMS or RabbitMQ). Even in critical applications, Redis is used in production as it provides a high availability via the Redis Sentinels and a automatic partitioning thanks to the Redis Cluster.

Configure your NestJS backend to use Redis

This section is an overhead on top for the official documentation from NestJS, to adapt it to the web starter.

You should install following packages:

npm install cache-manager
npm install cache-manager-redis-store

You should specify your backend environments variables:

    export const environment = {
        ...,
        redis: {
            host: process.env.LOCAL_IP,
            port: process.env.REDIS_PORT,
            defaultTtl: 86400
        }
    };

You should now create a NestJS module MyRedisCacheModule with it's service MyRedisCacheService to interact with your cache through the cache-manager.

set: allows you to set a cached value.

get: allows to retrieve the value (will be undefined when TTL expired).

del: allows you to deleted a stored key.

The controller and the service:

gets a cached value in Redis
stores a value in Redis
deletes a stored key

The controller and service are available here 🙂

Setup Redis for dev environment

The initial starter's docker-compose file launches our local databases (with a volume attached), our backend and our frontend. We'll modify it to also launch a redis server locally when starting our web app with docker-compose up.

services:
  db:
    ...

  back:
    ...

  cache:
    image: "redis:alpine"
    ports:
      - ${REDIS_PORT}:${REDIS_PORT}
    env_file: ./.env

  front:
    ...

(optional) to specify a password for this service you can add command: redis-server --requirepass yourpassword in the docker-compose.yaml and add also the password in your backend redisStore: auth_pass: 'password'.

The environments variables in .env are loaded by docker when launching your app with docker-compose up. You'll to add to this file the redis port you wanna use:

...
REDIS_PORT = 6379
...

Your redis cache system is now alive locally 🙂
You can test the test endpoints created in last section with Postman!

You want to use a cache system in production ? Let's jump to the next section.

Setup Redis for prod environment

From your code point of view, you'll only need to adapt your environment variables to route to a production AWS ElastiCache. For your Redis instance, the non clustered mode should be enough if not dealing with a large volume of datas. The best documentation to be read for this step is the great one provided by AWS for ElastiCache.

Conclusion

I hope this module will help you saving some time while trying to optimize your backend performance with a Redis cache. If you have any question, I'll be present as usual in the comment section!

Links:

The platform sharing the starter and it's modules: Fast Modular Project
Module "Scalable caching system with Redis and NestJS" is available here.

Do not hesitate to pin and like if you appreciated the article ❤️

Upload files in your web app to an AWS S3 bucket

Leonidas Costas — Thu, 22 Apr 2021 14:54:09 +0000

Hi Sparta!

In this article I will share with you a file storage module that can help you store your user's files (profil's pictures, PDF documents...) in your app with a scalable architecture.

We could have stored all those data to a custom server, but AWS S3 buckets are giving us the scalability and I'll show you here how to use them.

On my side, I used this module on top of the React/Node/MySQL starter. This starter has already been presented to you in this article.

What does it bring?

Open source code
Documentation and "Quick Start"
Complete integration of the process in your React / NestJS (it can be easily adapted to a node backend)
AWS S3 configurations
5 hours of work saved :D

Prerequisite

By getting the web starter I was mentioning above, you'll be able to plug this file upload module directly on top of it and have a functional project with an authentication and a file storage in less than 20 minutes.

The starter is available here.
The module is available here.

How does it work?

The S3 buckets is a public cloud storage resource available in Amazon Web Services' (AWS). You can manually upload files into the bucket and you can, of course, do it programmatically. Here is the high picture workflow of the process:

Frontend asks the backend for an URL where it can saves a given file.
Backend ask with it's credentials AWS to get signed URL that can be used to upload a file, and returns its to the frontend.
Frontend uses the URL to save the file to the bucket.
(optional) Your frontend can ask your backend to save in database the URL where your image/file has been uploaded in order to display it in your app :)

Setup the file storage process

Create your S3 bucket here.
Get your credentials. Go to IAM console, from the navigation menu click on Users, select your user or create a new user, create an access key, get the Key ID and the Key secret and keep them in save place, we'll see them soon ;)
Grant the permissions for your users to modify your bucket (grant right AmazonS3FullAccess). IAM > Create autorisation > S3
Add the CORS policy in S3 > autorisations

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Authorize public access to your S3 bucket
Add your environment variables in the backend using the credentials your get during the second step:

s3: {
        url: "https://[bucket].s3.eu-west-3.amazonaws.com/userUploads",
        bucket: "[bucket]",
        region: "[region]",
        host: "s3.eu-west-3.amazonaws.com",
        accessKeyId: "XXXXXXXXXXXXXXXXXX",
        secretAccessKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    }

Your backend can now ask AWS for a signed URL (and give it back to the frontend):

npm install aws-sdk@2.799.0

    async getS3Url(fileExtension: string): Promise<string> {
        let signedUrl = await this.s3.getSignedUrlPromise('putObject', {
            Bucket: this.configService.environment.s3.bucket,
            Key: `pictures/${uuid.v4()}.${fileExtension}`,
            ContentType: 'application/octet-stream',
            ACL: 'public-read',
            Expires: 604800
        });
        return signedUrl;
    }

Finally, the frontend can use the signedUrl to store a file:

    ...

    const headersContent = {
        "Content-Type": file.type,
        Accept: "application/json"
    };
    const headers = new Headers(headersContent);
    const response = await fetch(
        new Request(signedUrl, {
            method: "PUT",
            body: file,
            headers
        })
    );

The entire tutorial and a step by step integration on the starter with an example screen is available here.

Conclusion

I hope this module will help you saving your some time while trying save user's files in your project.
If you have any question, I'll be present as usual in the comment section !

Links:

The platform sharing the starter and it's modules : Fast Modular Project
Module "File uploads to AWS S3" repository here.

Do not hesitate to pin and like if you appreciated the article ❤️

Send mails with Mailjet from your React NestJS app in 10 min

Leonidas Costas — Mon, 29 Mar 2021 14:05:38 +0000

In this article I will share with you a module that sends mail to customers using MailJet. On my side, I used this module on top of the React/Node/MySQL starter. This starter has been presented to you last week in this article.

Maybe you are wondering... why using Mailjet ? Because it's free until 6000 mails/months and no credit card is required :D

Prerequisite

By getting the web starter I was mentioning above, you'll be able to plug this mail system module directly on top of it and have a functional project with an authentication and a mail system in less than 10 minutes.

The starter is available here.
The module is available here.

How does it work?

In this module, we'll use Mailjet service. We can configure mail templates on their website which will be identified by a unique ID. Those templates can be filled with static content and dynamic content that will change for every mails (pretty usefull to set usernames or callback url on a button).

The backend will call Mailjet API to sends mails giving :

receiver
template ID
variables (dynamic data)
...

Setup the mailing system

Mailjet configuration
Create a MailJet account.
Create your mail transactional template and publish it.
Keep the ID of your template in a safe place, we'll need it after.
Mailjet dependency
Install the node-mailjet dependency in your backend : npm install node-mailjet@3.3.1
Mailjet API credentials
Set your mailjet API credentials you get from first step into your environments files located here : ./backend/src/environments. If you already forgot your API credentials, you can find them back using this link
Backend service
Copy the mailer folder of this module in your backend. You can know setup the template ID from your published template into templates.enum.ts.

That's it ! You are now enable to send mail to a specific user, using your pre-defined template a the MailerService available in your backend :)

Conclusion

I hope this module will help you saving some time while trying to implement a mailing system in your project.

Note that all modules currently available on the React/NestJS/MySQL web starter are listed here. Do not hesitate to ask for a tutorial on another module on this starter in the comment section !

Links:

The platform sharing the starter and it's modules : Fast Modular Project
"Send mails with MailJet" module open source code available here.

Do not hesitate to pin and like if you appreciated the article ❤️

Add a subscription payment system with Stripe in less than 20 min

Leonidas Costas — Thu, 25 Mar 2021 15:00:10 +0000

In this article I will share with you a payment module that could be really useful for those you want to implement a SaaS.

On my side, I used this module on top of the React/Node/MySQL starter. This starter has been presented to you last week in this article.

What does it bring?

subscription creation
subscription cancelation
subscription re-activation before d-day cancelation
last but not least, almost 14 hours of work saved :D

Prerequisite

By getting the web starter I was mentioning above, you'll be able to plug this payment module directly on top of it and have a functional project with an authentication and a payment system in less than 20 minutes.

The starter is available here.
The module is available here.

How does it work?

In this module, we'll use Stripe's checkout session. They are meant to create a payment session on Stripe's side for a given user and given product. We will redirect our user to this session when he clicks (hopefully) on "BUY NOW".

High picture of the workflow:

User clicks on your "buy button".
Frontend asks backend to create a Stripe checkout session
Backend creates the checkout session and returns the corresponding sessionId to the frontend.
Frontend redirects the user to the created session using the sessionId.
User pays on Stripe website and get redirect to your website (thanks to the successUrl you'll provide) once the payment is successfully done.
Backend is receiving notifications about the payment status thanks to a Webhook and save the payment status in database.

Setup the payment system

Create a Stripe account
Create a API key pair in "Developers" section. Once created keep your public (pk_test...) and secret (sk_test...) keys safe, we'll use them later :)
Create your subscription product: set a description, a price, and the cancel settings. The product will be created in "test mode" by default. Once created, Stripe will display you a priceId corresponding to the product, as usual keep it safe because we'll use it later :)
Create a Webhook between Stripe and your backend in "Developers" section, this will give you a secret whsec_that should be kept safe.
Add following event types to your Webhook: [customer.subscription.updated, customer.subscription.deleted, invoice.payment_failed, invoice.paid, checkout.session.completed]
Fill environment files with all info kept above as explained here.
You can now push your frontend and backend to production and test your payment system! In test mode, you can fill the payment form with Stripe's test credit card 4242-4242-4242-4242 and fill other fields with whatever you want.
If your test passed, you can switch your Webhooks and your subscription product to production by clicking on "Send to production". Do not forget to update your environments files accordingly :)

The entire tutorial and a step by step integration on the starter is available here.

Conclusion

I hope this module will help you saving your some time while trying to implement a payment system in your project.
If you have any question, I'll be present as usual in the comment section !

Links:

The platform sharing the starter and it's modules : Fast Modular Project
Stripe module open source code here.

Do not hesitate to pin and like if you appreciated the article ❤️

Web starter with CI and AWS deployment (React NestJS Docker)

Leonidas Costas — Wed, 17 Mar 2021 11:28:06 +0000

In this article I will share with you a starter that has been pretty useful for some of my web projects :)

What does it bring ?

an isolated docker environment with a local frontend / backend / database launchable in one command
a project structure with an authentication
a foundation on which features can be added
a deployment guide to AWS infrastructure
continuous integration with Github Actions
last but not least, almost 30 hours work saved :')

How does it work ?

The frontend, backend, and database are wrapped in docker to avoid any issue with OS or local configurations. You can fire up everything with one command : docker-compose up.

Frontend and backend are defining an architecture and a naming conventions to ease the comprehension of the starter and the share of feature around it.

Add features on it ?

Some modules are also available to be added on top of it. You can use them and plug it, they are fully adapted to the starter structure :)

Here is some available modules for this starter :

multilingual with Phrase
Payment system with Stripe
Webcam with React
Websocket with AWS API Gateway
Location by ip
...

All module are listed and available for download here. There is much more module to be created, so feel free to create your own and share it with the community :D

Deployment and continuous integration ?

For the deployment steps, you'll have to create a RDS database, an Elastic Beanstalks, a S3 bucket and a CloudFront instance.

For the continuous integration, you'll have to edit
.github/workflows/main.yml to set up :

branch name on which you want to trigger continuous integration (generally master or main)
name of your S3 bucket
name of your Elastic Beanstalk

Add your AWS credentials as secrets to your GitHub repository (AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY) .

Conclusion

I hope this starter will help you starting your future project!
If you have any question I'll be present in the comment section !

The platform sharing the starter and it's modules :
Fast Modular Project

Do not hesitate to pin and like if you appreciated the article ❤️