Example domain names.

Client

So you‘ve got a domain newdomain.com and you want to have certificates with wildcard such as *.newdomain.com.

Let’s build our own client:

# directory structure
/docker/acmedns-client/
  build/
    Dockerfile
  docker-build.sh
  docker-run.sh
  acmedns-client.sh
  certbot.sh

FROM alpine:latest as BUILDER

RUN apk add --no-cache go git

WORKDIR /data

RUN git clone --depth 1 https://github.com/acme-dns/acme-dns-client && \
    cd acme-dns-client && \
    go get && \
    go build

FROM alpine:latest
RUN apk add --no-cache certbot

# Copy the built binary from the BUILDER stage
COPY --from=BUILDER /data/acme-dns-client/acme-dns-client /usr/local/bin/acme-dns-client

CMD ["/usr/local/bin/acme-dns-client"]

#!/bin/bash
docker build -t harianto/acmedns-client -f build/Dockerfile build

#!/bin/bash
mkdir -p data/letsencrypt
docker run --rm -v ${pwd}/data/letsencrypt:/etc/letsencrypt -it harianto/acmedns-client sh

#!/bin/bash
mkdir -p data/letsencrypt
docker run --rm \
-v ${pwd}/data/letsencrypt:/etc/letsencrypt \
-it harianto/acmedns-client certbot \
  certonly \
  --manual \
  --preferred-challenges dns \
  --server https://acme-staging-v02.api.letsencrypt.org/directory \
  --agree-tos \
  -m letsencrypt@newdomain.com \
  --no-eff-email \
  --manual-auth-hook '/usr/local/bin/acme-dns-client' \
  "$@"

#!/bin/bash
docker run --rm \
-v ${pwd}/data/letsencrypt:/etc/letsencrypt \
-it harianto/acmedns-client acme-dns-client "$@"

Don’t for get to chmod +x your *.sh files

Following scripts to run

• Build once: ./docker-build.sh. Your docker image would be harianto/acmedns-client

From this point you can run Docker Image harianto/acmedns-client however you want.

• Register once: ./acmedns-client.sh register -s https://auth.acme-dns.io --dangerous -d newdomain.com

We’ll be using https://auth.acme-dns.io for test, before we create our server, for example: https://auth.myacmedns.com

You can ignore CAA record, for now.

It will prompt like this:

[*] New acme-dns account for domain newdomain.com successfully registered!

Do you want acme-dns-client to monitor the CNAME record change? [Y/n]: n
Domain:         7f1449b3-9371-4b6a-a472-6ab79764dae7.auth.acme-dns.io

To finalize the setup, you need to create a CNAME record pointing from _acme-challenge.newdomain.com
to the newly created acme-dns domain 7f1449b3-9371-4b6a-a472-6ab79764dae7.auth.acme-dns.io

A correctly set up CNAME record should look like the following:

_acme-challenge.newdomain.com.     IN      CNAME   7f1449b3-9371-4b6a-a472-6ab79764dae7.auth.acme-dns.io.

You have to go to your DNS Settings in the Control Panel for your newdomain.com. And add a record:

_acme-challenge.newdomain.com.     IN      CNAME   7f1449b3-9371-4b6a-a472-6ab79764dae7.auth.acme-dns.io.

That might look like this.

• Then run certbot (every 3 months) and see magic happens:

./certbot.sh -d newdomain.com -d *.newdomain.com

Your certificates will be saved in ./data/letsencrypt/live/newdomain.com directory.

From this point, your should not having errors. Then you can create your own self-host ACME DNS. And have to register again with new (but once) and change your CNAME record (once again).

Server

So You want to self-host your ACME-DNS on myacmedns.com.

# directory structure
/docker/acmedns

Build

We can use the Docker Image joohoi/acme-dns or we build from his git repository.

There were few bumps installing, but one of the solution is to change Dockerfile and add new environment variable before go build.

Let’s create a directory: /docker/acmedns

# create directory
mkdir -p /docker/acmedns
# goto
cd /docker/acmedns
# git clone: depth 1
git clone --depth 1 https://github.com/acme-dns/acme-dns.git build
# create empty file and chmod +x
touch docker-build.sh; chmod +x docker-build.sh

At this point build folder is created, and then we create docker-build.sh file.

#!/bin/bash
docker build -t harianto/acmedns-server -f build/Dockerfile build

running ./docker-build.sh now, you find some errors.

Edit: /docker/acmedns/build/Dockerfile

Edit a line and inlude this CGO_CFLAGS="-D_LARGEFILE64_SOURCE"

# code here ...
RUN CGO_ENABLED=1 CGO_CFLAGS="-D_LARGEFILE64_SOURCE" go build

# code here ...

Dockerfile should look similar like this:

FROM golang:alpine AS builder
LABEL maintainer="joona@kuori.org"

RUN apk add --update gcc musl-dev git

ENV GOPATH /tmp/buildcache
RUN git clone https://github.com/joohoi/acme-dns /tmp/acme-dns
WORKDIR /tmp/acme-dns
RUN CGO_ENABLED=1 CGO_CFLAGS="-D_LARGEFILE64_SOURCE" go build

FROM alpine:latest

WORKDIR /root/
COPY --from=builder /tmp/acme-dns .
RUN mkdir -p /etc/acme-dns
RUN mkdir -p /var/lib/acme-dns
RUN rm -rf ./config.cfg
RUN apk --no-cache add ca-certificates && update-ca-certificates

VOLUME ["/etc/acme-dns", "/var/lib/acme-dns"]
ENTRYPOINT ["./acme-dns"]
EXPOSE 53 80 443
EXPOSE 53/udp

Now we can build.

# goto dir
cd /docker/acmedns
# build it
./docker-build.sh

Create docker-compose.yml

# create volume: docker volume create --name=letsencrypt
#volumes:
#  letsencrypt:
#    external: true

services:
  acmedns:
    image: harianto/acmedns-server
    container_name: acmedns
    #network_mode: host
    ports:
      - "53:53"
      - "53:53/udp"
      - "80:80"
      - "443:443"
    volumes:
      - ./data/acmedns_config:/etc/acme-dns:ro
      - ./data/acmedns_acmd-dns:/var/lib/acme-dns
      #- letsencrypt:/etc/letsencrypt:ro
    restart: unless-stopped  # Optional: to ensure the container restarts on failure

Parts that are commented # would be handy for advanced things, uncomment them any time.

Running with: docker-compose up you might see an error that no config.cfg is available.

You can copy config.cfg from the build folder and paste it to ./data/acmedns_config

