Forem: Anlisha Maharjan

Deploy Laravel with GitHub Actions on Shared Hosting

Anlisha Maharjan — Mon, 09 Jan 2023 03:45:59 +0000

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 start!

Create Deployment Script:

Run the command below in the root of the project directory. A deploy.sh file is created inside the scripts folder. Paste the code snippet below into the deploy.sh file.

mkdir .scripts/
touch .scripts/deploy.sh

Setup GitHub Actions:

Option 1:

Run the command below in the root of the project directory. A ci.yml file is created inside the workflows folder, the file can have any name but it should end with a .yml extension. Write the configuration code snippet below into the ci.yml file.

mkdir .github/
mkdir .github/workflows/
touch .github/workflows/ci.yml

Option 2:

In the GitHub repository, click on Actions > set up a workflow yourself and write the configuration code snippet below into the ci.yml file. The file can have any name but it should end with a .yml extension.

Let me explain what each section does.

name: Deploy on push master

Just specifying a name for the workflow.

on:
  push:
    branches:
      - master

The above snippet triggers the workflow when one pushes to the master branch.

jobs:
  web-deploy:
    name: Deploy
    runs-on: ubuntu-latest

jobs – Group all the jobs that run in the workflow. Specifying and setting up a web-deploy job.

runs-on: ubuntu-latest – Configures to run the workflow using the latest version of Ubuntu.

steps:
    - name: 🚚 Get latest code
        uses: actions/checkout@v2

steps – Group all the steps that run in the web-deploy job.

uses: actions/checkout@v2 – Check-out repository so the workflow can access it.

- name: 📂 Deploy to server via ssh
        uses: appleboy/ssh-action@v0.1.7
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: "cd /var/www/html && sh ./.scripts/deploy.sh"

Using appleboy/ssh-action; any ssh commands can be remotely executed to the shared hosting server with SSH username/password provided.

Add GitHub Secrets:

Goto Settings tab on the GitHub repository, click on Secrets > Actions > New Repository Secret to add the server host, ssh username, password, and port.

For example: For Server host: HOST as Name and your server IP address as Value. For SSH port: PORT as Name and your ssh port as Value. 22 is the default ssh port. For example: For SSH username: USERNAME as Name and run whoami on your server and use the result as Value.

To access variables in the pipeline use the format below:

${{ secrets.HOST }}
${{ secrets.USERNAME }}
${{ secrets.PASSWORD }}
${{ secrets.PORT }}

Now anytime one pushes to the master branch, the pipeline starts running a web-deploy job that deploys the Laravel app.

Goto Actions tab to monitor whether it’s running, successfully deployed, or failed.

This concludes a CI/CD pipeline for Laravel on GitHub. Thanks for reading!

The post Deploy Laravel with GitHub Actions on Shared Hosting first appeared on Anlisha Maharjan.

Deploy React with GitHub Actions on Shared Hosting

Anlisha Maharjan — Wed, 28 Dec 2022 13:40:59 +0000

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 start!

Setup GitHub Actions:

Option 1:

mkdir .github/
mkdir .github/workflows/
touch .github/workflows/ci.yml

Option 2:

Let me explain what each section does.

name: Deploy on push master

Just specifying a name for the workflow.

on:
  push:
    branches:
      - master

The above snippet triggers the workflow when one pushes to the master branch.

jobs:
  web-deploy:
    name: Deploy
    runs-on: ubuntu-latest

jobs – Group together all the jobs that run in the workflow. Specifying and setting up a web-deploy job.

runs-on: ubuntu-latest – Configures to run the workflow using the latest version of Ubuntu.

strategy:
      matrix:
        node-version: [16.x]

The matrix accompanied by the node-version tells the workflow to run web-deploy on the specified node version.

steps:
    - name: 🚚 Get latest code
        uses: actions/checkout@v2

steps – Group together all the steps that run in the web-deploy job.

uses: actions/checkout@v2 – Check-out repository so the workflow can access it.

 - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@master
      with:
        node-version: ${{ matrix.node-version }}

uses: actions/setup-node@master – Installs the specified node version(16) in the CI environment.

 - name: Copy .env.prod.example to .env
      run: cp .env.prod.example .env

