DEV Community: webdeasy.de

GitHub Actions: Quickstart-Guide for every Developer!🚀

webdeasy.de — Tue, 05 Nov 2024 16:04:29 +0000

In this Quickstart guide, I want to introduce you to GitHub Actions and show you how you can use GitHub Actions to create CI/CD pipelines to automate boring, repetitive tasks.

GitHub Actions is a versatile tool that developers can use to organise their software development processes more efficiently. You can mainly use GitHub Actions as a CI/CD pipeline (CI = Continuous Integration, CD = Continuous Delivery) and is therefore comparable with Jenkins, CircleCI or Azure DevOps, for example.

I myself actually use GitHub Actions in every repo that I have created in GitHub. For example, to deploy changes in this blog or as a complete CI/CD pipeline for my JavaScript Challenge platform.

What is GitHub Actions?

GitHub Actions is a powerful automation tool that is directly integrated into GitHub and enables developers to create automated workflows for their software development projects. GitHub Actions can be used to set up CI/CD pipelines, run tests, analyse code and much more. It offers a flexible and customisable way to automate development processes by combining different actions and workflows.

To be more precise, you can actually do anything you can think of: Execute unit tests, deploy to a VM, deploy to a Kubernetes cluster, create/build apps, deploy to various services of all common cloud providers, code security scans, etc. This list can be extended almost endlessly 😉

A workflow in GitHub Actions consists of one or more actions that are executed as steps in a defined sequence. These workflows are defined in YAML files and saved in the .github/workflows directory of the repository.

The screenshot is the result of executing the GitHub Actions Workflow of this blog, whereby changes in the repository are automatically rolled out on the production server. If an error occurs, a rollback to the last stable version is performed.

And what does the fun cost me? Nothing! GitHub provides the service for public repos completely free of charge and there is also a generous free quota for private repositories, which lasts for quite a while and resets every month.

Creating a GitHub Actions Workflow

To create a new GitHub actions workflow, you can simply use the ‘Actions’ tab in your GitHub repo or alternatively create a YAML file in the path .github/workflows.

To understand how a workflow in GitHub Actions is structured, I have a very simple CI pipeline for you here, which I will explain step by step.

name: CI Pipeline

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - name: Check out repository
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '20'

    - name: Install dependencies
      run: npm install

    - name: Run tests
      run: npm test

What exactly happens here? The pipeline is triggered every time a push is executed in the repository. You can find out more about triggers and events later in this GitHub Actions tutorial. Let’s go through the steps one by one:

Check out repository: This step checks out the code in the repository.
Set up Node.js: Deploys Node.js version 20 in the current environment.
Install dependencies: Executes the npm install command to install the project dependencies.
Run tests: Executes the npm test command to run the tests of the project.

This example shows you the basic structure of a pipeline. You can execute any number of steps and jobs per GitHub Actions workflow.

Triggers & Events

GitHub Actions provides a flexible way to execute workflows based on various triggers and events. These triggers determine when a workflow is started and can respond to a variety of GitHub events, such as code changes, issues and schedules.

Code changes/new commits on a specific branch:
This workflow is only executed when a commit is pushed to the develop branch.

on:
  push:
    branches:
      - develop

Tags that correspond to a specific pattern:
Here, the workflow is only started if a tag beginning with release- (e.g. release-1.0.0) is pushed.

on:
  push:
    tags:
      - 'release-*'

Regular execution:
This workflow is executed every Monday at 12 noon.

on:
  schedule:
    - cron: '0 12 * * 1'

It is also very useful to carry out tests and linting, for example, before a pull request can be confirmed.

GitHub Marketplace

You don’t have to programme all actions yourself. That’s why the GitHub Marketplace is a central point of contact for predefined actions that you can integrate into your workflows to speed up and simplify the development process. Here you will find a variety of actions created by the community and GitHub itself to automate common tasks such as testing, code analysis and much more.

Suppose you want to use an action that automatically checks your code for formatting errors. A popular action for this purpose is the Prettier action, which formats the code with Prettier.

Here is an example of how you can integrate this action into your workflow:

name: Format Code

on: [push, pull_request]

