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.
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.
We can resize, compress and convert the images based on our requirements.
To compress your images follow these three simple steps:
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.
Copy the AASA file
apple-app-site-association.applescript file to a particular location in the server.
I have uploaded the file in the following directory
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.
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.
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
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 with
wss:// (WebSocket Secure).
When developing a React web application, developers can only use two environments by default.
NODE_ENV=developmentwhen developing the application locally. Uses
.env.developmentby default, if available.
NODE_ENV=productionwhen building the application for deployment. Uses
.env.productionby default, if available.
When we use create-react-app, the
package.json has the following 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:
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.
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';
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.
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
Hello folks, here we are going to get started with a new react native project. But we need to set-up the environment for it. To do so see my previous post.
To convert your awesome ideas to Applications we should the basic things like what are the files present and what it does in an empty react native project. We are going to see these details in this post.
To get started we are gonna create an empty project using “react-native init”. Try out the following command in a Terminal or Command Prompt.
react-native init YourAwesomeProject
Note: Replace <YourAwesomeProject> with…
To know the basics about React Native, React and JSX see my previous post below.
A react native environment can be setup up in following 5 simple steps. Execute the steps based on your platforms (Windows, Linux, and Mac).
Download and install NodeJs for all platforms here — https://nodejs.org/en
react-native-cli is a node package used to create an empty react native app. We have to install the react-native-cli using “npm” globally for the system. To do so execute the following commands.
After installing NodeJs open the terminal and type this command in Mac and Linux to install react-native-cli.