run: cp .env.prod.example .env – Creates a .env with required environment variables. (Important because .env is always added to .gitignore).

- name: 🔨 Build Project 
      run: |
        npm install
        npm run build

run: npm install – Using npm to install the package node dependencies.

run: npm run build – Builds React project.

- name: 📂 Sync files
        uses: SamKirkland/FTP-Deploy-Action@4.3.3
        with:
          server: ${{ secrets.SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: build/

Transfers files from the build folder to the shared hosting server using FTP credentials.

Add GitHub Secrets:

Goto Settings tab on the GitHub repository, click on Secrets > Actions > New Repository Secret to add the FTP server, account username, and password.

For example, for FTP username: FTP_USERNAME as Name and zon@zon.com as Value.

To access variables in the pipeline use the format below:

${{ secrets.SERVER }}
${{ secrets.FTP_USERNAME }}
${{ secrets.FTP_PASSWORD }}

Now anytime one pushes to the master branch, the pipeline starts running web-deploy job which builds and deploys the react app.

Goto Actions tab to monitor whether it’s running, successfully deployed, or failed.

This concludes a CI/CD pipeline on GitHub. Thanks for reading!

The post Deploy React with GitHub Actions on Shared Hosting first appeared on Anlisha Maharjan.

Yup.array validate object property is unique with Formik in React.

Anlisha Maharjan — Tue, 29 Nov 2022 08:24:24 +0000

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 return true or false to indicate if testing has failed or not respectively, or a new ValidationError created through this.createError().

Yup.addMethod(Yup.array, "unique", function (message, path) {
  return this.test("unique", message, function (list) {
    const mapper = (x) => get(x, path);
    const set = [...new Set(list.map(mapper))];
    const isUnique = list.length === set.length;
    if (isUnique) {
      return true;
    }
    const idx = list.findIndex((l, i) => mapper(l) !== set[i]);
    return this.createError({path: `users[${idx}].${path}`,message});
 });
});

With Yup, we create a Yup formatted object that resembles our intended schema for an object.

const schema = Yup.object().shape({
 users: Yup.array().of(
   Yup.object().shape({
     name: Yup.string().required("Name is required"),        
   })).unique("Duplicate user", "name")
});

Formik has a special config option / prop for Yup object schemas called validationSchema which will automatically transform Yup’s validation errors into a pretty object whose keys match values and touched. Set the validationSchema option to the schema created above.

Use FieldArray that helps with common array/list manipulations. Pass it a name property name=”users”. FieldArray will give access to array helper methods via render props.

Note on line 57, arrayHelpers.push add a value to the end of an array. Similarly, arrayHelpers.remove on line 104 remove an element at an index of an array and return it.

Field hooks up inputs to Formik. Note the name attribute on line 82; it uses to match up with Formik state.

Thank you for reading!

The post Yup.array validate object property is unique with Formik in React. first appeared on Anlisha Maharjan.

Setup Bitbucket CI/CD for React

Anlisha Maharjan — Tue, 25 Oct 2022 17:42:26 +0000

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 a bundled artifact into a production environment in the fastest way possible which automates the whole deployment process.

Here is a set of steps to integrate the Bitbucket CI/CD pipeline with React application; assuming that you have already set up React application repository in Bitbucket.

Enable bitbucket pipelines

Go to Repository settings → Pipelines settings. Enable the CI/CD pipeline by clicking on the Enable Pipelines button.

Generate SSH keys

Generate a new SSH key pair (recommended):

Go to Repository settings → SSH keys → Generate keys to generate public key and private key.

Add an existing key pair:

Go to Repository settings → SSH keys → Use my own keys and paste the private and public key into the provided fields, then Save.

Install the public key on the remote host before Pipelines can authenticate with that host.

For EC2; paste the public key to file: /home/ec2-user/.ssh/authorized_keys

I prefer to add a one-liner description such as: #Bitbucket CI/CD Pipeline

Setup known hosts

Pipelines provide a way to store, and inspect, the fingerprint of a remote host, along with the host address; for the sole reason to verify that the public key presented by a remote host actually matches the identity of that host, to help you detect spoofing and man-in-the-middle attacks.

Go to Repository settings → SSH keys and enter the server IP address and select the Fetch button to see the host’s fingerprint.

Add .env.prod.example in React JS repository

Copy .env to .env.prod.example. Setup .env.prod.example with necessary values. For example: REACT_APP_API_URL=(Your Production API Url)

Add bitbucket-pipeplines.yml in React JS application

Add the bitbucket-pipelines.yml file below to the root directory of the React repository to run the CI/CD pipeline.

In the yml file; When pull requests are merged in master branch the first step “Build React (Prod Server)” scripts are executed. This step mainly focus on installing latest npm packages and building the React application. Next step “Deployment (Prod Server)” focus on deploying the build folder to the server.

Note the $PROD_USER, $PROD_SERVER variables.

Add repository variables

Go to Repository settings → Repository variables

Pipelines variables added at the repository level can be accessed from the bitbucket-pipelines.yml file or any script in the following way: $PROD_USER where PROD_USER is the name of the variable.

For EC2; Set the values of variables as follows:

PROD_USER – ubuntu

PROD_SERVER – (Your Server IP Address)

PROD_BUILD_FOLDER – build

PROD_REMOTE_DESTINATION_PATH – (Your Server Path)

CI/CD pipeline process

Go to Pipelines to see the list of all pipeline processes. Now when pull requests are merged into the master branch, the pipeline will run. A pipeline process runs all the scripts defined in the bitbucket-pipelines.yml file.

And that’s it. Happy Reading!!

The post Setup Bitbucket CI/CD for React first appeared on Anlisha Maharjan.

Google Maps API Directions Service in React – Plot efficient route on map with total distance and duration.

Anlisha Maharjan — Wed, 24 Aug 2022 04:15:30 +0000

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 change in any address field, The Map and the Directions service is initialized to plot the driving directions and route on map and display the total distance and total duration.

Final Demo!

Step1 — Enable Directions API for Google Maps API key

If you are new to Google Maps API key, I recommend you to have a look at it here.

Step2 — Start Basic CRA and Install packages

npx create-react-app axon
cd axon
npm install @mui/material @emotion/react @emotion/styled

This will create a basic CRA. We also installed MUI 5 for creating UI components.

npm install @react-google-maps/api use-places-autocomplete formik moment

This will install react-google-maps/api and use-places-autocomplete packages required.

Step3 — Include Maps JavaScript Library

Include the google maps client-side library in public/index.html

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key [YOUR_API_KEY]&libraries=places"></script>

Step4 — Setup App.js

Initialize Formik with empty initial values of address fields. Formik is the most popular open source form library for React.

Step5 — Create source and destination address field with multiple way-points

The GoogleAutocomplete field used is a custom google places autocomplete. You can find it here.

Step6 — Configure Request to Direction Service

On line 9, an instance of the DirectionsService Object is created.

On line 13, the route() called takes directions request JavaScript object (with required query parameters origin, destination and travelMode) as an argument. Also waypoints parameter is included to consider all the stops between origin and destination.

The second argument of route() method which is a response callback function returns directionsResult and directionsStatus.

And that concludes it!

Source Code!

The full source code is available here — https://github.com/anlisha-maharjan/react-google-directions-service

Happy Learning! Feel free to give this article a clap and follow to stay up to date with more articles!

The post Google Maps API Directions Service in React – Plot efficient route on map with total distance and duration. first appeared on Anlisha Maharjan.

An Introduction to Absolute Imports in React Native

Anlisha Maharjan — Mon, 08 Aug 2022 04:15:00 +0000

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 to copy-paste the code with imports into another file in the project and not have to tinker with import paths.

When the project’s folder structure is complex, we are going to have long relative imports in the project like this:

import Input from ‘../../../components/form/input’;

It can be pretty hard to refactor and looks messy. The solution is to convert relative imports to absolute imports.

Step 1 — Install babel-plugin-module-resolver plugin

$ npm install --save-dev babel-plugin-module-resolver

$ yarn add --dev babel-plugin-module-resolver

Step 2 — Update babel.config.js

Add the following code snippet in babel.config.js

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@app': './src',
        },
      },
    ],
  ],
}