[general]
# DNS interface. Note that systemd-resolved may reserve port 53 on 127.0.0.53
# In this case acme-dns will error out and you will need to define the listening interface
# for example: listen = "127.0.0.1:53"
listen = "0.0.0.0:53"
# protocol, "both", "both4", "both6", "udp", "udp4", "udp6" or "tcp", "tcp4", "tcp6"
protocol = "both"
# domain name to serve the requests off of
domain = "auth.myacmedns.com"
# zone name server
nsname = "auth.myacmedns.com"
# admin email address, where @ is substituted with .
nsadmin = "admin.myacmedns.com"
# predefined records served in addition to the TXT
records = [
    # domain pointing to the public IP of your acme-dns server 
    "auth.myacmedns.com. A 31.14.98.159",
    # specify that auth.myacmedns.com will resolve any *.auth.myacmedns.com records
    "auth.myacmedns.com. NS auth.myacmedns.com.",
]
# debug messages from CORS etc
debug = false

[database]
# Database engine to use, sqlite3 or postgres
engine = "sqlite3"
# Connection string, filename for sqlite3 and postgres://$username:$password@$host/$db_name for postgres
# Please note that the default Docker image uses path /var/lib/acme-dns/acme-dns.db for sqlite3
connection = "/var/lib/acme-dns/acme-dns.db"
# connection = "postgres://user:password@localhost/acmedns_db"

[api]
# listen ip eg. 127.0.0.1
ip = "0.0.0.0"
# disable registration endpoint
disable_registration = false
# listen port, eg. 443 for default HTTPS
port = "443"
# possible values: "letsencrypt", "letsencryptstaging", "cert", "none"
tls = "cert"
# only used if tls = "cert"
tls_cert_privkey = "/etc/letsencrypt/live/myacmedns.com/privkey.pem"
tls_cert_fullchain = "/etc/letsencrypt/live/myacmedns.com/fullchain.pem"
# only used if tls = "letsencrypt"
acme_cache_dir = "api-certs"
# optional e-mail address to which Let's Encrypt will send expiration notices for the API's cert
notification_email = ""
# CORS AllowOrigins, wildcards can be used
corsorigins = [
    "*"
]
# use HTTP header to get the client ip
use_header = false
# header name to pull the ip address / list of ip addresses from
header_name = "X-Forwarded-For"

[logconfig]
# logging level: "error", "warning", "info" or "debug"
loglevel = "debug"
# possible values: stdout, TODO file & integrations
logtype = "stdout"
# file path for logfile TODO
# logfile = "./acme-dns.log"
# format, either "json" or "text"
logformat = "text"

Change to port="80", and tls="none" if your server don’t have certificates yet. And register server running this:
./acmedns-client.sh register -s http://auth.myacmedns.com.

Change DNS Settings

For my newly discovery that works. Your DNS Settings need to able to add NS records. I’ve tried with A records, but it doesn’t work.

There can only be one record with auth.

@ points to your public address A 11.22.33.44 ,
auth.myacmedns.com points to NS myacmedns.com.

Let’s go back to our Client

Going back to your newdomain.com terminal, we need to run some commands again, to register and creating certificates.

Register once

With your self-host server, you can update new server path.

# goto
cd /docker/acmedns-client
# register once
./acmedns-client.sh register -s https://auth.myacmedns.com

Follow instructions and remember CNAME record, for example:

_acme-challenge.newdomain.com.     IN      CNAME   7f1449b3-9371-4b6a-a472-6ab79764dae7.auth.myacmedns.com.

Update DNS Settings once

Go to your control panel and update your DNS records.

Get your certificates and see the magic happens

# goto
cd /docker/acmedns-client
# get certificates
./certbot.sh -d newdomain.com -d *.newdomain.com

Does it work for you?

Let me know if this works for you, or give me a thumbs up!

Bought item from Amsterdam, but they deliver from China  

require ["fileinto", "body", "imap4flags", "regex", "envelope", "spamtest", "relational", "comparator-i;ascii-numeric", "fileinto", "imap4flags"];

# Check for spam score
if allof (spamtest :value "ge" :comparator "i;ascii-numeric" "5") {
    fileinto "Spam";
    stop;
}

# Check for suspicious subject lines
if header :regex "Subject" ["(?i)\\b(viagra|cialis|enlargement|\\$\\$\\$)\\b"] {
    fileinto "Spam";
    stop;
}

# Check for missing or suspicious From headers
if anyof (not exists "From",
          header :regex "From" "(?i)\\b(mailer-daemon|postmaster)@") {
    fileinto "Spam";
    stop;
}

# Check for suspicious content in the body
if body :raw :contains ["click here", "limited time offer", "act now", "congratulations", "you've won"] {
    fileinto "Spam";
    stop;
}

# Check for Authentication-Results header
if header :contains "Authentication-Results" ["dkim=fail", "spf=fail", "dmarc=fail"] {
    fileinto "Spam";
    stop;
}

# If none of the above conditions are met, keep the message in the inbox
keep;

XNMP-VHOST

And part configuration from my other Docker Composer.

# create volume: docker volume create --name=letsencrypt
volumes:
  letsencrypt:
    external: true

services:
  nginx:
    image: nginx:alpine
    restart: always
    links:
      - 8-0-0-fpm-ext
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./data/nginx/enabled:/etc/nginx/conf.d
      - ./data/nginx/snippets:/nginx/snippets
      - ./data/nginx/certificates:/nginx/certificates
      - letsencrypt:/etc/letsencrypt:ro
    volumes_from:
      - data

  8-0-0-fpm-ext:
    build: build/8-0-0-fpm-ext
    restart: always
    volumes_from:
      - data

  db:
    image: mariadb:10.5.8 #v10.5.8
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
    volumes:
      - ./data/db:/var/lib/mysql

  dbadmin:
    image: phpmyadmin/phpmyadmin
    restart: always
    environment:
      PMA_HOST: db
      PMA_USER: root # Remove line for production
      PMA_PASSWORD: root # Remove line for production
    depends_on:
      - db

  data:
    image: alpine:latest
    command: echo "--- Docker data volume READY."
    volumes:
      - ./data/vhosts:/vhosts
      - ./data/tmp:/tmp

# create network: docker network create xnmp-network
networks:
  default:
    name: xnmp-network
    external: true

Follow my guide here: XNMP-VHOSTS
My custom Docker build with Letsencrypt inside

My Poste.io

# create volume: docker volume create --name=letsencrypt
volumes:
  letsencrypt:
    external: true

services:
  mailserver:
    image: analogic/poste.io:latest
    hostname: mail.harianto.dev
    environment:
      - TZ=Europe/Amsterdam
      - MODE=pro
    volumes:
      - ./data/mailserver:/data
      - letsencrypt:/etc/letsencrypt
    ports:
      # - 80:80/tcp   # HTTP
      # - 443:443/tcp # HTTPS
      - 25:25/tcp   # SMTP
      - 465:465/tcp # SMTPS
      - 587:587/tcp # SMTP
      - 110:110/tcp # POP3
      - 995:995/tcp # POP3S
      - 143:143/tcp # IMAP
      - 993:993/tcp # IMAPS
      - 4190:4190/tcp # Sieve
    # network_mode: host

# create network: docker network create xnmp-network
networks:
  default:
    name: xnmp-network
    external: true

docker-compose exec mailserver bash

inside mailserver terminal

# add user `mail` to `root` group
sudo adduser mail root