jobs:
  format:

    runs-on: ubuntu-latest

    steps:
    - name: Check out repository
      uses: actions/checkout@v2

    - name: Run Prettier
      uses: creyD/prettier_action@v3.3
      with:
        prettier_options: --write **/*.js

This workflow is executed for every push and pull request and checks whether the JavaScript code is formatted correctly. The prettier_action is integrated from the GitHub Marketplace and configured with the desired options.

Using the GitHub Marketplace offers considerable advantages, such as time savings, as you have immediate access to numerous ready-made actions without having to develop your own solutions. In addition, the regular maintenance and updating of the actions ensures high quality and security. Thanks to the support of the GitHub community, you benefit from constantly improved and new actions.

Other useful actions

CodeQL Analysis: Automate code analysis to detect security vulnerabilities.
Snyk Vulnerability Scan: Automated scan of your code for security vulnerabilities.
Docker Build and Publish: Create and publish Docker images directly from your workflow.
Slack Notifications: Send notifications to Slack channels to inform your team about the status of workflows.

GitHub Actions Best Practices

If you use GitHub Actions, I think there are a few best practices that you should follow. This can save you execution time and increase the security of your workflows.

Use secrets and variables: Use secrets and environment variables to securely manage sensitive data such as API keys or access data. Store this information in the repository without saving it directly in the code to minimise security risks (can be found in the repo settings under ‘Secrets and variables’).
Optimise runtime: Optimise the runtime of your workflows by avoiding unnecessary steps and using caching techniques. This reduces the execution time and resource load, making your workflows more efficient.
Monitor workflows: Monitor your workflows regularly to avoid unexpected errors. If a workflow fails, you will even be notified automatically by email. So keep an eye on your inbox too.
Pay attention to the versioning of actions: Make sure to use specific versions of actions to ensure that changes or updates do not cause unexpected problems in your workflow. Use fixed version numbers instead of ‘latest’ to ensure consistency.
*Keep actions small: * Keep your actions small and specific to increase maintainability and reusability. A modular structure makes debugging easier and allows you to update individual components quickly if necessary.
Use the GitHub Marketplace: Access the GitHub Marketplace to find predefined actions and integrate them into your workflows. This saves time and effort, as you can access tested and reliable solutions instead of creating your own actions from scratch.

Conclusion

As you can see, GitHub Actions is extremely flexible. Setting up a new workflow is sometimes a little time-consuming, but it saves time and nerves in the long run, as you save yourself repetitive tasks and thus avoid mistakes. To get started, I recommend the Quickstart Guide, directly from GitHub.

Some texts were created with the help of AI. All content has been thoroughly checked!

Rest API Testing: How to test Rest APIs properly!

webdeasy.de — Wed, 07 Aug 2024 08:00:00 +0000

Rest API testing is one of the most important tasks when developing reliable and secure Rest APIs. Here you will find a complete overview of everything you should consider when testing your Rest API.

There are countless ways to test a Rest API. The procedure depends, for example, on the application, the programming language and the development team. However, there are a few basic things you should always bear in mind. And that's exactly what this blog post is about.

Why you should test your Rest API

An API is like a contract between a client and a server or between two applications. Before testing the implementation, it must be ensured that the contract is correct by checking the specification (e.g. Swagger or OpenAPI). For Rest APIs, it is important that all HTTP REST semantics and principles are adhered to. This is all the more important for publicly accessible APIs so that all functionalities can continue to be guaranteed after updates.

Security checks are an essential part of the testing process. By testing, you can uncover and close potential security gaps to protect your application from attacks. Another important aspect is optimising performance. Through testing, you can measure the response times of your API and ensure that it remains fast and reliable even under high load. In this way, bottlenecks and performance problems can be recognised and rectified at an early stage.

Last but not least, testing enables the integration of your API into a Continuous Integration and Deployment (CI/CD) pipeline, which automatically checks changes to the code and ensures continuous quality assurance.

Selection of the optimal test cases

Before we can start writing the tests, I would like to briefly explain how to select the right test cases. This is actually the most important task. Otherwise we can write a hundred tests, none of which add any value. We need to think particularly carefully about edge cases. Edge cases are test inputs that are most likely to trigger a faulty output or even a programme error.

Note: There are different types of tests, e.g. integration tests, unit tests or functional tests. Various tests are shown in this blog post, but I will not go into the differentiation of the test types in detail.

To make the selection a little clearer, I have come up with a case study. These are our requirements:

We want to create a function to register a user (/sign-up route)
Username, password and password repetition should be queried
The user name must not yet be assigned
The user should receive an e-mail to complete the registration (double opt-in)

With a little logical thought, the following test cases come to mind first:

Have all parameters (user name, password, password repetition) been transferred?
Does the user name already exist in the database?
Has the confirmation e-mail been sent?

That is all correct, but we have forgotten a few more. And these are the so-called marginal cases:

Is the HTTP request method correct?
Have all required parameters been transferred in the correct format?
Do the password and password repetition match?
Is the password length sufficient?
Could the database query be executed without errors?
Are the correct HTTP status codes returned in the event of an error?
Is the user name not too long for the database field (e.g. if VARCHAR is limited to 255 characters)?
Has a valid token been created for the double opt-in and successfully saved in the database?
Are the entries XSS and SQL injection-proof?

The aim is to look at the enquiry from a different angle in order to cover as many edge cases as possible. I hope that I can sensitise you to this with this example.

Take your time to select the test cases. This is more important than writing the tests. Once you have done this correctly, you will save yourself a lot of time in the future.

Rest API Testing Tools

There are numerous tools for testing Rest APIs. There are tools with which we can execute HTTP requests directly or tools with which we can write unit tests and thus test our Rest API. These are my two favourite ways:

Postman: Postman is a widely used tool that provides an intuitive user interface for testing and debugging Rest APIs. With Postman, you can quickly and easily create, test and save API requests. It is easy to use and working with multiple developers on the same resources works great.
Unit Testing: Yes, Rest APIs can also be tested using unit tests. This involves executing the HTTP requests and validating the result. Although this method initially requires more effort, it offers the advantage of complete integration into your development process and enables continuous testing. Each programming language has its own tools. I mainly develop with JavaScript, so I can show you a practical example here. I use Mocha and Chai as testing frameworks. For each test, one or more requests are sent to the corresponding Rest API endpoints and the result is validated.

const chai = require('chai');
const chaiHttp = require('chai-http');
const server = require('../../index');
const should = chai.should();
require('dotenv').config();

chai.use(chaiHttp);

describe('## Entries - Test entry functionalities', () => {
  let token;
  let listId;

  // authenticate user before running tests
  before((done) => {
    // ...
  });

  it('should be able to create a new entry', (done) => {
    const entry = {
      name: 'Test entry',
    };

    chai
      .request(server)
      .post(`/api/${process.env.API_VERSION}/list/${listId}/entries`)
      .set('Authorization', `Bearer ${token}`)
      .send(entry)
      .end((err, res) => {
        res.should.have.status(201);
        res.should.be.json;
        res.body.should.have.property('id');
        res.body.should.have.property('listID');
        res.body.should.have.property('name');
        res.body.should.have.property('checked');

        const entry = res.body;

        // checked should be false by default
        entry.checked.should.equal(false);

        done();
      });
  });

  it("shouldn't be able to create a new entry if the list does not exist", (done) => {
    const entry = {
      name: 'Test entry',
    };
    const unrealisticListId = 9999999;

    chai
      .request(server)
      .post(`/api/${process.env.API_VERSION}/list/${unrealisticListId}/entries`)
      .set('Authorization', `Bearer ${token}`)
      .send(entry)
      .end((err, res) => {
        res.should.have.status(404);
        done();
      });
  });

  it("shouldn't be able to create a new entry if the name is not provided", (done) => {
    const entry = {};

    chai
      .request(server)
      .post(`/api/${process.env.API_VERSION}/list/${listId}/entries`)
      .set('Authorization', `Bearer ${token}`)
      .send(entry)
      .end((err, res) => {
        res.should.have.status(400);
        res.text.should.eql('Missing name property');

        done();
      });
  });

  it('should be able to get all entries for a list', (done) => {
    chai
      .request(server)
      .get(`/api/${process.env.API_VERSION}/list/${listId}/entries`)
      .set('Authorization', `Bearer ${token}`)
      .end((err, res) => {
        res.should.have.status(200);
        res.should.be.json;
        res.body.should.be.a('array');

        done();
      });
  });

  it("shouldn't be able to get all entries for a list if the list does not exist", (done) => {
    const unrealisticListId = 9999999;

    chai
      .request(server)
      .get(`/api/${process.env.API_VERSION}/list/${unrealisticListId}/entries`)
      .set('Authorization', `Bearer ${token}`)
      .end((err, res) => {
        res.should.have.status(404);
        res.text.should.eql('List not found');
        done();
      });
  });

  it('should be able to update the properties of an entry', (done) => {
    let entry = {
      name: 'Default name',
      checked: false,
    };

    // create a new entry
    chai
      .request(server)
      .post(`/api/${process.env.API_VERSION}/list/${listId}/entries`)
      .set('Authorization', `Bearer ${token}`)
      .send(entry)
      .end((err, res) => {
        res.should.have.status(201);

        const createdEntryId = res.body.id;

        // update the entry
        let changedName = 'Changed entry name';
        entry.name = changedName;
        entry.checked = true;
        entry.priority = 99;

        // send the patch request
        chai
          .request(server)
          .patch(
            `/api/${process.env.API_VERSION}/list/entries/${createdEntryId}`
          )
          .set('Authorization', `Bearer ${token}`)
          .send(entry)
          .end((err, res) => {
            res.should.have.status(200);
            res.should.be.json;

            // check if the name has changed
            res.body.name.should.equal(changedName);

            // check if the checked state has changed
            res.body.checked.should.equal(true);

            // check if the priority has changed
            res.body.priority.should.equal(99);

            // delete the entry
            chai
              .request(server)
              .delete(
                `/api/${process.env.API_VERSION}/list/entries/${createdEntryId}`
              )
              .set('Authorization', `Bearer ${token}`)
              .end((err, res) => {
                res.should.have.status(200);
                done();
              });
          });
      });
  });
[...]

There are similar tools in other programming languages. Here are a few more common tools:

JUnit: A popular framework for testing Java applications. It is ideal for creating unit tests for rest APIs in Java.
RestAssured: A DSL-based Java tool developed specifically for testing Rest APIs. It provides a simple and expressive syntax for validating API requests and responses.
PyTest: A well-known Python framework for writing unit tests in Python.

Rest API Tests in Postman

Postman is one of my favourite tools for testing Rest APIs. I would therefore like to show you in more detail how you can create tests.

Organise requests in Postman

If you have installed Postman, this interface awaits you. You should create a separate collection for each project/rest API. This is like a folder in which you can organise your individual requests. In addition, you can then execute the tests for all the requests it contains with a single click.

We can then create any number of requests per collection. I have highlighted the most important settings in red.

Firstly, we should give our request a name so that it can be recognised quickly (‘Login’ in this case). This also appears on the left in the collection menu.

Next, we can set the corresponding HTTP request method for each request and specify the exact URL of the Rest API route to be checked.

Tip: You should create recurring data such as the base URL (http://localhost:3000) as variables.

On the far right you will find the ‘Send’ button to send an enquiry directly.

Transfer body data

In many cases, we want to send data to the Rest API. We can either do this via the ‘Params’ tab. These are then transmitted to the server according to the HTTP request method or we use the ‘Body’ tab to transmit data in other data formats.

JSON is often used on the web as it is very flexible and can be used to transfer complex data structures. It is important that you select ‘raw’ above the text field and then select the ‘JSON’ format to the right of it. Otherwise the data may not be transferred correctly.

The data can now be transferred to the large text field in JSON format.

This can look like this, for example. Postman shows you errors in the JSON structure directly. However, you can test it more precisely with this JSON validator.

{
"username": "webdeasy.de",
"password": "f00b4r",
"password_repeat": "foob4r"
}

Whether you use URL parameters or body data depends entirely on the implementation of your Rest API. This is how you access it in Node.js:

router.post('/sign-up', (req, res, next) => {
  // body data
  console.log(req.body.YOURDATA);

  // url parameters
  console.log(req.params.YOURPARAM)
});

Insert Authorisation Keys

If you have implemented a login with Bearer Token, you can transfer this in the ‘Authorisation’ tab. To do this, select ‘Bearer Token’ and enter it on the right under ‘Token’.

For other authentication methods, you can select the appropriate one under ‘Type’.

Tip: You can find your last queries under the ‘History’ menu item.

Programming test cases in Postman

We have entered and clearly structured the individual routes. You can now execute and test them using the ‘Send’ button. However, you always have to check all results manually. It is easier if a script takes over the task for us. We can do this under the ‘Tests’ tab.

Here you have the opportunity to programme your test cases, which is easier than it sounds at first.

We can use the following code to query the correct status code:

pm.test("Status test", function () {
    pm.response.to.have.status(200);
});

It can be that simple. What you will also often need is to query a response header variable. Here I check whether the response is an image of the type ‘jpeg’:

pm.test("Content-Type is image/jpeg", function () {
   pm.response.to.have.header("Content-Type");
   pm.response.to.be.header("Content-Type", "image/jpeg");
});

Tip: On the right-hand side under ‘Snippets’ you can click to insert ready-made tests.

More detailed documentation on creating test cases is available directly at learning.postman.com.

Execute tests automatically

We have created our test cases manually. However, to save us some time, we can run all the tests together in a collection. To do this, select the collection and click on ‘Run’. You can then set the number of iterations (executions) and other points.

You will then receive a detailed test log and can rectify errors in the code directly and run the test again.

Automatic Rest API Tests in a CI/CD pipeline

It is a good and popular practice to run tests directly from a CI/CD pipeline. As a result, many errors are seen directly when the code is checked into the repo and can be rectified. In the best case, before everything is deployed to production.

The following code is an excerpt from a GitHub Actions workflow file, in which tests of a Node.js backend are executed.

name: Execute Unit Tests

on:
  push:
    branches: [ "develop" ]

jobs:
  test:

    runs-on: ubuntu-latest

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

    steps:
    - uses: actions/checkout@v3

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'

    - name: Install dependencies and run tests
      run: |
        npm install
        npm run test
      env:
        CI: true # set environment variable to run tests in CI mode

Cool, right? I’ve created a detailed blog post explaining how to create CI/CD pipelines with GitHub Actions.

Summary

Testing Rest APIs is an important step in ensuring the quality and performance of the application. By carefully selecting test cases and using different test methods, potential problems can be recognised and rectified at an early stage. Integration into your CI/CD pipeline enables continuous review, while adherence to the API specification ensures contract compliance.

If you liked this tutorial, I would be grateful if you would check out my other articles on my blog webdeasy.de 🚀

Some texts were created with the help of AI. All content has been thoroughly checked!

GitHub Container Registry: How to push Docker images to GitHub 🐋

webdeasy.de — Thu, 11 Jul 2024 10:00:00 +0000

The GitHub Container Registry allows you to publish or host private and public Docker images. You can find out everything you need to know in this tutorial.

With its registry service GitHub Packages, GitHub provides a way for developers to host their own Docker images directly in GitHub. In my opinion, the name of GitHub is somewhat misleading: the umbrella term for the service is GitHub Packages. It contains a number of registries. These include the Docker Registry, which has been renamed the Container Registry in order to host all types of containers.

Why not use Docker Hub? 🐋

The Docker Hub is the first port of call when it comes to Docker images – no question about it. In the free version, however, only one private image is available to each account and the number of pulls (200 pulls per 6 hours) is also limited. And this is where the GitHub Container Registry comes into play! 🙂

Push Docker Images into the GitHub Registry

To create a Docker image, we need a Docker image, which we have to create with a Dockerfile. You can create such a Dockerfile using the docker init command, for example. Once the file is available, we can build the image:

docker build -t frontend .

In the next step, we need to log in to the GitHub Container Registry. To do this, we need a personal access token from GitHub.

Generate Personal Access Token (PAT)

To generate a new PAT, navigate to GitHub Settings > Developer seettings > Personal access tokens > Tokens (classic) and create a new token. You must select “write:packages” and** “read:packages”** as the scope. You can adjust the duration of the token to your project or set it to unlimited.

You should save the token, e.g. in your password manager. If you lose the token, you will have to regenerate it.

Now open a terminal on your computer and set your PAT in a variable (replace <YOUR_PAT> with your token):

# Set PAT into a variable
export GH_PAT=<YOUR_PAT>

To log in to the GitHub Container Registry (ghcr.io), use the following command (replace <USERNAME> with your GitHub username).

# Login to the GitHub Container Registry using your PAT
echo $GH_PAT | docker login ghcr.io -u <USERNAME> --password-stdin

If the PAT and your user name were correct, you should receive the message “Login Succeeded”.

Next, we tag the image so that it also ends up in the correct registry. Replace <USERNAME> with your GitHub username, <IMAGE_NAME> with the desired name of the image and <TAG> with the desired tag (default: latest)

# Tag the builded docker image
docker tag frontend ghcr.io/<USERNAME>/<IMAGE_NAME>:<TAG>

Now we can push the image into the registry. Here you have to replace the same variables as when tagging:

docker push ghcr.io/<USERNAME>/<IMAGE_NAME>:<TAG>

If you have done everything correctly, you should receive such an output or no error message 😉

Congratulations! You have successfully pushed your first Docker image to the GitHub registry! 🎉

On this page you now have further options, such as changing the visibility or deleting the image.

Pulling GitHub Docker Images

Of course, you can now also use your Docker images from the registry. The path is the same as for pushing:

docker pull ghcr.io/<USERNAME>/<IMAGE_NAME>:<TAG>

GitHub Actions Workflow for Docker Images in the GitHub Registry

Pushing Docker images manually is daft! That’s why there are CI/CD pipelines that we can implement with GitHub Actions, for example. For certain events, e.g. a new commit, we can automatically build the Docker image and publish it in the registry. In the following example, a Docker image is built and published when the frontend branch is pushed. Building and publishing is already done after the “Build and push Docker image” step. However, I have left the last two steps in for the sake of completeness, as this is a workflow of one of my projects and you may also have a use case for it 😉

In your GitHub repository, you can simply create a file under .github/workflows/cd.yml.

name: Continuous Deployment - Frontend

on:
  push:
    branches: ['frontend']

env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  build-and-push-image:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
      attestations: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Log in to the Container registry
        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}

      - name: Build and push Docker image
        id: push
        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
        with:
          context: .
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}

      - name: Install SSH client
        run: sudo apt-get update && sudo apt-get install -y openssh-client

      - name: Deploy to VM
        env:
          SSH_HOST: ${{ vars.SSH_HOST }}
          SSH_USER: ${{ secrets.SSH_USER }}
          SERVER_SSH_KEY: ${{ secrets.SERVER_SSH_KEY }}
          IMAGE_TAG: ${{ steps.meta.outputs.tags }}
        run: |
          echo "${{ env.SERVER_SSH_KEY }}" > key.pem
          chmod 600 key.pem
          ssh -i key.pem -o StrictHostKeyChecking=no ${{ env.SSH_USER }}@${{ env.SSH_HOST }} << 'EOF'
            docker login ${{ env.REGISTRY }} -u ${{ github.actor }} -p ${{ secrets.MY_PERSONAL_PAT }}
            docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}
            cd ~
            docker compose down frontend
            docker compose up -d frontend
          EOF
          # Clean up the private key.pem
          rm key.pem

And don’t forget: Create the used secrets and variables in the repository settings. In this case:

Secrets:
- MY_PERSONAL_PAT
- SERVER_SSH_KEY
- SSH_USER
Variables:
- SSH_HOST

GitHub Container Registry: Conclusion

That’s it! Building and publishing Docker images in the GitHub Docker Registry or GitHub Container Registry is very similar to Docker Hub. Only the login via the GitHub PAT is a little more complicated, but also offers advantages in terms of authorisation management, etc. Will you be using the GitHub Packages Registry in the future?

How to create your own PWA! #pwasAreNotDead 💀

webdeasy.de — Sat, 01 Jun 2024 10:00:00 +0000

A Progressive Web App (PWA) is a form of mobile application that features fast load times, offline functionality, and an optimized user experience. And in this guide you will learn how to simply create your own PWA!

Table of Contents 🛡️

What are Progressive Web Apps?
Downsides of Progressive Web Apps
How to build a Progressive Web App
- Configure manifest.json
- Create Service Worker
- Debug PWA
Conclusion 📝

In recent years, mobile Internet usage has overtaken desktop usage (official statista figures). Most people nowadays access the Internet via their mobile devices. As a result, the requirements for mobile app development have changed. Progressive Web Apps (PWA) are one of the solutions that have evolved in this area.

WHAT ARE PROGRESSIVE WEB APPS?

In short, Progressive Web Apps are a type of mobile application based on a website. But what does that actually mean? Quite simply, a PWA is a mobile app that you can access from the browser on your mobile device. Unlike native apps, you don’t have to download and install a separate app.

DOWNSIDES OF PROGRESSIVE WEB APPS

Progressive Web Apps (PWAs) have many advantages, but they also have some disadvantages. They have limited access to certain device features and hardware, such as the camera and contacts, making some functionality more difficult to implement than in native apps. Push notification support is limited in some browsers, potentially causing delays or failures in notification delivery. PWAs may not work on older browsers or devices because they rely on newer technologies and APIs. In addition, data storage is limited and less flexible compared to native apps, limiting features that require significant storage.

HOW TO BUILD A PROGRESSIVE WEB APP

If you use WordPress, you’ll be ready in no time: install the PWA plugin and in a few minutes your normal website will be transformed into a great PWA.

By the way, you can find my selection of the best free WordPress plugins here.

However, it’s not always that simple. There is a bit more to creating a PWA. A PWA consists of two basic parts: the manifest.json and the service worker.

Configure manifest.json

To include the manifest.json on your website you have to include the following line in the head:

<link rel="manifest" href="/manifest.json">

This file contains all the needed information about your website, here is an example:

{
   "short_name":"webdeasy.de",
   "name":"webdeasy.de",
   "icons":[
      {
         "src":"/images/logo-512.svg",
         "type":"image/svg+xml",
         "sizes":"512x512"
      },
      {
         "src":"/images/logo-192.png",
         "type":"image/png",
         "sizes":"192x192"
      },
      {
         "src":"/images/logo-512.png",
         "type":"image/png",
         "sizes":"512x512"
      }
   ],
   "start_url":"/index.html",
   "background_color":"#3d50a7",
   "display":"standalone",
   "theme_color":"#3d50a7",
   "description":"Your IT-Blog"
}

What exactly the individual parameters mean and what else there is, you can read in the manifest.json documentation. I just want to show you how easy it is to create a basic PWA.

Create Service Worker

The complete logic of your PWA is in the Service Worker, which you should put in the root directory of your website. For example, it can deliver data from the cache even when the user is offline. The service worker also allows sending push notifications and updating the app in the background without the user having to reload the page.

The service worker as well as the manifest.json must be included in the HTML head of your website:

// service-worker.js
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

What you then do in the callback functions is of course dependent on your WebApp.

If you test the PWA locally, you will get this error:

This is because the HTML file is not called statically, but is delivered via a server. If you use Visual Studio you can start a live server via this LiveServer extension.

If there are no errors in manifest.json this button should show up to install the PWA.

Debug PWA

You can debug a PWA via the “Application” tab in your Dev Tools.

The documentation for the Service Worker can be found in the Service Worker API.

CONCLUSION

That's it! Easy, right? If you liked this guide I would be happy if you check out my other articles on my blog. 😻

Some texts were created with the help of AI. All content has been thoroughly checked!

JSON in JavaScript and PHP: Read, Get, Send, Convert [BASICS]

webdeasy.de — Wed, 15 Nov 2023 16:00:00 +0000

In this tutorial you will learn all the JSON basics – JSON in PHP, JSON in JavaScript and how to exchange/send JSON between JavaScript and PHP.

❓ WHAT’S JSON?

JSON stands for JavaScript Object Notation and is an uncomplicated and space-saving data format that is used to store and transmit information.

Data can be exchanged between the user (client) and the server. JSON is typically used as the format for Rest APIs.

I will show you how to create and process JSON on the client side with JavaScript and then transfer it to the server with Ajax. There it is processed further with PHP. We look at data transfer, storage and especially the conversion of arrays to JSON and vice versa.

{
  "ceos": [
    {
      "id": "1",
      "name": "Steve Jobs"
    },
    {
      "id": "2",
      "name": "Bill Gates"
    },
    {
      "id": "3",
      "name": "Paul Allen"
    }
  ]
}

This is an example of JSON. Here three entries with the attributes id and name are stored in the category ceos. This structure is very similar to the structure of multidimensional arrays. There is a reason for this, because the conversion between these two “data types” works quite well.

So that we can work properly right away, here is a link to a JSON validator so that you can always check whether you have a valid JSON format. I would also recommend installing a JSON VSCode extension to display code highlighting and linting directly in the IDE.

Since we mainly focus on usage – especially in PHP and JavaScript – in this article, you can have a look at the exact structure of JSON in this article if you are interested.

👨‍💻 JSON IN PHP

Read JSON

In principle, JSON data can be stored very easily. A simple text file is sufficient to store the data there. This is also a common and good solution for small amounts of data. But if you have a lot of data, or data that is added dynamically (like a contact form), it is recommended to store the data in a database.

However, we assume small amounts of data and have a file on the server side, e.g. with the name storage.json with the following content (same content as the above example, only in minified)

{"heroes":[{"id":"1","name":"Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}

With the following lines we can have the file read and output in PHP:

<?php 
$file = file_get_contents("storage.json");
print_r($file);
?>

The unformatted output gives us the simple text content of the file:

{"heroes":[{"id":"1","name":"Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}

We cannot do much with this data in this form. We could write our own parser to convert it into an object or array. But it is much easier.

PHP offers us the function json_decode() to convert the JSON string into an object.

<?php 
$file = file_get_contents("storage.json");
$json_decoded = json_decode($file);
print_r($json_decoded);
?>

The JSON string has been converted to an object and we can treat it like any other object in PHP. This output looks like this:

stdClass Object
(
    [heroes] => Array
        (
            [0] => stdClass Object
                (
                    [id] => 1
                    [name] => Steve Jobs
                )
            [1] => stdClass Object
                (
                    [id] => 2
                    [name] => Bill Gates
                )
            [2] => stdClass Object
                (
                    [id] => 3
                    [name] => Paul Allen
                )
            [3] => stdClass Object
                (
                    [id] => 4
                    [name] => Sundar Pichai
                )
        )
)

As already mentioned we can now use normal object operators to output or change values of the object. So in this case it makes no difference to us whether we get an array or an object.

<?php 
$file = file_get_contents("storage.json");
$json_decoded = json_decode($file);

echo $json_decoded->heroes[0]->name;  // Output: Steve Jobs

$json_decoded->heroes[0]->name = "CEO Steve Jobs";

echo $json_decoded->heroes[0]->name;  // Output: CEO Steve Jobs
?>

Save JSON

Once we have adjusted our data as desired, we can save our JSON data in PHP.

<?php 
$filename = "storage.json";
$file = file_get_contents($filename);
$json_decoded = json_decode($file);

$json_decoded->heroes[0]->name = "CEO Steve Jobs";

$json_encoded = json_encode($json_decoded);
file_put_contents($filename, $json_encoded);
?>

Since we decoded the JSON string during readout, we have to encode it again before saving. This is done in PHP via json_encode(). That’s about it. Simple, right?

📨 SEND JSON FROM JAVASCRIPT TO PHP (AJAX)

To request data on the client side I like to use jQuery, because I save some lines of JavaScript. We can do the same with other frameworks or libraries like Vue.js, you can find the corresponding functions in their documentation. Here is an example, which makes an ajax request to our server.php and gets the data returned.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JSON in PHP and JavaScript</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $.getJSON('server.php', {}, function(data) {
            console.log(data);
        });
    </script>
</body>
</html>

<?php
// server.php
$file = file_get_contents("storage.json");
exit($file);
?>

The JavaScript Console output looks like this:

So we have already in JavaScript normal access to the data, which originally comes from our storage.json.

By the way: WordPress has its own functions to manage Ajax data – learn how here.

👨‍💻 JSON IN JAVASCRIPT

But if we have a JSON string in JavaScript, we can convert it to a JavaScript object using the JSON.parse() function. That looks like this:

let json = '{"heroes":[{"id":"1","name":"CEO Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}';

let obj = JSON.parse(json);
console.log(obj);

The output is identical to the output from our storage.json.

Conversely, we can convert a JavaScript object to JSON with JSON.stringify().

The output is then again our JSON string, which we also have in the variable json.

{"heroes":[{"id":"1","name":"CEO Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}

📚 CONCLUSION

Both PHP and JavaScript provide functions that simplify working with JSON, a straightforward and efficient data format for exchanging data between the two languages. This is typically the optimal choice for most web development and design use cases.

What is CI/CD? 🤖 Definitions, Concepts and CI/CD Tools at a glance

webdeasy.de — Mon, 16 Oct 2023 07:00:00 +0000

What do the terms CI/CD, CI/CD pipeline, CI/CD tools and DevOps mean? In this article you will get a comprehensive explanation of all the terms, concepts and technologies you need to understand in the context of CI/CD.

TL;DR 🙄

You will get an overview, detailed but not too detailed about everything you need to know about CI/CD 🚀

What you will learn 📖

Continuous Integration (CI)
Continuous Delivery (CD)
What is DevOps?
What is a CI/CD pipeline?
What is the difference between Continuous Delivery and Continuous Deployment?
Advantages of CI/CD
What are CI/CD tools and which one should I use?
- Overview of known CI/CD tools
- Selection criteria for the right tool
Conclusion: CI/CD - The way to more efficient software development and higher quality

The Google trend data shows that the search term "CI/CD" is experiencing a surge in popularity.

In modern software development, the terms “CI/CD” and “DevOps” are widely used. However, what do these terminologies signify, and why are they crucial? What is the foundation of this movement, and how can it transform software development?

Continuous Integration (CI) and Continuous Delivery (CD) are crucial concepts in contemporary software development. They establish the foundation for effective and superior software distribution. First, let’s examine the explanations of these terms. If you are unfamiliar with CI/CD, these definitions may appear quite abstract. Nevertheless, by the end of this article, all your queries should be resolved.

Continuous Integration (CI) ⚙️

Continuous Integration (CI) is a development method where developers regularly merge their code into a shared repository. The main concept behind CI is the constant integration of any code changes made into the main code base. Whenever developers make code alterations, automated build and test procedures are initiated to guarantee that the code operates correctly and does not interfere with any of the present functions. The aim of CI is to detect conflicts and errors early on while consistently monitoring the code’s quality.

Continuous Delivery (CD) 🏭

Continuous Delivery is a logical extension of CI and denotes the automated deployment of software in a production environment. CI enables software to be readily deployable in the production environment but does not, however, automatically release it into production space. Instead, deployment is automated up to the production environment, and the release into production space still necessitates manual approval. No changes needed as the text already adheres to the principles and lacks context.

What is DevOps? 👨‍💻

CI/CD and DevOps are closely linked. DevOps is a culture and practice that aims to enhance collaboration and communication between an organisation’s development and operations teams. Its primary objective is to streamline the software development and delivery process, allowing for quicker and more dependable software delivery.

The conventional method of software development and IT operations can foster silos, where developers and operations function independently and have divergent objectives. This can cause delivery delays, quality problems, and disputes. DevOps seeks to bridge these gaps by fostering close collaboration between teams. To this end, various tools, including CI/CD pipelines, are employed.

What is a CI/CD Pipeline? 🔧

A crucial component of modern software development and DevOps practices is a CI/CD pipeline, also known as a DevOps pipeline. It’s an automated sequence of steps that enables software CI/CD processes, and the central part of an efficient software development and delivery workflow. The structure of a CI/CD pipeline is demonstrated in the given diagram.

The CI/CD pipeline is an automated workflow that covers the entire software development lifecycle from code change to production deployment....

It's cool that you're so passionate about CI/CD! 🔥

➡️ Read the rest of the post on my blog ❤️

🐋 Docker Init command: Create Docker projects automatically 🚀

webdeasy.de — Wed, 04 Oct 2023 12:00:00 +0000

Docker Init lets you set up a Docker project in a snap. With just one CLI command, docker init, you can generate everything you need.

Docker has revolutionised the software development process, simplifying software deployment and making it more accessible to other developers. The recently-introduced Docker Init command streamlines project creation by generating configuration files with a single command.

TL;DR

docker init dockerises your application! :)

Docker Init 🐋

The command creates three files in your project:

a Dockerfile
a .dockerignore
and a compose.yaml

In other words, all the files that are necessary for a complete Docker App.

To use the Docker Init command, you only need Docker Desktop > version 4.18. And of course a non-dockerised project, i.e. a project for which no Docker files exist yet.

➡️ Download Docker Desktop

Supported languages 👨‍💻

Currently, the command supports 5 programming languages:

ASP.NET
Go
Node
Python
Rust

If a project does not involve any of the languages, the Dockerfile is configured to establish an entry point that is universally applicable.

However, it is highly likely that the capabilities of this command will be extended in future updates, leaving us intrigued.

Docker Init in Action 🎬

Let's get down to business and look at the command in action in a Node.js application.

> docker init

You will then be guided through a range of questions.

? What application platform does your project use? Node
? What version of Node do you want to use? (20.5.1)

? What application platform does your project use? Node
? What version of Node do you want to use? 20.5.1
? Which package manager do you want to use?  [Use arrows to move, type to filter]
> npm - (detected)
  yarn
  pnpm

? What application platform does your project use? Node
? What version of Node do you want to use? 20.5.1
? Which package manager do you want to use? npm
? What command do you want to use to start the app? [tab for suggestions] (node index.js)

? What application platform does your project use? Node
? What version of Node do you want to use? 20.5.1
? Which package manager do you want to use? npm
? What command do you want to use to start the app? node index.js
? What port does your server listen on? 3000

And that is all. We get the three said files that we need for a complete Docker project.

To check the configuration, we run the docker compose command: Running!

And the Dockerfile also works for a single Docker container. We get a running container for our application.

docker build -t docker-init-app .
docker run -p 3000:3000 docker-init-app

Advantages of Docker Init ⭐

In my eyes, the command offers numerous advantages for developers and teams:

Accelerated project initialisation: Docker Init automates the creation of all configuration files. This eliminates the time-consuming manual creation of these files and speeds up development processes.
Consistency and standardisation: Like CI/CD tools, using the Docker Init command ensures that all projects have a consistent and standardised Docker configuration. This leads to fewer configuration errors and improved team collaboration.
Reduced error-proneness: Docker Init helps minimise errors in Docker configuration by implementing best practices and recommended structures for Docker projects. This leads to more robust and reliable applications.

Overall, Docker Init makes it easier for developers to enter the world of Docker projects and helps to increase the efficiency, reliability and consistency of applications. This leads to accelerated development and an overall improved development quality.

Psssst! Do you know the difference between (Docker) containers and virtual machines (VMs)?

Conclusion 📖

The Docker Init command highlights Docker’s prominence in software development. By using this command, developers can rapidly create Docker projects while minimising configuration file setup.

30 awesome CSS Background Patterns ✨

webdeasy.de — Sat, 02 Sep 2023 14:05:23 +0000

With these 30 CSS Background Patterns you are sure to find the perfect background for your app or website.

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Japanese cube

Author: Tankred;

#2 Steps

Author: Joshua Hibbert;

#3 Rotan weave

Author: Joroen Franse;

#4 Tables

Author: Ana Tudor;

#5 Slack CSS background pattern

Author: Marijke Luttekes;

#6 Children in Need CSS Background Pattern

Author: Chris Smith;

#7 Street in the city

Author: Ha Hyun Yong;

#8 Rainbow

Author: Raad Al-Raw;

#9 Circles

Author: Steve Hudek;

#10 Blue Triangles

Author: vlad-saling;

⭐🔗 Find the other 20 CSS backgrounds on my blog 🔗⭐

Note: All forms are all published on codepen.io and not by me.

...or out my other CSS Collections:

TOP 20 VSCode Extensions to increase your productivity! 🚀

webdeasy.de — Mon, 07 Aug 2023 12:00:00 +0000

VSCode (Visual Studio Code) is a very widely used and free code editor. With countless VSCode extensions you can program in any language and much more! I’ll show you the best VSCode extensions so you can be even more productive.

The right VSCode extensions, i.e. plugins for Visual Studio Code, turn the source code editor into a real secret weapon. Over the years, some extensions have proven to be more useful and others less so.

Since the plugins can be installed and uninstalled with two clicks, you can easily try them out and see if they help you. All shown VSCode extensions I use myself, so I can present them here with a good conscience. 🙂

1. ChatGPT – Genie AI

How could it be otherwise, we start with an extension that uses ChatGPT.

Shortly after ChatGPT was released, there were of course countless extensions for VSCode. I tried a lot of them, but Genie AI worked best for me. You have directly in the context menu the possibility to “commission” predefined actions, like explaining marked code, adding comments or optimizing the code.

The background prompts can all be customized individually in the settings, making it the best AI plugin for Visual Studio Code for me.

➡️ ChatGPT Genie AI

2. Favorites

A very small but very useful VSCode extension: Favorites. As the name says it gives you the possibility to mark single files as favorites, so you can access them quickly. I use this function mostly for config files that I have to access all the time.

➡️ Favorites

3. MinifyAll

Storage space has become relatively cheap today. However, it makes sense to transfer as little data as possible to end users. This is where MinifyAll comes in and minifies your files. Currently the plugin can handle 14 different languages.

➡️ MinifyAll

4. Docker

For a long time I “ignored” Docker. Now it has become a real secret weapon for me and extremely versatile. So if you haven’t worked with Docker yet, I highly recommend it! It’s perfect for quickly testing another environment or deploying your application.

The VSCode extension of the same name helps you speed up image building, highlight code, and keep track of running containers and images.

➡️ Docker

5. Better Comments

A small but good extension. It highlights comments with different keywords, like “TODO” or starting with an exclamation mark, so you can’t miss the comment at all.

➡️ Better Comments

6. Code Spell Checker

Also a small but nice extension, which I see as an extension for “Better Comments”. It underlines spelling mistakes for you. This can increase the quality of your comments.

➡️ Code Spell Checker

7. GitLens – Git supercharged

Visual Studio already has a built-in Git client – so far so good. But GitLens extends the functionality even further, so that you can see the last commit message directly after each line of code, compare it directly with the changes and much more. Be sure to try it out!

➡️ GitLens - Git supercharged

8. Regex Previewer

Regular expressions can be found in pretty much every app. However, creating them can sometimes be a bit tricky. This is where Regex Previewer comes in and shows you directly the matches of your expression in a second window. This way you can debug directly live.

➡️ Regex Previewer

9. Test Explorer UI

Testing is very important, but sometimes it can be very annoying and time consuming. Test Explorer UI can take some of the work out of this by showing you all the tests graphically and also running and evaluating them directly when you save them.

➡️ Test Explorer UI

10. Remote – SSH

If you often work on external systems, you should have a look at “Remote – SSH”. This VSCode extension establishes a connection via SSH, so that you can execute SSH commands directly in the terminal and – what I find even cooler – you can open the files in the explorer directly via SFTP, instead of having to edit them manually via an FTP client.

➡️ Remote - SSH

All other VSCode extensions are more specialized for developers working in the field of web development.

11. Node.js Extensions Pack

As a Node.js developer, you really need this plugin. It helps you complete imports, simplifies npm commands and much, much more.

➡️ Node.js Extensions Pack

12. DotENV

DotENV highlighted your .env files, simple but useful.

➡️ DotENV

13. ESLint

All JavaScript & Typescript developers will know and love ESLint. The VSCode extension of the same name implements ESLint in VSCode. For this, ESLint must be installed globally via npm (npm i -g eslint).

➡️ ESLint

14. Jest

The testing framework Jest has many functions, which the VSCode extension Jest implements via autocompletion in Visual Studio. This should save you some time writing tests.

➡️ Jest

15. Python

As a Python developer you need this extension. It implements Python directly in Visual Studio. Via an arrow you can execute your Python app directly, debug it and of course highlighting and autocompletion are also included in this plugin.

➡️ Python

16. REST Client

With REST Client you can now test your Rest API even faster and easier in the code editor. You can execute requests using a very simple syntax. Of course you can customize all header data as you like. So you have your tests directly near your code.

➡️ REST Client

17. Prettier – Code formatter

Prettier supports numerous languages and formats the code so that it is easy to read and it provides a uniform standard for all developers of your project.

➡️ Prettier - Code formatter

18. css-auto-prefix

CSS requires prefixes for some attributes for certain browsers. These are often forgotten when programming. This extension puts an end to that. As soon as you write a CSS property or even just click on it, the corresponding lines with the browser prefixes are automatically added.

➡️ css-auto-prefix

19. CSS Peek

This VSCode extension connects your CSS rules with the corresponding HTML tag and vice versa. So you don’t have to search for the rules anymore, but can jump directly to the right place.

➡️ CSS Peek

20. WordPress Hooks IntelliSense

WordPress has a lot of its own functions, which you can’t know by heart – let alone the syntax. The plugin WordPress Hooks IntelliSense offers you an autocompletion for all these functions.

➡️ WordPress Hooks IntelliSense

What other VSCode extensions do you know that are your daily companion? Feel free to let me know in the comments! 🙂

Indispensable: The 9 best WordPress plugins 🌱

webdeasy.de — Sat, 29 Apr 2023 09:40:50 +0000

The free CMS WordPress officially has almost 60,000 plugins. But which WordPress plugins do you really need? I present you 9 free WordPress plugins that will make your website better!

Hardly any WordPress site can do completely without plugins – that’s not even necessary. There are numerous useful and good WordPress plugins out there that can equip your site in terms of SEO, privacy, user-friendliness but also with great features.

With almost a decade of experience with WordPress, I think I can put together a pretty good selection for you here. 🙂

All the presented plugins are free to use. Some also offer a premium version to unlock more features.

Disclaimer: All the presented plugins are free to use. Some also offer a premium version to unlock more features.

On the internet you can find many lists, which sometimes present 30, 50 or even more WordPress plugins at once. This list is deliberately kept quite small and that has a specific reason:

Less is more!

This is true for many things in life, including the number of WordPress plugins.

There is no guideline how many plugins a WordPress site may have at least or maximum. But from my own experience I know that most sites use between 5-25 plugins.

But why is that so important anyway?

Almost every plugin that is installed and activated requires processing power when the page is called up, since it naturally has to perform its tasks in the background – be it the generation of images, insertion of content or SEO adjustments. All of this is a drain on your website’s resources.

And another thing: Not for all functions you need a plugin. How you can create a table of contents in WordPress without a plugin and many more great things you will learn at the end of the post.

1. Hummingbird

Category: SEO/Caching // 100,000+ active installations

Hummingbird is a comprehensive plugin which, besides its main task of caching resources (JS & CSS files), can significantly improve the general page speed through numerous techniques, such as lazy loading, load integration or world-class caching.

There are other caching plugins, like WP Super Cache or W3 Total Cache, both of which also have more than 1 million active installs. I have also tested these plugins in the past and was able to achieve the best results with Hummingbird.

The plugin also gives you useful tips for server configuration, e.g. to enable Gzip compression under Apache2 and nginx. Speed tests are evaluated directly via the plugin and suitable settings are suggested.

For whom is this plugin suitable?

Actually for everyone. Every user is happy when a page loads fast and it can also reduce the server load. So if you don’t use a caching plugin yet, this plugin is a good choice.

➡️ Install Hummingbird

2. Advanced Custom Fields

Category: Features for content editor // 2+ Millions active installations

Advanced Custom Fields is one of my favorite plugins. With this plugin you can – as the name suggests – create your own fields/attributes. Specifically, this means that you can set individual options for specific pages, templates, post types or taxonomies.

If you would like to assign a specific color to each category, you can do so here. Do you want to be able to set a price for each page with the “Product” template? No problem with Advanced Custom Fields.

With the Pro version you have some additional features, like creating your own Gutenberg Blocks or the function of “Repeating Fields”. The latter is very useful and saves a lot of work, because you don’t have to create Slide1, Slide2, Slide3,… for a slider. You can simply create a repeating field “Slide” and then create as many slides as you want dynamically.

For whom is this plugin suitable?

For those who want to create/program their own content blocks and add more attributes and properties to individual page types.

➡️ Install Advanced Custom Fields

3. Rank Math

Category: SEO // 1+ Million of active installations

Rank Math is one of the most popular SEO plugins for WordPress, along with Yoast SEO. Besides the usual functions like setting title, description and keywords, Rank Math can also output structured data. This helps Google to present your site more interesting to the user. For example, reviews, recipes or job descriptions can be placed in appropriate tabs on Google – this creates better visibility.

In addition, the plugin offers many more features to help you with the SEO process.

Recently, Rank Math also offers a content AI feature, which is supposed to suggest matching keywords and content to you in order to better tailor the content to your visitors.

For whom is this plugin suitable?

For anyone who runs a website to be found by search engines – so almost everyone.

➡️ Install Rank Math

4. Contact Form 7

Category: Features // 5+ Millions active installations

This plugin is in my eyes the best WordPress plugin to embed custom forms.

You can create as many forms as you want and equip them with all kinds of text fields, checkboxes, dropdowns, file uploads and privacy checkboxes. You can set all imaginable options like placeholders, labels or input types (tel, email, number, …). Integration with Google reCaptcha is also available.

When the form is submitted you can set the mail template where automatically the data can be inserted. Also shipping and error notifications can be set. In the area of the form there is actually nothing that this plugin can not do.

The plugin Contact Form 7 Database Addon – CFDB7 additionally offers the possibility to write the form data into the database and retrieve it via the backend.

For whom is this plugin suitable?

For anyone who wants to have their own (self-maintainable) form on their website (HTML knowledge is helpful).

➡️ Install Contact Form 7

5. Newsletter

Category: Feature/User engagement // 400,000+ active installations

This plugin is responsible for managing subscribers and sending newsletters. Using self-configurable forms, you can subscribe to the newsletter, go through a registration process (also double opt-in possible) and receive newsletters in the future. Of course, you can change your data at any time or unsubscribe from the newsletter completely.

Thereby you can divide your subscribers into several lists to separate them e.g. by topic.

Using a simple drag-n-drop builder, the newsletters can then be easily clicked together and saved as templates for the next newsletters. When you are satisfied, you choose a subject, check the newsletter with a test mail and then the newsletter can go out to your subscribers.

Statistics show you how your content is being received by your subscribers and what you might be able to improve in the future.

For whom is this plugin suitable?

For anyone who wants to build a community and provide their (blog) readers with regular updates.

➡️ Install Newsletter

6. Polylang

Category: Feature // 600,000+ active installations

here is not much to say about this plugin – and that in a positive sense. If you want to add more than one language to your website, Polylang is the right choice. It’s simple, works great and you can even replace other strings that are present on your website.

For whom is this plugin suitable?

For anyone who wants to make their content available in multiple languages.

➡️ Install Polylang

Make sure that your plugins always have the latest updates installed. Possible security gaps will be closed. Check every 7-14 days if updates are available. Alternative: You can activate automatic plugin updates under Plugins on the right side under Activate automatic updates.

7. Useful tool plugins

The next plugins are plugins that can be installed as needed and are rather small tools for specific tasks. Some of them you can also activate only temporarily when you need them to save resources.

7.1 Regenerate Thumbnails

Active installations: 1+ Million

If you have reworked your site and need new SEO optimized image sizes this plugin is the right tool for you. It can (re)generate all media files or just the post images in all set image sizes. This has always worked very reliably for me, but you should create a backup beforehand to be on the safe side.

For whom is this plugin suitable?

For anyone who needs to regenerate image sizes, for example when changing a theme or to improve SEO values.

➡️ Install Regenerate Thumbnails

7.2 Move WordPress site

To move a WordPress site e.g. to a new domain you don’t need a plugin, you can simply follow this guide:

➡️ Move WordPress website

7.3 Antispam Bee

Active installations: 700,000+

Antispam Bee is a small plugin that works in the background and blocks spam comments and trackbacks to keep your comments section clean.

I was struggling with spam but that’s over. In “good” times Antispam Bee blocks about 100 spam comments from me – every day!

Through further settings, blocked comments are also automatically deleted after a certain time. Familiar commenters are recognized and much more. The plugin is also “Developed with data protection and privacy in mind” according to developers.

For whom is this plugin suitable?

For anyone who uses the comment and or trackback function on their page.

➡️ Move Antispam Bee

Not for all functionalities and features you necessarily need a WordPress plugin. With a few small code snippets you can achieve a lot. Please have a look at my article about WordPress Snippets.

Thanks for reading! ❤️
You are asked, without which plugin must not be a WordPress site with you?

Code Smarter, Not Harder: How ChatGPT Can Simplify Your Coding Journey 🚀🔥

webdeasy.de — Sat, 15 Apr 2023 13:19:51 +0000

ChatGPT is the hot shit among developers right now! In this article, I’ll show you how you can benefit from this AI tool as a developer. With practical examples and insider tips, I’ll show you how to speed up your development processes and make your life easier. So let’s get started!

❓ What is ChatGPT?

What is ChatGPT? Good question. Is it a chatbot? A text generation tool? Or just another AI model that will soon make us developers obsolete? Let’s just ask it ourselves.

Now, before you panic, let me explain: ChatGPT is indeed an AI model for text generation, but it’s so much more than that. It’s a general-purpose tool that can help you as a developer get your work done faster, more effectively, and even more creatively.

But what is the secret of ChatGPT? Well, it’s based on a so-called Generative Pre-trained Transformer, or GPT for short. Sounds like a science fiction weapon, but it’s actually just an algorithm trained to generate natural language texts written by humans.

And with ChatGPT you can use this powerful tool in your development process. But be careful! ChatGPT is not a panacea and should be used with care. What you have to pay attention to, you will learn now.

Curious now? Everyone can currently use ChatGPT for free. All you have to do is create an account with your email address.

👉 How can ChatGPT be used by developers?

1. Develop code, scripts and snippets

ChatGPT can help developers generate code, scripts and snippets automatically by typing short prompts. This can save time and effort. However, it is important to ensure that the generated code meets the requirements and is thoroughly tested before deploying it. ChatGPT can also act as a “code checker” and suggest improvements.

In addition, ChatGPT can help with writing automated workflows. Overall, ChatGPT provides tremendous support for code development, but it is important to still have the skills and knowledge to write and optimize code from scratch.

I prefer to use it when generating config files. There, many parameters are needed that are rarely used and therefore you don’t have them in your head. Recently I wanted to extend an existing CI/CD environment with a test phase. The existing script looked like this:

name: Node.js CI/CD Workflow with frontend
on:
  push:
    branches: [ "master" ]
jobs:
  test-and-build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    steps:
    - uses: actions/checkout@v3

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'

    - name: Build Frontend
      run: npm i --prefix client && npm run build --prefix client
      env:
       CI: false

    - name: Push to build branch
      uses: s0/git-publish-subdir-action@develop
      env:
        REPO: self
        BRANCH: build # The branch name where you want to push the assets
        FOLDER: ./public # The directory where your assets are generated
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
        MESSAGE: "Build: ({sha}) {msg}" # The commit message

ChatGPT then reengineered the missing step for me. I simply passed the existing config file in the prompt.

[...]
    - name: Install dependencies and run tests
      run: |
        npm install
        npm run test
      env:
        CI: true # set environment variable to run tests in CI mode
[...]

2. Writing documentation

By simply asking ChatGPT for the documentation you want, you can have it generate structured documentation that covers all the important aspects of your code or project. Extensions for your IDE can also help with this. I will go into this in more detail later.

However, it is important to ensure that the generated documentation is complete and understandable. One should also take the time to review it and edit it if necessary before passing it on to customers or users.

I have a great example of this here. Imagine you are looking at another developer’s code and he didn’t pay attention to the naming of the functions and also didn’t create comments. By the time you look through the code, ChatGPT already has the solution for you. Or can you tell me within 10 seconds what this code does?

import random
def whatDoesThisFunction(numbers):
    for i in range(len(numbers)):
        for j in range(i+1, len(numbers)):
            if numbers[j] < numbers[i]:
                numbers[i], numbers[j] = numbers[j], numbers[i]
    return numbers
if __name__ == '__main__':
    numbers = [random.randint(1, 100) for _ in range(10)]
    sorted_numbers = whatDoesThisFunction(numbers)
    print(sorted_numbers)

I asked ChatGPT to “Write comments in the code:”. This was the result:


def whatDoesThisFunction(numbers):
    """
    This function takes in a list of numbers and sorts them using the bubble sort algorithm.
    """
    for i in range(len(numbers)):
        for j in range(i+1, len(numbers)):
            if numbers[j] < numbers[i]:
                numbers[i], numbers[j] = numbers[j], numbers[i]  # Swap the values if the jth element is smaller than the ith element.
    return numbers
if __name__ == '__main__':
    numbers = [random.randint(1, 100) for _ in range(10)]  # Generate a list of 10 random integers between 1 and 100.
    sorted_numbers = whatDoesThisFunction(numbers)  # Call the function to sort the numbers.
    print(sorted_numbers)  # Print the sorted list of numbers.

I think I do not need to say more 🙂

3. Provide food for thought

It can be frustrating to be stuck trying to solve a problem and run out of ideas. In such situations, ChatGPT can serve as a thought-provoking tool by suggesting alternative approaches and ideas. With its ability to analyze a wide range of information and recognize patterns, ChatGPT can often make unexpected and useful suggestions. While it may not always provide the perfect solution, it can help stimulate the creative process and find new ways to solve problems.

4. Test writing

When it comes to writing tests, it can be very time-consuming and tedious. But with ChatGPT you can automate this tedious task and speed up your code development process.

How does it work? By simply submitting a request to ChatGPT describing the test case you want to create. The AI engine will then automatically generate the test case code for you! This means less stress and faster code generation, so you can focus on other important tasks.

I would like to demonstrate the whole thing to you. I have here code from a middleware of an existing Rest API:

// Middleware to validate challenge parameters
validateChallenge: (req, res, next) => {
  // Check if request body, challengeID, done and code are present and have expected data types
  if (
    !req.body ||
    !req.body.challengeID ||
    !req.body.code ||
    !req.body.done
  ) {
    return res.status(400).send({
      msg: 'Please enter valid challenge params!', // Send error message if validation fails
    });
  }
  next(); // Call next middleware function if validation passes
},

Now we take this code and pass it to ChatGPT with the following prompt: “Write tests for this code: CODE“.

With a single click, ChatGPT spits out a total of 5 test cases for our code.

If you already have other tests in your project you can of course tell ChatGPT to generate unit tests for a specific framework.

Overall, ChatGPT can help you work more efficiently and simplify the test writing process. So why not outsource this tedious task to an AI and optimize your development time?

💡 Tips when using ChatGPT

After using ChatGPT for quite a while now in my daily developer existence, I was able to find some tips & tricks when using ChatGPT.

1. Choose prompts correctly

To get good results you have to tell ChatGPT exactly what you want. Write 1-2 sentences more in the prompt, but you will usually get better results.

2. The correct IDE extensions

There are now numerous extensions available for all IDEs in marketplaces and stores. Just browse the stores. Since I personally use Visual Studio Code, I can only recommend the Genie extension for it.

3. Watch out for sensitive/secret data

Developers often deal with sensitive data, such as user information or secret company data. As a developer, it is therefore crucial to ensure that this data is not accidentally exposed when working with ChatGPT.

The best practice here is to provide only test data to ChatGPT. By making sure that no confidential information is used, you prevent accidental data leaks and keep your data safe.

4. ChatGPT works better with examples

Giving examples is an important step to improve the performance of ChatGPT. For example, if you ask ChatGPT to generate SQL queries or code, you will get better results if you provide concrete examples.

By providing a few lines of SQL code or the structure of the table, ChatGPT can better understand what you need and can provide more accurate results. Similarly, if you want ChatGPT to comment code. By providing sample comments, ChatGPT can better understand what you need and can generate more accurate comments.

5. Use English language

My native language is German, so it is easier for me to create German prompts. However, I have noticed that ChatGPT understands English prompts better and therefore gives better results. Pretty much all developer resources and documentation are in English, so ChatGPT naturally understands that better.

🐛 ChatGPT is not perfect – and makes mistakes!

Although ChatGPT is an impressive example of AI text generation, it still makes mistakes. One of the main limitations of ChatGPT is that it is based on data from 2021, which means it may use outdated technologies and frameworks. For this reason, it is important that developers carefully review the generated code before running it to ensure that it is correct and secure.

Another point to note is that ChatGPT cannot understand deep relationships between different programming technologies and concepts. It can generate code that is syntactically correct but may not have the desired functionality or efficiency. In such cases, it is important for the developer to use manual review and their own understanding of the underlying concepts and relationships to ensure that the generated code meets the requirements.

📍 Conclusion

In this day and age of technology and advancement, AI can be an incredibly valuable tool. ChatGPT, as one of the leading AI models, can help developers in a variety of ways – from developing code and scripts to writing tests and documentation.

Of course, there are a few things to keep in mind when using ChatGPT, like choosing the right prompts and IDE extensions, and avoiding sensitive data in prompts. But that shouldn’t stop us from taking full advantage of the power of AI!

Overall, ChatGPT is a useful assistant for any developer and can help save time and effort. However, if you rely too much on AI, there is a risk that you will be left like a fish out of water if the AI fails. Therefore, you should still have the necessary skills and knowledge to get the job done without ChatGPT.

So, dear developers, don’t be too scared to use ChatGPT, but don’t forget that all that glitters is not gold. And now let’s all get back to our work and look our new AI assistants in the eye with enthusiasm!

➡️ On my blog you can find many more tutorials and articles!

Do you already use ChatGPT in Development or what are your thoughts on ChatGPT? Let me know it in the comments! 😁

Thanks for reading! ❤️

And yes: ChatGPT helped me with this article too 😲

How to build a Vue.js App without Node, Webpack, npm or build tools

webdeasy.de — Sat, 09 Jul 2022 11:54:10 +0000

I love Vue.js and for larger applications the development with Node.js is quite feasible. However, if you want to build a “normal” website it’s often a lot of effort you don’t want to have. But even without webpack or other build tools it is quite easy to do!

If you simply want to place a small or medium sized Vue application on your website, it is often unnecessary effort to create a project with the Vue CLI, develop it and then integrate the finished build into your website. A small application on a WordPress site and such an effort? It doesn’t have to be.

On many websites jQuery is used. I think many don’t know that it is just as easy to use Vue.js for it.

Vue.js without build tools & co.? The solution: Vue SFC Loader

For a long time I only used jQuery on websites, because I simply didn’t know this way. However, after a long research and a lot of trial and testing, I found a simple solution that works very easily and reliably: Vue3 SFC Loader

This script is able to load .vue files at runtime – without the need of a Node.js environment. So you don’t need a bundler and also no build tools which have to be executed before the execution.

In the Vue.js documentation there is also a section about “Without Build Tools“. For very small applications with only one main component this also works. For larger applications this unfortunately did not work for me, so that script attribute importmap is not supported by all browsers.

Advantages and disadvantages

An obvious advantage is that the complexity of the environment (Vue CLI, Node Server, etc.) is greatly reduced. In addition, you do not have to “recompile” the entire application after each change and push it to Production. So for small and medium sized applications and when using a CMS or simply small websites, this is a real alternative.

But that brings us directly to the disadvantages: If you want to create a single page application (SPA) you should still use the Vue CLI. In general, I would still prefer it for larger, standalone applications. With a good CI/CD workflow, the deployment of the application is then also well feasible.

Vue.js App without Build Tools – Example App

I built a small Vue application to show as many different features of Vue as possible. The app consists of 2 components: Main Component and Footer.

Let’s go through the individual functions step by step:

Basic structure (with several Vue Components)

The basic structure consists of an HTML file, a JS file in which the Vue Components are registered and the three Vue Components.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Test</title>
  </head>
  <body>
    <div id="app">
      <vue-main-component></vue-main-component>
      <vue-footer></vue-footer>
    </div>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
    <script src="./js/vue-app.js"></script>
  </body>
</html>

This JavaScript file contains a JavaScript object with data and functions that are needed for the Vue SFC Loader. Therefore, you can simply take this part and only adjust the marked Vue Components for your project below.

// js/vue-app.js

const { createApp } = Vue;
const { loadModule } = window['vue3-sfc-loader'];
const options = {
  moduleCache: {
    vue: Vue,
  },
  getFile(url) {
    return fetch(url).then((resp) =>
      resp.ok ? resp.text() : Promise.reject(resp)
    );
  },
  addStyle(styleStr) {
    const style = document.createElement('style');
    style.textContent = styleStr;
    const ref = document.head.getElementsByTagName('style')[0] || null;
    document.head.insertBefore(style, ref);
  },
  log(type, ...args) {
    console.log(type, ...args);
  },
};
const app = createApp({
  components: {
    VueMainComponent: Vue.defineAsyncComponent(() =>
      loadModule('js/vue-components/vue-main-component.vue', options)
    ),
    VueFooter: Vue.defineAsyncComponent(() =>
      loadModule('js/vue-components/vue-footer.vue', options)
    ),
  },
}).mount('#app');

Footer Component

The Footer component also contains only text at the beginning. In a later section I will show how to use scoped CSS here.

<!-- js/vue-components/vue-footer.vue -->

<template>
  <p>This is the footer with custom scoped CSS.</p>
</template>

Main Component

In the main component I have summarized the main logic. In general, you can make the division as you want or put everything in a single component.

<!-- js/vue-components/vue-main-component.vue -->

<template>
  <div>
    <h2>{{ headline }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headline: 'Vue Main Component Headline'
    };
  },
  mounted() {
    alert('Vue Main Component mounted');
  },
};
</script>

It includes a {{ headline }} variable that displays plain text and a JavaScript alert() that is executed once the component is mounted.

We will now extend this component with further functions in the next chapters.

Events & Methods

For example, we add a new button with a click event. When the button is clicked, the doAxiosRequest() function is executed. Don’t be confused by the name, in the next step we add the package Axios.

<!-- js/vue-components/vue-main-component.vue -->

<template>
  <div>
    <h2>{{ headline }}</h2>
    <button @click="doAxiosRequest">Load random dog image</button>
    <br />
    <img :src="dogImage" width="200" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      headline: 'Vue Main Component Headline',
      dogImage: undefined,
    };
  },
  methods: {
    doAxiosRequest: function () {
      this.dogImage = 'https://images.dog.ceo/breeds/pembroke/n02113023_436.jpg';
    },
  },
  mounted() {
    alert('Vue Main Component mounted');
  },
};
</script>

Do you know my blog and newsletter? There I have already published many tutorials on web development. Would be happy if we meet there! 😋

Packages

External packages/modules can also be used without build tools. In many applications Axios is used to make asynchronous server requests. With this example I will demonstrate how to include such packages.

To load a package, we just need to add the link in line 17 to our index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Test</title>
  </head>
  <body>
    <div id="app">
      <vue-main-component></vue-main-component>
      <vue-footer></vue-footer>
    </div>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/vue-app.js"></script>
  </body>
</html>

Then we can access all the functionality directly through the axios variable. In this example we load a random dog image into the img tag.

<!-- js/vue-components/vue-main-component.vue -->

...
    doAxiosRequest: function () {
      axios.get('https://dog.ceo/api/breeds/image/random').then((response) => {
        this.dogImage = response.data.message;
      });
    },
  },
...

Props (Properties)

Props are attributes that we can pass when including our components. They can be fixed or dynamic attributes. In the example, I simply passed the static text “Foobar”.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Test</title>
  </head>
  <body>
    <div id="app" class="container">
      <vue-main-component msg="Foobar"></vue-main-component>
      <vue-footer></vue-footer>
    </div>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/vue-app.js"></script>
  </body>
</html>

In our main component we now add a new button that calls the clickButton() function when clicked. We also need to register the property as a string. In the clickButton() function we can then retrieve the value with this.msg.

<!-- js/vue-components/vue-main-component.vue -->

<template>
  <div>
    <h2>{{ headline }}</h2>
    <button @click="clickButton">Show the msg property!</button>
    <button @click="doAxiosRequest">Load random dog image</button>
    <br />
    <img :src="dogImage" width="200" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      headline: 'Vue Main Component Headline',
      dogImage: undefined,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    clickButton: function () {
      alert('msg property: ' + this.msg);
    },
    doAxiosRequest: function () {
      axios.get('https://dog.ceo/api/breeds/image/random').then((response) => {
        this.dogImage = response.data.message;
      });
    },
  },
  mounted() {
    alert('Vue Main Component mounted');
  },
};
</script>

Scoped CSS

With Scoped CSS CSS properties can be defined only for the current component. To do this, the CSS style tag must also have the scoped attribute.

<!-- js/vue-components/vue-footer.vue -->

<template>
  <p>This is the footer with custom scoped CSS.</p>
</template>
<style scoped>
* {
  color: red;
}
</style>

Full Code

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Test</title>
  </head>
  <body>
    <div id="app">
      <vue-main-component msg="Foobar"></vue-main-component>
      <vue-footer></vue-footer>
    </div>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/vue-app.js"></script>
  </body>
</html>

// js/vue-app.js

const { createApp } = Vue;
const { loadModule } = window['vue3-sfc-loader'];
const options = {
  moduleCache: {
    vue: Vue,
  },
  getFile(url) {
    return fetch(url).then((resp) =>
      resp.ok ? resp.text() : Promise.reject(resp)
    );
  },
  addStyle(styleStr) {
    const style = document.createElement('style');
    style.textContent = styleStr;
    const ref = document.head.getElementsByTagName('style')[0] || null;
    document.head.insertBefore(style, ref);
  },
  log(type, ...args) {
    console.log(type, ...args);
  },
};
const app = createApp({
  components: {
    VueMainComponent: Vue.defineAsyncComponent(() =>
      loadModule('js/vue-components/vue-main-component.vue', options)
    ),
    VueFooter: Vue.defineAsyncComponent(() =>
      loadModule('js/vue-components/vue-footer.vue', options)
    ),
  },
}).mount('#app');

<!-- vue-components/vue-main-component.vue -->

<template>
  <div>
    <h2>{{ headline }}</h2>
    <button @click="clickButton">Show the msg property!</button>
    <button @click="doAxiosRequest">Load random dog image</button>
    <br />
    <img :src="dogImage" width="200" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      headline: 'Vue Main Component Headline',
      dogImage: undefined,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    clickButton: function () {
      alert('msg property: ' + this.msg);
    },
    doAxiosRequest: function () {
      axios.get('https://dog.ceo/api/breeds/image/random').then((response) => {
        this.dogImage = response.data.message;
      });
    },
  },
  mounted() {
    alert('Vue Main Component mounted');
  },
};
</script>

<!-- vue-components/vue-footer.vue -->

<template>
  <p>This is the footer with custom scoped CSS.</p>
</template>
<style scoped>
* {
  color: red;
}
</style>

Using Vue.js without build tools in WordPress

I work a lot with WordPress and would like to be able to use Vue.js there as well to the same extent. You can keep the structure of the files also in WordPress. Additionally I wrote a small code snippet for functions.php to load Vue, the SFC loader and the main JS file:

<?php
function setup_vue_app() {
    // latest vue version
    wp_enqueue_script("vuejs", 'https://unpkg.com/vue@latest', array(), '1.0.0', true);  
    // sfc-loader for vue
    wp_enqueue_script("vue3-sfc-loader", 'https://cdn.jsdelivr.net/npm/vue3-sfc-loader', array('vuejs'), '1.0.0', true);  
    // main vue js file to register all components
    wp_enqueue_script("vue-app", get_stylesheet_directory_uri() . '/js/vue-app.js', array('vuejs', 'vue3-sfc-loader'), '1.0.0', true);    
    // includes the path to your vue files into vue-app.js
    wp_localize_script("vue-app", "WPVars", array(
        "vueFiles" => get_stylesheet_directory_uri() . '/js/vue-components',
      )
    );
    // load packages (e.g. axios)
    wp_enqueue_script("vue-axios", 'https://unpkg.com/axios/dist/axios.min.js', array('vuejs', 'vue3-sfc-loader'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'setup_vue_app');
?>

To make the path to our Vue files dynamic a small adjustment in vue-app.js is necessary:

// js/vue-app.js
...
const app = createApp({
  components: {
    VueMainComponent: Vue.defineAsyncComponent(() =>
      loadModule(WPVars.vueFiles + '/vue-main-component.vue', options)
    ),
    VueFooter: Vue.defineAsyncComponent(() =>
      loadModule(WPVars.vueFiles + '/vue-footer.vue', options)
    ),
  },
}).mount('#app');

And that’s all. Now you can use Vue.js with your WordPress website.

If you’re new to Vue.js, here are a few sample projects to help you learn Vue.js.

Thanks for reading! ❤️

➡️ On my blog you can find many more tutorials and articles!