Note: @app is an alias one can give whatever one wants.

Step 3 — Setup jsconfig.json or tsconfig.json

Using JavaScript

Create/open jsconfig.json file (in the root directory of the project) and add baseUrl and paths setting inside compilerOptions as shown in the snippet below:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths" : {
      "@app/*": ["src/*"]
    }
  }
}

Using TypeScript

If you’re using TypeScript in React Native project, update tsconfig.json file (in the root directory of the project) and add the same setting inside compilerOptions as JavaScript.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths" : {
      "@app/*": ["src/*"]
    }
  }
}

Step 4 — Implement Absolute Import

Absolute imports setting is now successfully configured with src folder as a custom base directory and we can import an input component located at src/components/form/input.js from like so:

import Input from '@app/components/form/input';

Happy Learning! Feel free to give this article a clap and follow to stay up to date with more articles!

The post An Introduction to Absolute Imports in React Native first appeared on Anlisha Maharjan.

Build a custom time picker React component

Anlisha Maharjan — Thu, 30 Jun 2022 17:17:01 +0000

In this article, we’ll create a custom time picker component combining react-datetime and react-input-mask packages.

Step1 — Start Basic CRA

npx create-react-app axon

Step2 — Install react-datetime and react-input-mask packages

cd axon
npm i react-datetime react-input-mask moment