# make a symlink from a mounted letsencrypt
cd /data/ssl
rm -rf letsencrypt
ln -nsf /etc/letsencrypt/live /data/ssl/letsencrypt

# exit docker terminal
exit

This make sure mail user have read/write access to root files, so it can read letsencrypt files

Restart Docker

docker-compose restart mailserver

Just run:

npx nuxi init my-nuxt-app -t gh:HariantoAtWork/nuxt-3-boilerplate

Install

npm i @harianto/axioscancelable

AxiosCancelable

Axios with custom CancelablePromise cancelation

Node: v20.16.0
NPM: 10.8.1

This is ESM variant from NPM: axiosbluebird.

How to use - factoryAxiosCancelable

import { factoryAxiosCancelable, isCancel } from '@harianto/axioscancelable'

method: GET

const getDefaultConfig = {
  method: 'get',
  url: 'https://api.sylo.space/test/axioscancelable/data'
}

// Factory (Instantiate)
const getData = factoryAxiosCancelable(getDefaultConfig)

// See Axios Config: params
const firstRequest = getData({
  params: {
    id: 12345
  }
})

firstRequest
  .then(data => {
    console.log('SUCCESS firstRequest!!!', data)
  })
  .catch(error => {
    if (isCancel(error)) {
      console.log('Request aborted firstRequest')
    } else {
      console.error(error)
    }
  })

const secondRequest = getData({
  params: {
    id: 67890
  }
})

secondRequest
  .then(data => {
    console.log('SUCCESS secondRequest!!!', data)
  })
  .catch(error => {
    if (isCancel(error)) {
      console.log('Request aborted secondRequest')
    } else {
      console.error(error)
    }
  })

// Note: The `firstRequest` gets aborted

Method: POST

const postDefaultConfig = {
  method: 'post',
  url: 'https://api.sylo.space/test/axioscancelable/data'
}

// Factoried (Instantiate)
const postData = factoryAxiosCancelable(postDefaultConfig)

// See Axios Config: data
const thirdRequest = postData({
  data: {
    id: 12345
  }
})

thirdRequest
  .then(data => {
    console.log('SUCCESS thirdRequest!!!', data)
  })
  .catch(error => {
    if (isCancel(error)) {
      console.log('Request aborted thirdRequest')
    } else {
      console.error(error)
    }
  })

const fourthRequest = postData({
  data: {
    id: 67890
  }
})

fourthRequest
  .then(data => {
    console.log('SUCCESS fourthRequest!!!', data)
  })
  .catch(error => {
    if (isCancel(error)) {
      console.log('Request aborted fourthRequest')
    } else {
      console.error(error)
    }
  })

// Note: The `thirdRequest` gets aborted

How to use - axiosCancelable

import axiosCancelable, { isCancel } from '@harianto/axioscancelable'

axiosCancelable.get - or get | delete | head | options

// Factoried (Instantiate) with .get()
// axiosCancelable.get(url, [params], [config])
const getData = axiosCancelable.get()

// firstRequest
getData('https://api.sylo.space/test/axioscancelable/data', {id: 17})
  .catch(error => {
    if (isCancel(error)) {
      console.log('Request aborted firstRequest')
    } else {
      console.error(error)
    }
  })
// secondRequest
getData('https://api.sylo.space/test/axioscancelable/data', {id: [1,2,3]})
  .then(console.log.bind(console))
// Note: `firstRequest` gets aborted

axiosCancelable.post - or post | put | patch

import axiosCancelable, { isCancel } from '@harianto/axioscancelable'

// Factoried (Instantiate) with .post()
// axiosCancelable.post(url, data, [config])
const postData = axiosCancelable.post()

// firstRequest
postData('https://api.sylo.space/test/axioscancelable/data', {id: 17})
  .catch(error => {
    if (isCancel(error)) {
      console.log('Request aborted firstRequest')
    } else {
      console.error(error)
    }
  })
// secondRequest
postData('https://api.sylo.space/test/axioscancelable/data', {id: [1,2,3]})
  .then(console.log.bind(console))
// Note: `firstRequest` gets aborted

How to use - axios | Factory

Parameters as Object in axios documentation

Parameters as String not supported

import axiosCancelable, { isCancel } from '@harianto/axioscancelable'

// Factoried (Instantiate) with .axios()
// axiosCancelable.axios(config)
const axiosData = axiosCancelable.axios()

