Let’s see the process to deploy Laravel app on shared hosting with SSH GitHub Action. Prerequisites: Set up SSH keys in the server. Set up Laravel project in GitHub. Let’s...
Continue reading...anlisha
Deploy React with GitHub Actions on Shared Hosting
Let’s see the process to deploy React app on shared hosting with FTP Deploy GitHub Action. Prerequisites: Set up an FTP account in cPanel. Setup React Project in GitHub. Let’s...
Continue reading...Yup.array validate object property is unique with Formik in React.
The requirement is to validate objects in users array has unique name property. Define a custom method in Yup using Yup.addMethod. Yup.js provides this function to conveniently reuse test functions. Function has to either...
Continue reading...Setup Bitbucket CI/CD for React
Continuous integration (CI) validates all the stages of the development process from merging codes to testing builds while optimizing the code release cycles. Continuous deployment (CD) focuses on setting up...
Continue reading...Google Maps API Directions Service in React – Plot efficient route on map with total distance and duration.
Use Case: One can enter source and destination address; For the address field, google places autocomplete is implemented. One can also add multiple way-points/stops between source and destination address. On...
Continue reading...Build a custom time picker React component
In this article, we’ll create a custom time picker component combining react-datetime and react-input-mask packages. Step1 — Start Basic CRA Step2 — Install react-datetime and react-input-mask packages Step3 — Setup...
Continue reading...An Introduction to Absolute Imports in React Native
React Native Absolute imports — made easy for beginners. Absolute imports help to simplify the paths and better organize the project as it grows. Also with absolute imports, it’s easier...
Continue reading...LinkedIn API — OAuth 2.0 Access Token
Hi, on a recently worked project, we needed to fetch shares (posts) of company in LinkedIn. Thus, I write this step by step guide to access LinkedIn API. The LinkedIn...
Continue reading...Tailwind CSS in HTML starter via NPM
Tailwind CSS is a utility-first CSS framework. This article includes steps to install Tailwind CSS in HTML via package manager and how to properly process Tailwind CSS. Although it requires...
Continue reading...Fabric.js in React — Draw bounding box in webcam preview using canvas events.
Fabric.js is a JavaScript library for HTML5 canvas. Using Fabric.js one can create object/shapes on canvas. We’ll be incorporating canvas events to draw bounding box over webcam component. Step1 —...
Continue reading...