Step3 — Setup time picker component

Step4 — Style time picker component

Step5 — Import CustomTimePicker component in App.js

import React from "react";
import CustomTimePicker from "./custom-time-picker";
import './custom-time-picker.scss';
function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        width: "100vw",
        height: "100vh",
      }}
    >
      <CustomTimePicker name="time" label="Time" />
    </div>
  );
}
export default App;

And that’s it!

The post Build a custom time picker React component first appeared on Anlisha Maharjan.

LinkedIn API — OAuth 2.0 Access Token

Anlisha Maharjan — Fri, 22 Apr 2022 04:15:00 +0000

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 API uses OAuth 2.0 for user authorization and API authentication. Since we need access to Marketing APIs to fetch posts of company, we’ll follow Authorization Code Flow (3-legged authorization).

Step 1 — Register application in the LinkedIn Developer Portal

Create a new app in Developer Portal, specify App name, enter the LinkedIn Page of the company which will be associated with the application, upload logo and publish.

Note: It is required to associate the app with a LinkedIn Company Page. The company selected will function as the publisher of the app.

Step 2 — Request Application Verification

Go to Settings tab, select Verify button next to the company associated with the app. Click the Generate URL button in the Company Verification pop-up. Copy the URL and send it to the Page admin for verification.

Page admin has 30 days to verify the app with the unique URL. Once the Page admin approves the request, the app will show Verified in Settings tab. The link will only expire earlier than 30 days if Page admin clicks Deny in the request.

Step 3— Verify Application Request

As a Page admin when a unique URL is received requesting approval to associate the app with company Page; Clicking the URL will navigate to the Developer Portal. Sign in and the landing page will feature the request details; company page information, app information, and the requestor’s name. The request can either be approved or denied.

Once verification is complete, it cannot be undone. If the link is accessed after 30 days, the landing page will showcase an expired message and a new unique URL link must be generated.

Step 4— Application Credentials and Redirect URL

Next click the Auth tab to view application credentials i.e Client ID and Client Secret.

Under OAuth 2.0 settings, _we need to specify _Authorized redirect URLs. Since we’re using Postman to get access token, we’ll add the Postman callback URL ‘https://oauth.pstmn.io/v1/callback’ to the list.

Note: Please note Client ID and Client Secret for later use.

Step 5— Setup OAuth 2.0 scopes

To fetch data through LinkedIn API we requires access to proper OAuth 2.0 scopes such as r_basicprofile, r_organization_social. These scopes are based on the products added in the application.

Click the Products tab and apply to Marketing Developer Platform, Share on LinkedIn and Sign in with LinkedIn.

Complete the MDP access form under Products > Marketing Developer Platform. A confirmation email is received when the application has been reviewed.