// 1st request
axiosData({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

// 2nd request
axiosData({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream' 
})
  .then(
    response => response.data.pipe(fs.createWriteStream("ada_lovelace.jpg"))
  ) // previous request (1st request) will be canceled

responseType: 'stream' not yet tested

Getting Data Response

// Factoried (Instantiate) with .axios()
const axiosRequest = axiosCancelable.axios()
// 1st request
axiosRequest({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
  .then(({data}) => data)
  .catch(error => {
    if (isCancel(error)) {
      console.log('Request aborted')
    } else {
      console.error(error)
    }
  })

Examples

Have an ajax.js file - factoryAxiosCancelable

import { factoryAxiosCancelable } from '@harianto/axioscancelable'
export { isCancel } from '@harianto/axioscancelable'

const instances = {
  getProfile: factoryAxiosCancelable({ method: 'get', url: '/api/profile' }),
  postProfile: factoryAxiosCancelable({ method: 'post', url: '/api/profile' }),
  postVerifytoken: factoryAxiosCancelable({ method: 'post', url: '/api/verifytoken' }),
  postRegister: factoryAxiosCancelable({ method: 'post', url: '/api/register' }),
  postLogin: factoryAxiosCancelable({ method: 'post', url: '/api/login' })
}
const onCanceled = error => {
  if (isCancel(error)) {
    console.log('Canceled')
  } else {
    throw error
  }
}

export const getProfile = (params = {}) =>
  instances.getProfile({params}).catch(onCanceled)
export const postProfile = (data = {}) =>
  instances.postProfile({data}).catch(onCanceled)
export const postVerifytoken = (data = {}) =>
  instances.postVerifytoken({data}).catch(onCanceled)
export const postRegister = (data = {}) =>
  instances.postRegister({data}).catch(onCanceled)
export const postLogin = (data = {}) =>
  instances.postLogin({data}).catch(onCanceled)

Have an ajax.js file - axiosCancelable

import axiosCancelable from '@harianto/axioscancelable'
export { isCancel } from '@harianto/axioscancelable'

const instances = {
  getProfile: axiosCancelable.get('/api/profile'),
  postProfile: axiosCancelable.post('/api/profile'),
  postVerifytoken: axiosCancelable.post('/api/verifytoken'),
  postRegister: axiosCancelable.post('/api/register'),
  postLogin: axiosCancelable.post('/api/login')
}
const onCanceled = error => {
  if (isCancel(error)) {
    console.log('Canceled')
  } else {
    throw error
  }
}

export const getProfile = (params = {}) =>
  instances.getProfile(null, params).catch(onCanceled)
export const postProfile = (data = {}) =>
  instances.postProfile(null, data).catch(onCanceled)
export const postVerifytoken = (data = {}) =>
  instances.postVerifytoken(null, data).catch(onCanceled)
export const postRegister = (data = {}) =>
  instances.postRegister(null, data).catch(onCanceled)
export const postLogin = (data = {}) =>
  instances.postLogin(null, data).catch(onCanceled)

Methods

axios ( requestConfig: Object ): Request with configuration

delete ( url: String [, params: Object] [, config: Object] ): Axios request with DELETE method

get ( url: String [, params: Object] [, config: Object] ): Axios request with GET method

head ( url: String [, params: Object] [, config: Object] ): Axios request with HEAD method

options ( url: String [, params: Object] [, config: Object] ): Axios request with OPTIONS method

post ( url: String, data: Object [, config: Object] ): Axios request with POST method

put ( url: String, data: Object [, config: Object] ): Axios request with PUT method

patch ( url: String, data: Object [, config: Object] ): Axios request with PATCH method

NOTE!

Param properties as array

params: {
  filter: [8, 16, 32]
}

will output:

filter=8&filter=16&filter=32

Idealisticly:

filter=[8,16,32]

But some servers can't accept brackets

Create project

Let’s use the command line to create our project my-vite-vue-ssr.

npm create vite-extra@latest my-vite-vue-ssr -- --template ssr-vue

Scaffolding project in /Users/harianto/Projects/my-vite-vue-ssr...

Done. Now run:

  cd my-vite-vue-ssr
  npm install
  npm run dev

Follow other commands then continue.

Save your current Node & NPM version (for NVM).

node -v > .nvmrc

Initiate git with git init. And save the Initial state.

git init

Initialized empty Git repository in ~/git/my-vite-vue-ssr/.git/

# Stage all files
git add .
# Commit and Message it
git commit -avm "INIT my-vite-vue-ssr Node `node -v`"

Docker things

Add .dockerignore

# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
# .nuxt

# Nuxt generate
dist

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless

# IDE / Editor
.idea

# Service worker
sw.*

# Mac OSX
.DS_Store

# Vim swap files
*.swp

# VSCode Settings
.vscode

# APP IGNORES
package-lock.json
.git
.docker-mount

Create Docker Node Image

Before we create Dockerfile we need to edit the package.json. In scripts we add more handy command lines.

I’m using Docker Hub User as dockeruser and project name as my-vite-vue-ssr. Use your own preferences and change the code accordingly.

  "scripts": {
    "docker": "cross-env NODE_ENV=production npm run dev",
    "docker:build": "npm run build && docker build -t dockeruser/my-vite-vue-ssr .",
    "docker:run": "docker run --rm -p 3000:3000 dockeruser/my-vite-vue-ssr",
    "docker:push": "npm run docker:build && docker push dockeruser/my-vite-vue-ssr"
  },

See we’re using port 3000 instead of 5173

And move all devDependencies lines to dependencies.

During Docker build the script will only check dependencies.

See below the result.

{
  "name": "my-vite-vue-ssr",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "node server",
    "build": "npm run build:client && npm run build:server",
    "build:client": "vite build --ssrManifest --outDir dist/client",
    "build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
    "preview": "cross-env NODE_ENV=production node server",
    "docker": "cross-env NODE_ENV=production npm run dev",
    "docker:build": "npm run build && docker build -t dockeruser/my-vite-vue-ssr .",
    "docker:run": "docker run --rm -p 3000:3000 dockeruser/my-vite-vue-ssr",
    "docker:push": "npm run docker:build && docker push dockeruser/my-vite-vue-ssr"
  },
  "dependencies": {
    "compression": "^1.7.4",
    "express": "^4.18.2",
    "sirv": "^2.0.4",
    "vue": "^3.3.13",
    "@vitejs/plugin-vue": "^4.5.2",
    "cross-env": "^7.0.3",
    "vite": "^5.0.10"
  },
  "devDependencies": {}
}

Create Dockerfile

Since my node version is v21.6.2. I’m looking which Alpine version from https://hub.docker.com/_/node/ and look for available version number -alpine.

FROM node:21.6.2-alpine

EXPOSE 3000

ENV NODE_ENV=production
ENV PORT=3000
ENV NODE_WORKDIR=/app
WORKDIR $NODE_WORKDIR

COPY package.json $NODE_WORKDIR/
RUN npm shrinkwrap
RUN npm i
COPY . $NODE_WORKDIR
RUN npm run build

CMD ["npm", "run", "docker"]

Build Docker Image

Create Docker Image: dockeruser/my-vite-vue-ssr.

Since we made special commands in package.json we can build from it, without knowing long strings of commands. Just peek it in.

npm run docker:build

Hopefully everything goes well, and we can look up with in command: docker images.

REPOSITORY                         TAG                 IMAGE ID       CREATED              SIZE
dockeruser/my-vite-vue-ssr         latest              323b18f70290   About a minute ago   211MB

Test Docker Image

Let’s use the command and check the web: http://localhost:3000/

npm run docker:run

Kill Running Image

To kill the image, first we need to see what’s running again on port 3000. With this command below we can see what’s going on.

docker ps | grep 3000

7d32fd2396d8   dockeruser/my-vite-vue-ssr           "docker-entrypoint.s…"   13 minutes ago   Up 13 minutes   0.0.0.0:3000->3000/tcp                     stupefied_cohen

Use this info 7d32fd2396d8 to kill the process.

docker rm -f 7d32fd2396d8

Other useful docker commands

# see docker images
docker images

# remove IMAGE ID ex. baabdd69cf7a
docker rmi -f baabdd69cf7a

# see dangling images
docker images -q --filter "dangling=true"

# remove untagged images
docker rmi -f `docker images -q --filter "dangling=true"` > /dev/null 2>&1 || echo "Nothing to remove"

Conclusion

This is the way to build your own docker image. Every time you have new changes you can run again: npm run docker-build.

And if you have Docker Hub you can push it with: npm run docker:push.

Also don’t forget to commit your git.

Let me know what you think of this article?

Stuff comes from Angular 2.0, then some people over-hype it, the community are just like sheep, polluting Vue 3.

Coming from a person that mastered JavaScript, I don’t need or looking for jobs with TypeScript. Some people have written better articles, why it is so bad. (It’s like they read my mind).

// Factory: createEventBus
const createEventBus = function () {
  const state = {
    listeners: {}
  }

  const methods = {
    // addEventListener
    $on(eventType, callback) {
      if (!Array.isArray(state.listeners[eventType])) {
        state.listeners[eventType] = []
      }
      if (state.listeners[eventType].indexOf(callback) === -1)
        state.listeners[eventType].push(callback)
    },
    // removeEventListener
    $off(eventType, callback) {
      if (Array.isArray(state.listeners[eventType])) {
        const index = state.listeners[eventType].indexOf(callback)
        if (index !== -1) state.listeners[eventType].splice(index, 1)
      }
    },
    // dispatchEvent
    $emit(eventType, data) {
      if (Array.isArray(state.listeners[eventType]))
        state.listeners[eventType].forEach(cb => cb(data))
    },
    // reset listeners
    $destroy() {
      state.listeners = {}
    }
  }

  return methods
}

// Class: EventBus
const EventBus = function () {
  Object.assign(this, createEventBus())
}

export default createEventBus
export { EventBus }

How to use

Factory way

import createEventBus from './createEventBus'

// create the product (from Factory)
const eventBus = createEventBus()
export default eventBus

import eventBus from './eventBus'

// # addEventListener
eventBus.$on('message', console.log.bind(console, 'message:'))

const temporaryEvent = console.log.bind(console, 'temporary:')
eventBus.$on('temporary', temporaryEvent)

// # removeEventListener
eventBus.$off('temporary', temporaryEvent)

// # dispatchEvent
eventBus.$emit('message', 'Hello world')
// -> message: Hello world
eventBus.$emit('message', { name: 'Anna', age: 21 })
// -> {name: 'Anna', age: 21}

// # destroy events
eventBus.$destroy()

eventBus.$emit('message', 'This should not log after destroy')
// ->           

Class way

import { EventBus } from './createEventBus'

// instantiate EventBus
const eventBus = new EventBus()
export default eventBus

import { EventBus } from './createEventBus'
import eventBus from './eventBus'

// # Check instance
console.log(eventBus instanceof EventBus)
// -> true

// # addEventListener
eventBus.$on('message', console.log.bind(console, 'message:'))

const temporaryEvent = console.log.bind(console, 'temporary:')
eventBus.$on('temporary', temporaryEvent)

// # removeEventListener
eventBus.$off('temporary', temporaryEvent)

// # dispatchEvent
eventBus.$emit('message', 'Hello world')
// -> message: Hello world
eventBus.$emit('message', { name: 'Anna', age: 21 })
// -> {name: 'Anna', age: 21}


// # destroy events
eventBus.$destroy()

eventBus.$emit('message', 'This should not log after destroy')
// ->           

Vue Option API way

No, I don’t like over-hyped Composition API

<script>
import createEventBus from './createEventBus'

export default {
  // LifeCycle Hooks
  beforeCreate() {
    // create the product (from Factory)
    const eventBus = eventEventBus()
    const {
      $on: $$on,
      $off: $$off,
      $emit: $$emit // Vue has internal $emit, change to $$emit
    } = eventBus
    // assign to Proxy Object
    Object.assign(
      this,
      { eventBus },
      {
        $$on,
        $$off,
        $$emit
      }
    )
  },
  mounted() {
    this.intervalID = setInterval(() => {
      this.$$emit('tick', 'Tick Tock')
    }, 1e3)
  },
  beforeUnmount() {
    // destroy IntervalID 
    clearInterval(this.intervalID)
    // destroyes all eventBus event listeners
    this.eventBus.$destroy()   
  }
}
</script>

import { createApp } form 'vue'
import HelloWorld from './HelloWorld.vue'

const template = document.createElement('template')
const app = createApp(vueOjbject, props)
const proxy = app.mount(template) // Proxy Object

// attach addEventListener
proxy.$$on('tick', data => {
  console.log('on tick:', data)
})
// -> on tick: Tick Tock
// -> on tick: Tick Tock
// -> on tick: Tick Tock

`Vue.extend` to `createApp`

In Vue 2 if you want to extend a component Types.vue

import Vue from 'vue'
import Types from './Types.vue'

const methods = {
  extendedTypes({ type, title, message }) {
    const ExtendedVue = Vue.extend(Types)
    const vm = new ExtendedVue({
      propsData: {
        type,
        title,
        message,
      },
    }).$mount()
    return vm
  }
}

// vm (aka Proxy Object)
const proxy = methods.extendedTyes('default', 'Hello', 'World')
const node = proxy.$el

proxy.$el in Vue 2 restricts to one child element. When you append a child to a parentNode, would be easy: parentNode.appendChild(proxy.$el)

to Vue 3

import { createApp } from 'vue'
import Types from './Types.vue'

const extend = (
  vueOjbject = { template: `<span>test</span>` },
  props = {}
) => {
  const template = document.createElement('template')
  const app = createApp(vueOjbject, props)
  return app.mount(template) // Proxy Object
}

const methods = {
  extendedTypes({ type, title, message }) {
    return extend(Types, { type, title, message })
  }
}

// vm (aka Proxy Object)
const proxy = methods.extendedTyes('default', 'Hello', 'World')
const node = proxy.$el

proxy.$el in Vue 3, has HTMLElement (single child) or Text (multiple children). Would appending proxy.$el more challenging.

const appendChild = (parentNode, childNode) => {
  console.log(`-------# constructor: ${childNode?.constructor?.name}`)
 
  switch (true) {
    case childNode instanceof HTMLTemplateElement:
      console.log('---- HTMLTemplateElement')
      Array.from(childNode.childNodes).forEach(child =>
        parentNode.appendChild(child)
      )
      break

    case childNode instanceof Text:
      console.log('---- Text: Proxy.$el')
      appendChild(parentNode, childNode.parentNode)
      break

    case childNode instanceof HTMLElement:
      console.log('---- HTMLElement')
      parentNode.appendChild(childNode)
      break

    default:
      console.log('---- nothing')
      break
  }
}

const parentNode = document.createElement('div')
// Add Extended Vue Module to parentNode
appendChild(parentNode, proxy.$el)

Advanced mounting

Use 'vue/dist/vue.esm-bundler' instead of 'vue'

import { defineComponent, createApp, reactive } from 'vue/dist/vue.esm-bundler'

const template = document.createElement('template')
const component = defineComponent({
  template: `<h1 v-text="title"/>
    <p v-text="description" />
    <button @click="onClick">{{ buttonName }}</button>`,
  props: ['title']},
  data: () => ({
    buttonName: 'Click,
    description: ''
  }),
  methods: {
    onClick() {
      // Use `proxy` aka `vm`
      if (typeof this.clicked === 'function') this.clicked(this)
    }
  }
)
const app = createApp(component, { title: 'Master of Code' })

// kind of `vm` instance after `mount`
const proxy = app.mount(template)

// controll the Vue Module
// --- attach `clicked` function
proxy.clicked = vm => {
  vm.buttonName = 'Clicked'
  alert('Button is clicked')
}


// appendChild to a element `parentNode`
const vInjectElements = () => {
  const log = console.log
  let logText = '/root'
  const appendChild = (parentNode, childNode) => {
    log(`-- # constructor: ${childNode?.constructor?.name}`)
    logText += '.constructor'
    let template
    switch (true) {
      case childNode instanceof HTMLTemplateElement:
        log('---- HTMLTemplateElement')
        logText += '.HTMLTemplateElement'
        log(logText)
        Array.from(childNode.childNodes).forEach(child =>
          parentNode.appendChild(child)
        )
        break

      case childNode instanceof Text:
        log('---- Text: Proxy.$el')
        logText += '.Text'
        // template Element from childNode.parentNode
        appendChild(parentNode, childNode.parentNode)
        break

      case childNode instanceof DocumentFragment:
        log('---- DocumentFragment')
        logText += '.DocumentFragment'
        log(logText)
        parentNode.appendChild(childNode)
        break

      case childNode instanceof HTMLElement:
        log('---- HTMLElement')
        logText += '.HTMLElement'
        log(logText)
        parentNode.appendChild(childNode)
        break

      case childNode instanceof Object:
        log('---- Object Vue Component')
        template = document.createElement('template')
        logText += '.VueComponent'
        // Check if object is a Vue App or Vue Component
        if (typeof childNode.mount === 'function') {
          // Vue App
          log('------ by: createApp')
          logText += '.createApp'
          if (childNode._container) {
            log('-------- is already mounted')
            logText += '._container'
            template = childNode._container
          } else {
            log('-------- mount the childNode')
            logText += '.mountChildNodeToTemplate'
            childNode.mount(template)
          }
        } else {
          // Vue Component
          log('------ by: defineComponent')
          logText += '.defineComponent'
          if (childNode?.$?.isMounted) {
            logText += '.$el'
            template = childNode.$el
          } else {
            logText += '.createAppAndMount'
            createApp(childNode).mount(template)
          }
        }
        appendChild(parentNode, template)
        break

      default:
        log('---- nothing')
        logText += '.nothing'
        log(logText)
        break
    }
  }
  
  return {
    mounted(el, binding) {
      const { value: elements } = binding
      elements.forEach(childNode => appendChild(el, childNode))
    }
  }
}

export default {
  directives: {
    injectElements: vInjectElements
  },
  data: () => ({
    list: []
  }),
  template: `<h1>Title</h1>
  <p>Some paragraph here</p>
  <section v-inject-elements="list" />`
}

The products I bought that seems to help for my needs.

Bringing back that MacSafe

MacSafe is a magnetic technology from Apple they used to had on older MacBook models; a charging port that connect with cable with magnets. This would prevent accidents when someone walk over your cable but get caught and swoop your laptop off the table.

This MacBook only comes with 2 Thunderbolt/USB 4 and headphone ports.

So I thought maybe this year there is something for it and I found two products and keys that I need:

• It has magnets
• 4K at least 60Hz
• Charge my MacBook
• Transfer data

Basically everything, but and extension.

It's small and compact and you can easily fit two of these in your MacBook. But the magnet feels weak against sturdy USB-C cables.

I personally use this more often, because I've got sturdy USB-C cable and this product has Ultra Strong Magnets. But it's quite big and can't only fit one of the same.

Closing the lid scratches the screen

Closing the lid makes contact with keyboard keys that scratches the screen overtime. I've used many MacBook's over the years and even I use it carefully I still get scratches on my screen. You can guess it how; It’s the keyboard!

I can finally close the lid with this microfibre cloth between it.

USB-C to USB-C cable

Connect my MacBook to an external monitor. What is with this USB-C to HDMI cable/adapter that can’t deliver 4K @ 60Hz. I thought I found an adapter, but it never supports 3840 x 2160. And all those cables extensions really look-a-like that you really need to check carefully for not buying the wrong product.

Maybe I should buy 3 meter long cable, or a Thunderbolt could be good idea. Might be overkill.

When my ‘Toy’ arrived I felt like a little kid, things I want to do with it comes to mind.

Start Your M1 Mac Up in Recovery Mode

New Mac OS installation comes as Case-Insensitive and as a developer I felt like I need to turn back to Case-Sensitive. So I have to format the hard-drive as a APFS Case-Sensitive.

To do this, you have to complete shutdown your Air. Then press down and hold the Power Button

Press and hold the Power Button until you see ‘loading startup options’ under Apple logo. Select Options and click Continue. Choose an administrator account and enter its password.

Format Hard Disk as APFS (Case-Sensitive)

• Choose ‘Disk Utility’ and click Continue.
• On ‘Internal’ choose ‘Macintosh HD volumes’.
• On right top menu buttons choose ‘Erase’.

• A new window pop-up ‘Erase APFS volume group “Macintosh HD”?’
  • Name: Macintosh HD
  • Format: APFS (Case-sensitive)
  • Then press Erase

After formatting Recovery Mode will automatically reboot system.

Update your OS

• On the apple icon () go to: About This Mac
• An Overview will shown then press: Software Update

Install Command Line Tools

xcode-select --install

Generating a new SSH key

ssh-keygen -t ed25519

More info find here: Generating a new SSH key

# view .pub file
cat ~/.ssh/id_ed25519.pub

# copy file to clipboard
pbcopy < ~/.ssh/id_ed25519.pub

# check content from clipboard
pbpaste

Optional

In GitHub add New SSH key

Install system softwares

• iTerm2
• oh-my-zsh
• brew (to install NVM)
  - brew install nvm
  - nvm install 16
• Docker Desktop on Mac with Apple chip

Install Apps

• docker-xnmp-vhost
• Visual Studio Code

Optional Apps

• Bitwarden
• Display Menu
• MonitorControl
• Moom
• MenubarX
• Forklift
• Synology Drive Client 920+

Configurations

ZSH

Append some lines

# Connect VPS
alias vps='ssh root@xxx.xxx.xxx.xx'

# Docker commands
alias docker.kill='docker rm -f $(docker ps -a -q)'
alias docker.dangling='docker images -q --filter "dangling=true"'
alias docker.remove-untagged-images='docker rmi -f `docker.dangling` > /dev/null 2>&1 || echo "Nothing to remove"'
alias docker.ip='docker inspect -f "{{range.NetworkSettings.Networks}}{{.IPAddress}}{{end}}" $1'
alias docker.down='docker-compose down --remove-orphans'
alias docker.up='docker-compose up --build -d'
alias docker.restart='docker.down && docker.up && docker-compose logs -f'

# NVM config
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

eval "$(/opt/homebrew/bin/brew shellenv)"

iTerm2

Assign a Hotkey to bring terminal with ease.

Setting Hotkey

• In Preferences go to Keys / HotKey / Create a Dedicated Hotkey Window, then a new window appears.
• Activate Double-tap Key: and set to CMD, and OK.
• Activate Pin hotkey window.
• Activate Animate showing and hiding.

Display Menu

Sometimes you just want the full resolution (2560x1600) instead of retina (1680x1050) as workspace. It's easier to switch resolution between monitors.

MonitorControl

Strangely MacBook only work with single Master Volume and I really want to control volume on my external monitor. At least this will work for me.

Moom

Working with external 4K monitor, I want 3 columns window instead of 2. This is good enough, but I rather have those features on my PopOS Gnome Extension called gTile. Using Hotkeys combo to bring up a panel then reorder all your windows.

MenubarX

Side load a mini browser for live stats.

Forklift

It’s a two-panel Finder to manage your files.

Synology Drive Client

It’s like a DropBox but private.

MacBook Accessories

• LetsSwipeThat - cloth; between keys and screen, mainly to protect the screen when closing the lid.
• Magnetic USB-C Adapter 4K - bring back MacSafe

Ideas

• How to mount SFTP as a drive on Mac
• Making FUSE for macOS Work with Apple Silicon (M1) Macs

Synology: DSM 7.2.1-69057 Update 3

For those who had errors after reboot. The script that update the DSM devices works for me.

When Synology released DS920+, many customer (include me) think the additional NVME slots can use as storage. But the truth is - NVME SSD can only setup as cache in DSM.

As DSM is a Linux based system, I think I can try to use command (instead of DSM interface) setup NVME as storage. After some trial and test, I found the step to make it work.

You should have some knowledge on using command line (ssh) in DSM and highly recommend to backup you system beforehand. Also, you may risk to lost your DSM setting/volume/data.

Install NVMe SSD

Install NVME SSD to DS920 and bootup.

Enable SSH

If you already enabled SSH. You can skip this.

Enable SSH login on your DS920+.

Use script to add your drives to your Synology's drive compatibility database v1.2.16

I found some sources to fix my device by running a script. Read more below how I fixed my NVMe device.

Login to SSH as root ( sudo -s )

# create directory
mkdir -p /volume1/scripts
# goto directory
cd /volume1/scripts
# download file from github and untar
curl -sSL https://github.com/007revad/Synology_HDD_db/archive/master.tar.gz | tar -xvzf -

Synology_HDD_db-main/
Synology_HDD_db-main/.github/
Synology_HDD_db-main/.github/FUNDING.yml
Synology_HDD_db-main/CHANGES.txt
Synology_HDD_db-main/LICENSE
Synology_HDD_db-main/README.md
Synology_HDD_db-main/bin/
Synology_HDD_db-main/bin/dtc
Synology_HDD_db-main/how_to_schedule.md
Synology_HDD_db-main/images/
Synology_HDD_db-main/images/how_to_download.png
Synology_HDD_db-main/images/ram_warning.png
Synology_HDD_db-main/images/schedule1.png
Synology_HDD_db-main/images/schedule2.png
Synology_HDD_db-main/images/schedule3.png
Synology_HDD_db-main/images/syno_hdd_db.png
Synology_HDD_db-main/images/syno_hdd_db1.png
Synology_HDD_db-main/images/syno_hdd_db2.png
Synology_HDD_db-main/images/syno_hdd_db_help.png
Synology_HDD_db-main/images/syno_hdd_db_help2.png
Synology_HDD_db-main/images/unknown.png
Synology_HDD_db-main/images/update-now-disabled.png
Synology_HDD_db-main/images/update-now-working.png
Synology_HDD_db-main/images/vendor_ids.png
Synology_HDD_db-main/my-other-scripts.md
Synology_HDD_db-main/syno_hdd_db.sh
Synology_HDD_db-main/syno_hdd_vendor_ids.txt

Run the script

# CHMOD the file
chmod +x Synology_HDD_db-main/syno_hdd_db.sh

# Run the script
/volume1/scripts/Synology_HDD_db-main/syno_hdd_db.sh

Synology_HDD_db v3.4.84
DS920+ DSM 7.2.1-69057-3
StorageManager 1.0.0-0017

Using options:
Running from: /volume1/scripts/Synology_HDD_db-main/syno_hdd_db.sh

HDD/SSD models found: 1
ST16000NE000-2RW103,EN02

M.2 drive models found: 1
Samsung SSD 980 PRO 1TB,4B2QGXA7

No M.2 PCIe cards found

No Expansion Units found

ST16000NE000-2RW103 already exists in ds920+_host_v7.db
Edited unverified drives in ds920+_host_v7.db
Added Samsung SSD 980 PRO 1TB to ds920+_host_v7.db

Backed up synoinfo.conf

Support disk compatibility already enabled.

Support memory compatibility already enabled.

NVMe support already enabled.

Enabled M.2 volume support.

Drive db auto updates already enabled.

DSM successfully checked disk compatibility.

You may need to reboot the Synology to see the changes.

v3.4.84 this time of writing
https://github.com/007revad/Synology_HDD_db/archive/refs/tags/v3.4.84.tar.gz

Optional

You can download the file from the Release instead of Main branch

Release v3.4.84 · 007revad/Synology_HDD_db

Bug fix when script updates itself and user ran the script from ./scriptname.sh

GitHub007revad

curl -sSL `curl -sSL https://api.github.com/repos/007revad/Synology_HDD_db/releases/latest | jq -r '.tarball_url'` | tar -xvzf -

Optional: Run script on every boot

Yes. You also have to re-run the script after DSM downloads a newer version of the drive-compatibility database, which can happen between DSM updates.

It's best to schedule the script to run when the Synology boots.

• Go to Control Panel > Task Scheduler, click Create, and select Triggered Task.
• Select User-defined script.
• Enter a task name.
• Select root as the user.
• Select Boot-up as the event that triggers the task.
• Leave enable ticked.
• Click Task Settings.
• Optionally you can tick "Send run details by email" and "Send run details only when the script terminates abnormally" then enter your email address.
• In the box under "User-defined script" type the path to the script. e.g. If you saved the script to a shared folder on volume1 called "scripts" you'd type: /volume1/scripts/Synology_HDD_db-main/syno_hdd_db.sh
• Click OK to save the settings.

In your DSM see the changes

Sources (Script compatibility database)

GitHub - 007revad/Synology_HDD_db: Add your HDD, SSD and NVMe drives to your Synology’s compatible drive database

Add your HDD, SSD and NVMe drives to your Synology's compatible drive database - GitHub - 007revad/Synology_HDD_db: Add your HDD, SSD and NVMe drives to your Synology's compatible drive dat...

GitHub007revad

What the script does

• Gets the Synology NAS model and DSM version (so it knows which db files to edit).
• Gets a list of the HDD, SSD, SAS and NVMe drives installed in your Synology NAS.
• Gets each drive's model number and firmware version.
• Backs up the database files if there is no backup already.
• Checks if each drive is already in the Synology's compatible-drive database.
• Adds any missing drives to the Synology's compatible-drive database.
• Prevents DSM auto updating the drive database.
• Optionally disable DSM's "support_disk_compatibility".
• Optionally disable DSM's "support_memory_compatibility" to prevent non-Synology memory notifications.
• Optionally edits max supported memory to match the amount of memory installed, if installed memory is greater than the current max memory setting.
• DSM only uses the max memory setting when calculating the reserved RAM area size for SSD caches.
• Optionally disables Western Digital Device Analytics (aka WDDA) to prevent DSM showing a warning for WD drives that are 3 years old.
• DSM 7.2.1 already has WDDA disabled.
• Enables M2D20, M2D18, M2D17 and E10M20-T1 if present on Synology NAS that don't officially support them.
• Checks that M.2 volume support is enabled (on models that have M.2 slots or PCIe slots).
• Enables creating M.2 storage pools and volumes from within Storage Manager (newer models only?).
• Including M.2 drives in PCIe adaptor cards like M2D20, M2D18, M2D17 and E10M20-T1 for DSM 7.2.1 and above (need to run script after each boot).
• Makes DSM recheck disk compatibility so rebooting is not needed if you don't have M.2 drives (DSM 7 only).
• If you have M.2 drives you may need to reboot.
• Reminds you that you may need to reboot the Synology after running the script.
• Checks if there is a newer version of this script and offers to download it for you.
• The new version available messages time out so they don't prevent the script running if it is scheduled to run unattended.

Create Partition

Login as root sudo -s  with SSH and type :

ls /dev/nvme*

In this case /dev/nvme0n1

You will see the /dev/nvme0n1 or /dev/nvme1n1 depend on which slot you install the SSD.

If your SSD at slot 2, use /dev/nvme1n1 instead

fdisk -l /dev/nvme0n1

Disk /dev/nvme0n1: 931.5 GiB, 1000204886016 bytes, 1953525168 sectors
Disk model: Samsung SSD 980 PRO 1TB
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes

With this command we check

synopartition --check /dev/sata1

/dev/sata1: partition layout is version 8, list index is 14.

We use 14 for the next command.

synopartition --part /dev/nvme0n1 14

--part [--force] disk_path index_of_list(1~20) [logical_size_GB ... 0]
Partition the disk with specific layout.

        Device   Sectors (Version6: SupportRaid)
 /dev/nvme0n11   4980087 (2431 MB)
 /dev/nvme0n12   4192965 (2047 MB)
Reserved size:    257040 ( 125 MB)
Primary data partition will be created.

WARNING: This action will erase all data on '/dev/nvme0n1' and repart it, are you sure to continue? [y/N]

and answer y if you confirm

WARNING! You have only one disk.
Cleaning all partitions...
Creating sys partitions...
Creating primary data partition...
Please remember to mdadm and mkfs new partitions.

it will create the partition that follow DSM required layout.

Type

 fdisk -l /dev/nvme0n1

You will see the partition layout is created

Disk /dev/nvme0n1: 931.5 GiB, 1000204886016 bytes, 1953525168 sectors
Disk model: Samsung SSD 980 PRO 1TB
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0x75e5d2a8

Device         Boot   Start        End    Sectors  Size Id Type
/dev/nvme0n1p1         2048    4982527    4980480  2.4G fd Linux raid autodetect
/dev/nvme0n1p2      4982528    9176831    4194304    2G fd Linux raid autodetect
/dev/nvme0n1p3      9437184 1953520064 1944082881  927G fd Linux raid autodetect

Create FileSystem

Format Partition

Formatting as Ext4 or BTRFS

Option: BRTFS

mkfs.btrfs -f /dev/nvme0n1p3

Option: Ext4

mkfs.ext4 -F /dev/nvme0n1p3

mke2fs 1.44.1 (24-Mar-2018)
Creating filesystem with 243010096 4k blocks and 60760064 inodes
Filesystem UUID: 12aee3b8-c62b-46c4-88f7-a412d8010017
Superblock backups stored on blocks:
	32768, 98304, 163840, 229376, 294912, 819200, 884736, 1605632, 2654208,
	4096000, 7962624, 11239424, 20480000, 23887872, 71663616, 78675968,
	102400000, 214990848

Allocating group tables: done
Writing inode tables: done
Creating journal (262144 blocks): done
Writing superblocks and filesystem accounting information: done

Attach new partition to new RAID array

We need to see how many Multiple Devices (md) are, and attach the NVMe partition to new one.

Type:

cat /proc/mdstat

Personalities : [raid1]
md2 : active raid1 sata1p5[0]
      15621042624 blocks super 1.2 [1/1] [U]

md1 : active raid1 sata1p2[0]
      2097088 blocks [4/1] [U___]

md0 : active raid1 sata1p1[0]
      2490176 blocks [4/1] [U___]

unused devices: <none>

mdadm --create /dev/md3 --level=1 --raid-devices=1 --force /dev/nvme0n1p3

Continue creating array? Answer: y and press Enter

mdadm: Note: this array has metadata at the start and
    may not be suitable as a boot device.  If you plan to
    store '/boot' on this device please ensure that
    your boot-loader understands md/v1.x metadata, or use
    --metadata=0.90
Continue creating array? y
mdadm: Defaulting to version 1.2 metadata
mdadm: array /dev/md3 started.

Continue creating array? Press y and ENTER

Reboot

reboot

Online Assemble on DSM

And after the machine bootup, you will see in the Storage Manager, Storage Available Pool 1

• Go to: Available Pool 1
• Look for the three-dots (...) More-icon and hit: Online Assemble
• Hit: Apply

View (M.2 Drive)

Alternative view (M.2 Cache)

Then hit the More-icon (the three dots ...) for Online Assemble

Confirm settings, hit Apply

Result

As a result Storage Pool 2 is ready and healthy

View (M.2 Drive)

-- insert images --

Alternative View (M.2 Cache)

History

My Storage Pool 2 stops working after reboot. Volume 2 didn’t show. Very frustrating, until I found the script that updates device database. See below the screenshots what it look like when it fails.

Incompatible NVMe

Everything seems fine, until you reboot your DSM (or have a power outage)

Specs

My NVMe specifications:

• Samsung PCIe 4.0 NVMe SSD 980 PRO 1 TB

Revive your critical device

You can go back and remove the Storage Pool (Critical Device).

Assuming DSM creates a record for the Storage Pool, that’s still active and for some reason unable to find a device.
The device /dev/md3 seems to be gone after Online Assemble and the reboot.

Go back to your terminal and format your NVMe. Remember your last address you messed around: /dev/nvme0n1

Login as rootsudo -s  with SSH and type:

synopartition --part /dev/nvme0n1 14

mkfs.btrfs -F /dev/nvme0n1p3

reboot

Fix

Use the script

Trouble Shoot

I removed Storage Pool 2 by accident

You’ve lost all your data. Start over again with re-partition your NVMe again.

I rebooted my Synology

When you followed my article and missed the ‘Update my Synology HDD Database’ part. Use the script.

Some time ago (19 November 2021) I bought a NAS Synology DS920+. It has 4 bays and has two cache slots, also and a slot to expand memory. Because 4 GB is not much, because I might run some Virtualisation and Docker. After for some research, there is a way to go over 4GB and found 16GB SODIMM.

Later on, I bought first HDD Seagate IronWolf Pro 14TB from Amazon.

Later I’ve check it’s better to get 2 HDD's instead of one (of the same size) for data retention

So when I first received my HDD, it was time to check the NAS hardware and mount it.

DSM would only allow you setup NVMe as a DSM cache, but there is a way to use as storage.

There aren't convincing data online that DSM cache really works and most of the Youtube only show bad test case for example data transfer. That's not how memory performance works.

Until I found a way!

Upgrade Minor Version and Patches

docker pull ghost:4-alpine