DEV Community: Seye Yemi-Olowolabi

Running Laravel Queue Workers on a Server with Supervisor

Seye Yemi-Olowolabi — Thu, 14 Sep 2023 13:50:40 +0000

Introduction

Laravel, one of the most popular PHP frameworks, provides a powerful way to manage and process background tasks through its queue system. To ensure that your queue workers run continuously and recover from failures automatically, it's common practice to use Supervisor, a process control system.

In this guide, I will walk you through the steps of setting up Supervisor to run the php artisan queue:work command for your Laravel project. This will help you manage and monitor your queue workers effectively.

Prerequisites

Before you begin, make sure you have the following prerequisites:

A Laravel project set up on your server.

Step 1: Install Supervisor

1.1. If Supervisor is not already installed on your server, you can install it using your package manager. For example, on Ubuntu, you can install it with the following command:

sudo apt-get install supervisor

Step 2: Create a Supervisor Configuration File

2.1. Navigate to your Laravel project directory, where you want to run the queue worker. You should be in the root directory of your Laravel project.

2.2. Create a Supervisor configuration file for your Laravel queue worker. You can do this with a text editor or a command-line text editor like nano. In this example, we'll create a file called laravel-worker.conf:
nano /etc/supervisor/conf.d/laravel-worker.conf

2.3. Add the following configuration to the file, adjusting the paths and settings according to your Laravel project:

[program:laravel-worker] process_name=%(program_name)s_%(process_num)02d command=php artisan queue:work directory=/path/to/your/laravel/project user=www-data autostart=true autorestart=true redirect_stderr=true stdout_logfile=/path/to/your/laravel/project/storage/logs/worker.log
I will also show you the one on my personal website for more clarity of what it should look like

[program:laravel-worker] process_name=%(program_name)s_%(process_num)02d command=php /www/wwwroot/mywebsite.com/artisan queue:work directory=/www/wwwroot/mywebsite.com user=www-data autostart=true autorestart=true redirect_stderr=true stdout_logfile=/www/wwwroot/mywebsite.com/storage/logs/worker.log

Step 3: Update Supervisor Configuration

3.1. After creating the Supervisor configuration file, update Supervisor to read the new configuration and start the worker:

supervisorctl reread supervisorctl update supervisorctl start laravel-worker:*
Step 4: Check Worker Status

4.1. You can check the status of the Laravel queue worker by running:

supervisorctl status
It should show the status of the laravel-worker program, indicating that it is running.

Stopping the Worker

To stop or kill the php artisan queue:work process managed by Supervisor, you can use the supervisorctl command:

Navigate to your Laravel project directory.
Use supervisorctl to stop the php artisan queue:work process, replacing laravel-worker with your actual program name:

supervisorctl stop laravel-worker:*

Confirm that the process has been stopped by checking its status:

supervisorctl status
The status should indicate that the laravel-worker program is no longer running.

Conclusion

Using Supervisor to manage your Laravel queue workers ensures that they run continuously and are automatically restarted in case of failures. This setup helps you process background tasks reliably, ensuring that your Laravel application stays responsive and efficient.

With this guide, you can set up Supervisor to run php artisan queue:work effortlessly, improving the reliability and stability of your Laravel application.

Thank you for reading, Happy Hacking :)

URL Query Params in React.js and Next.js 13: A Comprehensive Tutorial

Seye Yemi-Olowolabi — Tue, 04 Jul 2023 09:08:14 +0000

URL query parameters provide a powerful way to pass and retrieve data within a URL. In web development, they are commonly used to transmit information between different pages or components. React.js and Next.js are popular JavaScript frameworks for building user interfaces and server-side rendering, respectively. In this tutorial, we will explore how to work with URL query parameters in both React.js and Next.js applications.

Prerequisites
To follow along with this tutorial, you should have a basic understanding of React.js and Next.js, as well as a development environment set up for either framework.
React.js Solution

In React.js, we can access URL query parameters using the URLSearchParams API, which allows us to retrieve and manipulate the query string portion of a URL.

Here's an example of how to use URL query parameters in a React.js component:

import React from 'react';

const Component = () => {
    const searchParams = new URLSearchParams(document.location.search);

    return (
        <div>
            Tutorial: {searchParams.get('tutorial')}
        </div>
    );
};

export default Component;

In the code above, we create a new instance of URLSearchParams with document.location.search, which represents the query string portion of the current URL. We can then use the get method of URLSearchParams to retrieve the value of a specific query parameter, in this case, 'tutorial'. The component renders the retrieved value within a div element.

Next.js 13 Solution

Next.js is a framework that simplifies server-side rendering and provides an integrated routing system. To work with URL query parameters in Next.js, we can utilize the built-in URL and URLSearchParams APIs.

Consider the following code snippet to access URL query parameters in a Next.js application:

const url = new URL(request.url);
const searchParams = new URLSearchParams(url.search);
const skip = searchParams.get("skip"); // Retrieves the value of the 'skip' parameter
const limit = searchParams.get("limit"); // Retrieves the value of the 'limit' parameter

console.log(skip);
console.log(limit);

It uses the URL and URLSearchParams APIs to parse the query string portion of the URL and retrieve the values of the 'skip' and 'limit' parameters.
You can use this solution inside your server components.
Leave a like if this helped you, Thanks
Happy Hacking :)

How to make Checkbox Filter with Vue JS

Seye Yemi-Olowolabi — Mon, 22 Aug 2022 12:42:00 +0000