Check the OAuth 2.0 scopes for the application now that products are added. Sign in with LinkedIn product gives access to r_liteprofile and r_emailaddress scopes. Share on LinkedIn product gives access to w_member_social scope. Remaining scopes are obtained from Marketing Developer Platform _product._

Step 6— Get Access Token via Postman

Open Postman, _Create _New Request _and Click _Authorization Tab. Select Type as OAuth 2.0. Fill in the given details:

Token Name : {provide token name}
Grant Type : Authorization Code
Callback URL: https://oauth.pstmn.io/v1/callback
Auth URL : https://www.linkedin.com/oauth/v2/authorization
Access Token URL : https://www.linkedin.com/oauth/v2/accessToken
Client ID : {provide Client ID}
Client Secret : {provide Client Secret}
Scope : r_basicprofile, r_liteprofile, r_emailaddress, w_member_social, r_organization_social, rw_organization_admin, w_organization_social
State : {provide a unique string value}
Client Authentication: Send client credentials in body

Click on Get New Access Token. _Postman will take us to the LinkedIn authorization page, where it is prompted to log into LinkedIn. Click _Allow to authorize the request. The prompt on the authorization page is dictated by the requested scopes in the previous step.

Postman will display the access token to be used for testing. Choose Use Token button to set this token.

Step 7— LinkedIn Find Shares By Owner API

Our application can now retrieve the collection of shares (posts) owned by a specific organization for which the authenticated member is an Admin.

API Endpoint:

GET https://api.linkedin.com/v2/shares?q=owners&owners=urn:li:company:{id}&sortBy=LAST_MODIFIED&sharesPerOwner=1000&count=50&start=0&oauth2_access_token={ACCESS_TOKEN}

LinkedIn Company ID is a unique 6 to 9 digits long string of numbers. To find Company ID as a LinkedIn Page Admin, navigate to the Admin View of the LinkedIn Page from the All Pages or Home tab. The LinkedIn company ID is the numbers after “/company/” in the URL. For example, if the Admin URL for the LinkedIn Page is https://www.linkedin.com/company/8681905/admin/, the company ID is 8681905.

And this is it!

If you need to fetch shares (posts) of LinkedIn Company Page that doesn’t belong to you, then the Admin of that Company Page must add you as Content admin role. Skip these steps if not required.

As a Page Admin, access your LinkedIn Company Page Admin view. Click the Admin tools dropdown at the top of the page and select Manage Admins. Click the Add admin button. Search the authenticated member and assign role as Content admin and Save.

Dependencies:

For each company, the authenticated user must have a Admin role in the company’s LinkedIn Page to fetch shares (posts) of the organization.
The app must have access to Marketing Developer Platform product and its scopes.

References:

Getting Access to LinkedIn APIs – LinkedInThe LinkedIn API uses OAuth 2.0 for user authorization and API authentication. Applications must be authorized and…docs.microsoft.com

If you enjoyed learning about LinkedIn API access flow then feel free to give this article a clap and follow to stay up to date with more articles! Thanks for reading!

The post LinkedIn API — OAuth 2.0 Access Token first appeared on Anlisha Maharjan.

Tailwind CSS in HTML starter via NPM

Anlisha Maharjan — Mon, 28 Mar 2022 04:15:00 +0000

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 a bit more setup, it is definitely the best way to make use of all of the features that Tailwind CSS can provide.

Step 1 — Initialize package.json

npm init -y

Note: The -y flag will say yes to all questions

Step 2— Install Tailwind CSS

npm install -D tailwindcss@latest

-D option if to save package to peerDependencies

Step 3— Include Tailwind CSS directives

Now that Tailwind CSS is installed, the next step is creating a tailwind.css file and add the following code to inject the Tailwind CSS directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4— Setup Tailwind configuration file

The configuration file makes it easy to customize the classes in Tailwind CSS by changing any fonts, color, spacing, etc.

npx tailwindcss init

A minimal configuration file named tailwind.config.js is generated.

module.exports = {
 content: ["./index.html"], // Paths to all template files
 theme: {
  extend: {},
 },
 plugins: [],
}

Step 5— Processing Tailwind CSS

We’ll be using TailwindCSS CLI to build the CSS. In the following command ./assets/scss/tailwind.css is the input, and the built-css output will be placed in ./assets/css/tailwind.css.

