Developer @NFNLabs
Image for post
Image for post
Designed by Aarthi

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.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…


Image for post
Image for post

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.

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.


GraphQL and Websockets

Image for post
Image for post
Photo from Apollo Docs.

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…


Set up your React app for environments beyond development and production

Image for post
Image for post
Source: https://undraw.co/

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…


Image for post
Image for post

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

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…


Image for post
Image for post

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


Playing around React Native — #3

Image for post
Image for post

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…


Playing around React Native — #2

Image for post
Image for post

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).

Step 1 — Install NodeJs and react-native-cli

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.

sudo npm…

Playing around React Native — #1

Image for post
Image for post

Is developing mobile apps is too hard and you can’t understand?

Here comes React Native with a much more easy way to build native mobile apps for iOS and Android. Facebook themselves are using React Native for their apps like Facebook, Instagram, Facebook Analytics and more.

Even some companies like Uber, Wix.com, Pinterest, and Skype are using React Native for developing their apps in both iOS and Android.

Let’s get to know React Native on the Technical side…

React Native is a JavaScript framework developed by Facebook for writing real, natively rendering mobile applications for iOS and Android. React Native…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store