Hello Guys, In this tutorial we will be making a simple checkbox filtering component in Vue JS and Bootstrap. i will also be using fontawesome to add a few icons. To follow along, you have to have a vue 3 project set up. if you do not have a vue JS project already set up, you can do so with the vue CLI

Click Here to view the Github repository containing all the code for this project.
Click Here to view a preview of the this project working on codesandbox.

After you have installed the vue CLI and have scaffolded a new project, we will firstly add that black background to our project like the one in the image

Navigate to the public folder and click on the index.html file, then add this small style tag to the head tag



<style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #app {
        height: 100%;
        background-color: black;
      }
    </style>

Now lets get to the main part

The project will carried out in four steps;

Installing bootstrap
Installing fontawesome
Building the User Interface
Adding functionality

Installing Bootstrap

The bootstrap installation is pretty straightforward and only requires one line of code if you install it with the node package manager "npm". it automatically pulls in all the source files required.



npm install bootstrap

Installing Font Awesome

The first step in installing fontawesome is to use npm to install the core package which contains all the utilities to make the icons work ```shell

npm i --save @fortawesome/fontawesome-svg-core

- Next you will need to install the icon packages that you want to use. for the free icon packages. the various icon packages can be found on the [Font awesome](https://fontawesome.com/) website. i will be installing free solid, free regular and free brands icon packages
```shell


# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

You will need to install the fontawesome vue component, this is what will be used to position the icons on the page ```shell

npm i --save @fortawesome/vue-fontawesome@latest-3

- To start adding icons, you will need to replace your src/main.js file with the following code snippet. specific icons can be imported and then added to the library for use
```js


/* Set up using Vue 3 */
import { createApp } from 'vue'
import App from './App.vue'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

Building the User Interface

The HTML markup snippet for this challenge is written below. an important aspect of this markup is that the checkboxes have been modeled to the checked array from the data method. whenever a checkbox is clicked, its value would be inside that array



<template>
  <div
    class="
      container-fluid
      d-flex
      flex-column
      aligns-items-center
      justify-content-center
      bg-dark
    "
  >
    <div class="row bg-dark border-bottom border-primary border-3">
      <div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value="happy"
            id="flexCheckDefault"
            v-model="checked"
            checked
          />
          <font-awesome-icon
            icon="fa-solid fa-face-grin-wide"
            style="color: yellow; font-size: 25px"
          />
        </div>
      </div>
      <div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value="meh"
            id="flexCheckDefault"
            v-model="checked"
            checked
          />
          <font-awesome-icon
            icon="fa-solid fa-face-meh"
            style="color: yellow; font-size: 25px"
          />
        </div>
      </div>
      <div class="col-4 text-light pt-2 ps-4 d-flex justify-content-center">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value="sad"
            id="flexCheckDefault"
            v-model="checked"
            checked

          />
          <font-awesome-icon
            icon="fa-solid fa-face-frown"
            style="color: yellow; font-size: 25px"
          />
        </div>
      </div>
    </div>
    <div class="container-fluid" v-for="item in computedItems" :key="item.id">
      <div class="row bg-dark p-3">
        <div
          class="
            col-4
            text-light
            d-flex
            aligns-items-center
            justify-content-center
          "
        >
          <font-awesome-icon
            v-bind="{ icon: item.icon }"
            :style="{ fontSize: 25 + 'px', color: item.color }"
          />
        </div>
        <div
          class="
            col-4
            text-light
            d-flex
            aligns-items-center
            justify-content-center
          "
        >
          <h5>{{item.text}}</h5>
        </div>
        <div
          class="
            col-4
            text-light
            d-flex
            aligns-items-center
            justify-content-center
          "
        >
          <input
            class="
              bg-dark
              text-light
              border border-secondary border-3
              rounded
              ps-2

            "
            type="number"
            name=""
            id=""
            :value="item.id"
            style="width: 70%"
          />
        </div>
      </div>
    </div>
  </div>
</template>

Adding Functionality

Next up is the script section of the project. This contains the functionality
the first thing to be done is to import the bootstrap into the prioject



// importing bootstrap into the project
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

Inside our export defaults array would be using various lifecycle methods like data, mounted and we will also be using the computed method. Inside the data method we would be storing an array of the items and the categories that would be checked by default



export default {
  name: "App",
  components: {},

  data() {
    return {
      checked: [
        "happy",
        "sad",
      ],
      items: [],
    };
  },

};

The array of items is empty and thats because it would be coming from the mounted method.



mounted() {
    this.items = [
      {
        id: 1,
        text: "food",
        category: "happy",
        icon: "fa-solid fa-burger",
        color: "yellow"
      },

      {
        id: 2,
        text: "games",
        category: "happy",
        icon: "fa-solid fa-chess",
        color: "purple"

      },

      {
        id: 3,
        text: "bills",
        category: "sad",
        icon: "fa-solid fa-money-bill-1-wave",
        color: "green"
      },

      {
        id: 4,
        text: "illness",
        category: "sad",
        icon: "fa-solid fa-bed-pulse",
        color: "red"
      },
    ];
  },

Lastly we have the computed property, here lies the functionality for filtering the array of items. the method here returns an array based on the array of items and the checked array.
If nothing is checked (checked array is empty), it returns an empty array.
If theres something insde the checked array, it filters the array of items and only includes the ones that have their category in the checked array



computed: {
    computedItems(){
      if (this.checked.length === 0) {
        return [];
      } else {
        return this.items.filter(item =>
          this.checked.indexOf(item.category) !== -1 
        );  
      }
    }
  }

So thats it guys, we built a simple checkbox filtering component with Vue JS, we added some nice icons to it with fontawesome and we styled it with bootstrap.