npx tailwindcss -i ./assets/scss/tailwind.css -o ./assets/css/tailwind.css --watch

Also we can add the following script into package.json to easily build CSS with command npm run dev .

"scripts": {
"dev": "tailwindcss -i ./assets/scss/tailwind.css -o ./assets/css/tailwind.css --watch",
}

Step 6— Link Tailwind CSS into HTML

Create an index.html file; Add the following code in HTML template head section.

<!-- index.html -->
<link rel="stylesheet" href="./assets/css/tailwind.css" />

And This is it. Enjoy!

The post Tailwind CSS in HTML starter via NPM first appeared on Anlisha Maharjan.

Fabric.js in React — Draw bounding box in webcam preview using canvas events.

Anlisha Maharjan — Tue, 15 Mar 2022 16:15:00 +0000

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 — Install Fabric.js & react-html5-camera-photo

npm i fabric react-html5-camera-photo

Step2 — Create canvas & camera element

<Camera onTakePhoto={(uri) => {}} />
<canvas id="fabricEl" width="720" height="348"></canvas>

Step3 — Initialize fabric.Canvas

import React, { useEffect, useState } from "react";
import Camera from "react-html5-camera-photo";
import { fabric } from "fabric";

const [canvas, setCanvas] = useState("");

const initCanvas = () =>
 new fabric.Canvas("fabricEl", {
  selection: false,
  stateful: true,
});

useEffect(() => {
 setCanvas(initCanvas());
}, []);

Note that initCanvas function returns a fabric.Canvas object; invoked upon initial rendering of the DOM.

Step4 — Draw bounding box with canvas mouse events

Fabric supports a number of events to allow for interactivity and extensibility. In order to subscribe to events for a canvas we use the on method.

useEffect(() => {
 if (canvas) {
  var rectangle;
  canvas.on("mouse:down", function (e) {
    var pointer = canvas.getPointer(e.e);
    rectangle = new fabric.Rect({
     id: 1,
     top: pointer.y,
     left: pointer.x,
     width: 0,
     height: 0,
     originX: "left",
     originY: "top",
     fill: "rgba(255,0,0,0.3)",
     stroke: "rgba(255,0,0,1)",
     strokeWidth: 2,
     hasControls: true,
     hasRotatingPoint: true,
     hasBorders: true,
     transparentCorners: false,
     selectable: true,
     cornerSize: 10,
     cornerColor: "rgba(255,0,0,1)",
     borderColor: "rgba(255,0,0,1)",
     cornerStrokeColor: "rgba(255,0,0,1)",
     cornerStyle: "rect",
    });
    canvas.add(rectangle);
  });
 }
}, [canvas]);

On mouse:down event of canvas we create a fabric.Rect object and add it to the canvas via canvas.add() method.

Final Code!

View the code on Gist.

Note on line 95, canvas.renderAll() re-renders both the upper and lower canvas layers on the DOM. The object:moving event is to restrict the bounding box rectangle within canvas boundary. The object:modified event calculates bounding box center x, center y, width and height.

Demo!

The post Fabric.js in React — Draw bounding box in webcam preview using canvas events. first appeared on Anlisha Maharjan.

Automating Internationalization with Google Spreadsheet and i18next.

Anlisha Maharjan — Tue, 01 Mar 2022 16:15:00 +0000

The article is for the front-end developers who are suffering from the manual “copy-and-paste” internationalization process. Through this guide executing a single line of script shall automate the entire process.

Use Case

React app that supports multiple languages (with i18next and react-i18next library)
Setup Google Spreadsheet as JSON Hosting + v4 Google sheet API authentication
Script that auto synchronize translations between Google Spreadsheet & JSON file (with google-spreadsheet library & Google Sheets API) by given two methods: – Scanning the key from the source code and uploading the scanned key to Google spreadsheet. – Downloading the translated strings from Google spreadsheet when building the source code.

Let’s Start

Step 1 — Install and configure i18next & react-i18next library

npx create-react-app react-internationalization
cd react-internationalization
npm install @mui/material @emotion/react @emotion/styled

