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!

Originally published at https://anlisha.com.np on January 9, 2023.

Deploy Laravel with GitHub Actions on Shared Hosting was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

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:

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

Originally published at https://anlisha.com.np on December 28, 2022.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Looking to scale your software startup? Check out Circuit.

Deploy React with GitHub Actions on Shared Hosting was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

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!

Originally published at https://anlisha.com.np on November 29, 2022.

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

Originally published at https://anlisha.com.np on October 25, 2022.

Setup Bitbucket CI/CD for React was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

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!

Originally published at https://anlisha.com.np on August 24, 2022.

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!

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

Or

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

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.

An Introduction to Absolute Imports in React Native was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 - LinkedIn

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!

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!

Tailwind CSS in HTML starter via NPM was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

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!

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!