Hasura is an Instant GraphQL API generating engine, where all the base APIs are generated in microseconds when a DB is connected. Also, they provide support for integrating the business logics as well using “Hasura Actions”.

Netlify functions are AWS’s serverless lambda functions that allow you to define your business logic and functions as an API and expose them with an endpoint.

Now we are going to implement business logic using netlify functions in Hasura using “actions” in these simple steps.

We can also use Hasura’s Actions to add REST endpoints to Hasura’s GraphQL schema.

Step-1: Create a Function in an app

To create a function in…

While uploading the images to the block storage (or) S3 storage, the full images when captured through the phone (Pixel 3 or others) camera, has a size up to 3 MB. This consumes most of our time while uploading. So, I started looking into lossless compression techniques for images on the client-side.

I came across an amazing image compression package for Javascript called compressorjs.

We can resize, compress and convert the images based on our requirements.

To compress your images follow these three simple steps:

• Install the package using npm/yarn
• Add the particular code block to your project
• Be Amazed!

Install the package using npm/yarn

…

The AASA (short for apple-app-site-association) is a file that lives on your website and associates your website domain with your native app. In other words, it’s a safe way to prove domain ownership to iOS for deep linking.

There is no way to serve the apple-app-site-association from a react app. So we have to push the AASA file from the Nginx server.

Step 1 — Copy the AASA file to the server

Copy the AASA file apple-app-site-association.json or apple-app-site-association.applescript file to a particular location in the server.

I have uploaded the file in the following directory

/var/www/certificates/ios/

Step 2— Add a route to the Nginx config file

Go to the file where the Nginx config is written. Its usually in…

Sign in with Apple was announced in 2019 and allows users to authenticate into your Firebase app with an Apple ID.

Before you start make sure you have a firebase project and enroll yourself in the apple developer program. Now create a web app in your firebase project in the Firebase console.

Step 1: Create or Update an App ID

From the Apple Developer Portal go to Certificates, Identifiers & Profiles » Identifiers. Create a new App ID or update an existing app and give it the Sign In with Apple capability.

Hey, guys! In this article, we are going to talk about using subscriptions in an Apollo-GraphQL client. Subscriptions are generally used to update the client in real-time rather than requesting the same GET call over and over again.

To implement a subscription in a React app, we have to complete these easy steps.

Install the Required Packages

npm install --save @apollo/react-hooks apollo-link apollo-link-http apollo-link-ws apollo-utilities subscriptions-transport-ws apollo-cache-inmemory apollo-client graphql

Configure a Websocket Link

You need to configure a WebSocket link that listens to the server for changes. A socket connection is way better than calling a query repeatedly. A WebSocket connection generally starts withwss:// (WebSocket Secure).

To configure…

When developing a React web application, developers can only use two environments by default.

• Development — NODE_ENV=development when developing the application locally. Uses .env.development by default, if available.
• Production — NODE_ENV=production when building the application for deployment. Uses .env.production by default, if available.

When we use create-react-app, the package.json has the following scripts:

"scripts": {
  "start": "react-scripts start", // NODE_ENV=development as default
  "build": "react-scripts build", // NODE_ENV=production as default
}

Imagine my project has four environments:

• Development
• Testing
• Staging
• Production

But, react-scripts only supports development and production.

Now, I want testing and staging environments. We cannot alter the value of…

Hello folks. I was building a website using ReactJs and I came across a requirement to record an audio file on the web. Like, everyone, I started Googling it.

After googling some time, I came across an npm package that records mp3 files called mic-recorder-to-mp3 . You can find it in the below link.

https://www.npmjs.com/package/mic-recorder-to-mp3

Install and Import

To install the above npm package into your React project, do the following

npm install --save mic-recorder-to-mp3

After installing it you have to import the package in the project.

import MicRecorder from 'mic-recorder-to-mp3';

Configure MicRecorder

Now set the bit rate for the audio to be recorded…

Hello folks, the pain point for a NodeJs developer is building the application and log in to some server and hosting it there even for small changes. Shit!

We can automate the deployment/delivery process using CI/CD (Continous Integration and Continous Deployment/Delivery).

Let’s see how to implement a CI/CD using BitBucket Pipelines in an Amazon EC2 server for NodeJs applications.

1. Setting up your Bitbucket repository

Go to Repository Settings and tap on settings under the pipeline section. An “Enable Pipelines” toggle will be present. Now toggle it to enable the pipeline integration for that particular repository