This will create a basic CRA. We also installed MUI 5 for creating UI components.

npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend

This will install i18next framework and its React wrapper.

Next create a file i18n.js at the top level of the project with given configuration below:

Then import the file in index.js as shown below:

All translations goes into — _public/locales _— with a separate JSON file for each supported language.

├── public/
│ ├── locales/
│ ├── en/
| ├── translation.json
|
│ ├── no
| ├── translation.json
|

Also place the snippet below in App.js for UI components that reflects switch between multiple languages.

Step 2 — Setup Google Spreadsheet

Create a Google Sheet with the following structure:

Note the spreadsheet id.

1B1njd441X7di47joj9OvQGuJZ-mR9yFQrpr0WNW6c94

To handle v4 Google sheet API authentication follow service account option. Generated JSON file as shown below; secret.json is kept at the top level of the project and add it to .gitignore!

{
  "type": "service_account",
  "project_id": "XXXXXXXXXXXXXXX",
  "private_key_id": "XXXXXXXXXXXXXXX",
  "private_key": "XXXXXXXXXXXXXXX",
  "client_email": "service-account-google-sheet-a@XXXXXXXXXXXX.iam.gserviceaccount.com",
  "client_id": "XXXXXXXXXXXXXXX",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service-account-google-sheet-XXXXXXXXXXXXX.iam.gserviceaccount.com"
}

Step 3 — Automated script to synchronize translations between Google Spreadsheet & JSON file

google-spreadsheet is a wrapper library that lets you use the Google Sheets API. It can be used to create a new sheet or to read, write, and manage cells and rows.

npm i google-spreadsheet

Create fetch-google-spreadsheet.js and push-google-spreadsheet.js file at the top level of the project and insert the below code in it.

Insert scripts in package.json

{
"start": "npm run fetch:i18n && react-scripts start",
"build": "npm run fetch:i18n && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"push:i18n": "node push-google-spreadsheet.js",
"fetch:i18n": "node fetch-google-spreadsheet.js"
}

Developer: Run npm run push:i18n then request translation.
Translator: Enter translations in the spreadsheet

This is it. Every time you build/start application, the npm run fetch:i18n will be executed and the most recent translation will be applied to the build. I hope this helps.

Source Code!

The full source code is available here — https://github.com/anlisha-maharjan/react-internationalization-googlespreadsheet-i18next.

More info!

The post Automating Internationalization with Google Spreadsheet and i18next. first appeared on Anlisha Maharjan.

Integrate Jitsi Meet IFrame API in React

Anlisha Maharjan — Sun, 13 Feb 2022 16:15:00 +0000

Jitsi is a set of open-source projects that allows you to easily build and deploy secure videoconferencing solutions.

We’ll be using IFrame API to embed Jitsi Meet functionality in React application.

A peak at final UI!

Let’s Start!

Step1 — Start Basic CRA

npx create-react-app react-jitsi-meet
cd react-jitsi-meet
npm install @mui/material @emotion/react @emotion/styled

We also installed MUI 5 for creating UI components.

Step 2 — Setup Jitsi component; Initialize Jitsi Meet API library scripts

A container element with pre-defined height and width is must for Jitsi iframe to render into.

If you have self-hosted Jitsi server in your domain, you can specify its URL endpoint instead of meet.jit.si.

Note thatinitialise function is called only once when the component is first rendered, and Jitsi’s dispose() method is called when the component is destroyed.

Also the object from instantiating JitsiMeetExternalAPI provides methods and event listeners to configure and control the Jitsi interface. For example: interfaceConfigOverwrite allows to overrides options such as APP_NAME, DEFAULT_BACKGROUND.

Step 3— Import Jisti Component in App.js

import React from “react”;
import Jitsi from “./components/jitsi”;
function App() {
  return <Jitsi uuid=”1be9b511-eb38–4a97–909b-d70ee03a9501" />;
}
export default App;

This is it.

Source Code!

all the source code is available at — https://github.com/anlisha-maharjan/react-jitsi-meet

More Info!

Have a look at Jitsi’s docs for all the options, commands, methods and events available.

The post Integrate Jitsi Meet IFrame API in React first appeared on Anlisha Maharjan.