Vue3 – Global Socket.io Installation (in all components)

Hits: 543

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import .....
import io from 'socket.io-client';

const app =  createApp(App);
app.config.globalProperties.$soketio = io('YOUR-SOCKET-IO-SERVER-HOSTNAME-WITH-PORT');
app.use(store).use(router).mount('#app')

Listening example in Vue Component

<template>
<div>
  <ol class="list-group list-group">
    <li class="list-group-item d-flex justify-content-between align-items-start"
        v-for="(message,index) in messages" :key="index">
      <div class="ms-2 me-auto">
        {{ message.message }}
      </div>
    </li>
  </ol>
 </div>
</template>

<script>

export default {
  name: "Message",
  data() {
    return {
        messages: []
    }
  },
  created() {
    this.$soketio.on('new-message', (data) => {
      this.messages.push(data);
    })
  }
}
</script>

Emit example in Vue Component

<template>
  <div class="thing">
    <button @click="makeSomething">makeSomething</button>
  </div>
</template>

<script>

export default {
  name: 'User',
  data() {
    return {
    }
  },
  methods: {
    makeSomething(){
      this.$soketio.emit('remove-user', this.user);
    }
  },
}
</script>

docker-compose with condition (healthcheck)

Hits: 141

services:
server:
    depends_on:
      db_server:
        condition: service_healthy
  db_server:
    ....
    healthcheck:
      test: mysqladmin ping -h 127.0.0.1 -u root --password=$$MYSQL_ROOT_PASSWORD
      interval: 5s
      retries: 5

Thanks for Blog Post : https://www.bornfight.com/blog/blog-lamp-docker-setup-with-php-8-and-mariadb-for-symfony-projects/

Pod Volume via hostPath via Minikube-Docker on Apple M1

Hits: 51

Actually Docker Desktop App as default sharing Users, private etc. folder with Docker Images.

Github Repo for Example Project: https://github.com/kzorluoglu/localphp8nginxwithhelm

But Minikube need minikube mount bidirectional folder sync. From this reason i will say, use your own simple folder structure for Minikube hostPath Solution. For example:

Macbook Folder: $home/minikubeprojects
Minikube Cluster: mnt1/minikubeprojects

For mounting, you need after minikube start only this

 korayzorluoglu@MBP-von-Koray ~ % minikube mount $HOME/minikubeprojects:/mnt1/minikubeprojects

Example Configuration

Project / chart / values.yaml

mountPath: /var/www/html
nginx:
  image: nginx:1.14.2

php:
  image: php:8.1-rc-fpm-alpine

Project / chart / templates / deployments.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: php8-project-deployment
  labels:
    app: php8-project-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: php8-project-deployment
  template:
    metadata:
      labels:
        app: php8-project-deployment
    spec:
      volumes:
        # Create the shared files volume to be used in both pods
        - name: php8-project-pv-storage
          persistentVolumeClaim:
            claimName: php8-project-pv-claim
        # Add the ConfigMap we declared above as a volume for the pod
        - name: nginx-config-volume
          configMap:
            name: php8-project-nginx-config
      containers:
        - name: php8-project-nginx
          image: {{ .Values.nginx.image }}
          ports:
            - containerPort: 80
          volumeMounts:
            - name: php8-project-pv-storage
              mountPath: {{ .Values.mountPath }}
            - name: nginx-config-volume
              mountPath: /etc/nginx/nginx.conf
              subPath: nginx.conf
          # Just spin & wait forever
          command: [ "/bin/bash", "-c", "--" ]
          args: [ "while true; do sleep 30; done;" ]
        - name: php
          image: {{ .Values.php.image }}
          volumeMounts:
            - name: php8-project-pv-storage
              mountPath: {{ .Values.mountPath }}

Project / chart / templates / volume.yaml

kind: PersistentVolume
apiVersion: v1
metadata:
  name: php8-project-pv-volume
  labels:
    type: local
spec:
  storageClassName: manual
  capacity:
    storage: 10Gi
  accessModes:
    - ReadWriteMany
  hostPath:
    path: "/mnt1/minikubeprojects/php8/app"

---

kind: PersistentVolumeClaim
apiVersion: v1
metadata:
  name: php8-project-pv-claim
spec:
  storageClassName: manual
  accessModes:
    - ReadWriteMany
  resources:
    requests:
      storage: 3Gi

Project / chart / templates / configmap.yaml

kind: ConfigMap
apiVersion: v1
metadata:
  name: php8-project-nginx-config
data:
  nginx.conf: |
    events {
    }
    http {
      server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # Set nginx to serve files from the shared volume!
        root {{ .Values.mountPath }};
        server_name _;
        location / {
          try_files $uri $uri/ =404;
        }
        location ~ \.php$ {
          include fastcgi_params;
          fastcgi_param REQUEST_METHOD $request_method;
          fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
          fastcgi_pass 127.0.0.1:9000;
        }
      }
    }

do you need mount directoy check? for that, check the minikube directory and pod directory, or the pod details via kubectl pod describe your-chart-name

korayzorluoglu@MBP-von-Koray chart % minikube ssh && cd /mnt1/minikubeprojects && tree

Enjoy!