Pasti sudah kenal dengan systemd di linux ya.

kalo iya kita lanjut, berikut ini sample script auto running next js ketika server reboot.

pertama kali buat sebuah file disebuah directory `/etc/systemd/system/` dengan nama misalnya next-service.service

```bash:/etc/systemd/system/next-service.service
[Unit]
Description=NodeJS server, NextJS public frontend
After=network.target

[Service]
Type=simple
User=ridwan
Group=ridwan
Restart=on-failure
RestartSec=10
WorkingDirectory=/path/to/nextjs/project
# ExecStartPre=/usr/bin/npm install
# ExecStartPre=/usr/bin/npm run build
ExecStart=/usr/bin/npm run start

[Install]
WantedBy=multi-user.target
```

setelah itu jangan lupa 

```bash
systemctl daemon-reload
```

agar file-file service yang baru bisa di kenali.

terakhir 

```bash
systemctl enable next-service.service
```

agar sewaktu reboot service tersebut aktif


Pasti sudah kenal dengan systemd di linux ya. kalo iya kita lanjut, berikut ini sample script auto running next js ketika server reboot.

cara membuat next js running setiap kali server reboot

## Pengenalan 

Barangkali disini sering banget kalo buat repository di git ada sebuah file yang bernama `README.md`
ya betul itu adalah markdown bahasa yang banyak digunakan oleh para developer untuk menulis berbagai jenis konten, seperti posting, blog, dan dokumen. 

sebagai contoh
```markdown showLineNumbers 
## Ini adalah judul
saya adalah ridwan [Ridwan](https://ridwan.id)
```
maka akan menghasilkan dokumen html

```html showLineNumbers
<h2>Ini adalah judul</h2>
<p>saya adalah ridwan <a href="https://ridwan.id">Ridwan</a></p>
```

Menulis dengan Markdown terasa seperti menulis teks biasa, dengan sedikit detail ekstra untuk menyusun konten Anda. Inilah sebabnya mengapa Markdown banyak digunakan oleh pengembang untuk menulis dokumentasi dan artikel.

Menulis dokumen dengan markdown akan terasa seperti nulis text biasa atau plain text, untuk membuat dokumen rich format maka perlu effort yang lebih besar dalam menyusun konten.

ketika suatu konten memerlukan sebuah widget atau html yang interaktif maka di sinilah MDX dibuat. 

MDX adalah bahasa yang memungkinkan hal ini karena memungkinkan Anda untuk menggunakan JSX dalam markdown.

## Apa itu MDX?

Sebelum kita membuat komponen dasar mdx, mari kita bicara sedikit tentang apa itu MDX dan apa yang bisa kita lakukan dengannya.

Penting untuk mengenal Markdown dan JSX sebelum membahas dengan MDX karena MDX ini adalah kombinasi dari kedua nya.

## MDX syntax

kita bisa mengembed sebuah componen JSX atau react kedalam mdx kemudian kita bisa mengimport nya langsung

```jsx
import Image from 'next/image';

<Image src="/images/avatar.jpg" width="300px" height="300px" />
```

maka akan menghasilkan output di halaman ini

import Image from 'next/image';

<Image src="/images/avatar.jpg" width="300px" height="300px" />

## Menulis ekpresi di MDX

di v2 dari MDX ini memungkinkan untuk menulis ekspresi di MDX, seperti yang Anda lakukan di JSX. Contoh sederhananya adalah sebagai berikut:

```markdown
# Hello world

coba 1 + 1 hasil nya = {1+1}
```

maka  akan menghasilkan `coba 1 + 1 hasil nya = 2`

selain itu juga kita bisa membuat sebuah sintak seperti dibawah ini

```markdown
### Top Ten Languages in {new Date().getFullYear()}

{
  ['Java', 'JavaScript', 'Python'].map((language, i) => (
    <li key={'key-' + i}>{language}</li>
  ))
}

```

maka akan menghasilkan output seperti dibawah ini:

### Top Ten Languages in {new Date().getFullYear()}

<ul>
  {['Java', 'JavaScript', 'Python'].map((language, i) => <li key={'key-' + i}>{language}</li>)}
</ul>

### Implementasi membuat sebuah komponen

disini kita coba membuat sebuah komponen yang akan di simpan kedalam sebuah components



```tsx:Skill.tsx showLineNumbers
import cn from 'classnames'
import { useEffect, useState } from 'react'

type Language = {
  name: string
  percent: number
}

type Stack = {
  category: string
  color:
    | 'orange'
    | 'sky'
    | 'blue'
    | 'gray'
    | 'indigo'
    | 'red'
    | 'lime'
    | 'cyan'
    | 'violet'
    | 'slate'
  languages: Language[]
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const progressColor = {
  orange: 'from-orange-600 to-orange-300',
  slate: 'from-slate-600 to-slate-300',
  sky: 'from-sky-600 to-sky-300',
  blue: 'from-blue-600 to-blue-300',
  gray: 'from-gray-600 to-gray-300',
  indigo: 'from-indigo-600 to-indigo-300',
  red: 'from-red-600 to-red-300',
  lime: 'from-lime-600 to-lime-600',
  cyan: 'from-cyan-600 to-cyan-300',
  violet: 'from-violet-600 to-violet-300',
}

export const Skill: React.FC<{ stack?: Array<Stack> }> = ({
  stack = [
    {
      category: 'Backend',
      color: 'orange',
      languages: [
        { name: 'PHP', percent: 90 },
        { name: 'MySQL', percent: 50 },
      ],
    }
  ],
}) => {
 const [mounted, setMounted] = useState<boolean>()
  useEffect(() => setMounted(true), [])

  if (!mounted) {
    return <span>Loading...</span>
  }
  return (
    <div className="grid md:grid-cols-2 md:gap-14 sm:grid-cols-1 sm:grap-4 w-full">
      {stack.map((category, i) => (
        <div key={'category-' + i}>
          <h4 className="mb-5 font-medium">{category.category}</h4>
          {category.languages.map((lang, k) => (
            <div className="flex items-center" key={'lang-' + k}>
              <div className="flex-auto w-40">{lang.name}</div>
              <div className="flex-auto w-full">
                <div className="w-full rounded-full h-2 dark:bg-gray-900">
                  <div
                    style={{ width: lang.percent + '%' }}
                    className={cn(
                      'bg-gradient-to-r',
                      `from-${category.color}-600`,
                      `to-${category.color}-300`,
                      'rounded-full h-2'
                    )}
                  ></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  )
}

export default Skill

```

kemudian kita bisa mengimport nya dan mempassing sebuah properti ke dalam komponen tersebut

```markdown
### Contoh dalam markdown
import Skill from './components/Skill.tsx';

<Skill stack={[
    {
      category: 'Backend',
      color: 'slate',
      languages: [
        { name: 'PHP', percent: Math.ceil(Math.random() * 100) },
        { name: 'GoLang', percent: Math.ceil(Math.random() * 100) },
        { name: 'MySQL', percent: Math.ceil(Math.random() * 100) },
      ],
    }
  ]} />

```
ketika dijalan kan atau di render hasil nya seperti dibawah ini: 

### Contoh dalam markdown
<Skill stack={[
    {
      category: 'Backend',
      color: 'slate',
      languages: [
        { name: 'PHP', percent: Math.ceil(Math.random() * 100) },
       { name: 'GoLang', percent: Math.ceil(Math.random() * 100) },
        { name: 'MySQL', percent: Math.ceil(Math.random() * 100) },
      ],
    }
  ]} />
  
  untuk lebih detail mengenai mdx silahkan buka situs nya
   [MDX js](https://mdxjs.com/docs/what-is-mdx/)
  
  ## Kesimpulan
  
kita bisa berkreasi membuat sebuah konten atau berita yang interaktif. dengan mengembed atau import suatu komponen JSX ke dalam sebuah markdown. tapi sangat berhati hati ketika embed sebuah komponen. jangan sampai user lain bisa melakukan editing sebuah file.

Terima kasih.


Barangkali disini sering banget kalo buat repository di git ada sebuah file yang bernama `README.md`
ya betul itu adalah markdown bahasa yang banyak digunakan oleh para developer

Markdown Mdx

pengenalan markdown dan mdx

kali ini lagi coba membuat web menggunakan nextjs dan directus sebagai headless cms. tapi ada beberapa kendala seperti emoji tidak support.

berikut ini tips nya cukup mudah.

berikut ini struktur file directus

<Files
  title="Struktur file directus"
  data={[{
	"name": "my-project",
	"children": [{
			"name": ".env",
			"isHighlighted": true
		},
		{
			"name": "extensions",
			"children": []
		},
		{
			"name": "node_modules",
			"children": []
		},
		{
			"name": "package.json"
		},
		{
			"name": "package-lock.json"
		},
		{
			"name": "uploads",
			"children": []
		}
	]
}]}
/>

cukup edit dibagian file .env kemudian tambahkan 

```diff:.env {7}
# All DB_* environment variables are passed to the connection configuration of a Knex instance. 
# Based on your project's needs, you can extend the DB_* environment variables with any config 
# you need to pass to the database instance.

DB_USER=""
DB_PASSWORD=""
+ DB_CHARSET="utf8mb4"
```
kemudian save dan jalankan perintah
```
npx directus start
```


tada akhirnya bisa juga 

![](https://api.ridwan.id/assets/40cf7d33-1e5d-408f-96a2-712dfa07bb94)

kali ini lagi coba membuat web menggunakan nextjs dan directus sebagai headless cms. tapi ada beberapa kendala seperti emoji tidak support.

Directus Headlesscms

Menampilkan emoji pada Directus Headlesscms

mungkin untuk jaman sekarang irc sudah sangat jarang sekali ada yang tau, tetapi pada tahun 2005an sangat populer. kekurangan IRC itu sendiri menurut saya mesti membutuhkan software client seperti mIRC, x-chat. kali ini saya membahas tentang The lounge yang merupakan sebuah client irc berbasis web, namun agak sedikit sulit untuk proses instalasi nya karena membutuhkan sebuah server yang telah terinstall nodejs (http://nodejs.org).

Ada beberapa kelebihan yang menurut saya sangat unik, yaitu bisa online 24 jam apabila sudah terkoneksi ke server irc, tampilan yang cantik dan modern. berikut ini screenshotnya.

![](https://api.ridwan.id/assets/efb7aa2b-c350-4e2f-a122-e26a293cb9cd)

![](https://api.ridwan.id/assets/8db36d2e-a0d9-411e-b383-cdcc3b8c5a9a)


bagi yang ingin menginstall nya bisa di kunjungi halaman github `The Lounge` 
[github](https://github.com/thelounge/lounge)




mungkin untuk jaman sekarang irc sudah sangat jarang sekali ada yang tau, tetapi pada tahun 2005an sangat populer

Thelounge 1024x469

Self host irc client

Ada beberapa protokol vpn di antara nya pptp, openvpn, sstp, l2tp dan wireguard. kali ini kita akan bahas untuk protokol l2tp dengan kombinasi ipsec. dengan ada nya kombinasi ipsec ini maka protokol l2tp nya akan di enkripsi.

pertama install dulu package nya.
```bash
yum install libreswan xl2tpd
```

kemudian buatlah sebuah configurasi untuk penamaan bebas, disini saya akan mencoba membuat config dengan nama :

```ini:/etc/ipsec.d/l2tp_psk.conf
conn L2TP-PSK-NAT
     rightsubnet=vhost:%priv
     also=L2TP-PSK-noNAT
	 
conn L2TP-PSK-noNAT
     authby=secret
     pfs=no
     auto=add
     keyingtries=3
     dpddelay=30
     dpdtimeout=120
     dpdaction=clear
     rekey=yes
     ikelifetime=8h
     keylife=1h
     type=transport 
     left=%defaultroute
     leftprotoport=17/1701
     right=%any
     rightprotoport=17/%any
     ikev2=never
	 ike=aes128-sha1-modp1024,aes256-sha1-modp2048
     esp=aes128-sha1,aes256-sha1-modp4096
```
setelah itu tambahkan pre share key
```ini:/etc/ipsec.d/my.secrets
192.168.10.100 %any: PSK "kodesecretanda"
```

silahkan ganti ip `192.168.10.100` dengan ip server anda.
```ini:/etc/sysctl.conf
net.ipv4.ip_forward = 1
net.ipv4.conf.all.accept_redirects = 0
net.ipv4.conf.all.send_redirects = 0
net.ipv4.conf.all.rp_filter= 0
net.ipv4.conf.default.accept_redirects = 0
net.ipv4.conf.default.send_redirects = 0
net.ipv4.conf.default.rp_filter= 0
```
setelah itu jalankan perintah untuk melakukan reload sysctl
```bash
sysctl -p
```

sampai disini jalankan service ipsec nya
```bash
 service ipsec start
 ```
 
kemudian untuk mengecek apakah ipsec ini sudah berhasil atau tidak nya
```bash
ipsec verify
```

seharusnya keluar tampilan output seperti dibawah ini

```ini
Verifying installed system and configuration files

Version check and ipsec on-path                         [OK]
Libreswan 3.29 (netkey) on 4.18.0-193.14.2.el8_2.x86_64
Checking for IPsec support in kernel                    [OK]
 NETKEY: Testing XFRM related proc values
         ICMP default/send_redirects                    [OK]
         ICMP default/accept_redirects                  [OK]
         XFRM larval drop                               [OK]
Pluto ipsec.conf syntax                                 [OK]
Checking rp_filter                                      [OK]
Checking that pluto is running                          [OK]
 Pluto listening for IKE on udp 500                     [OK]
 Pluto listening for IKE/NAT-T on udp 4500              [OK]
 Pluto ipsec.secret syntax                              [OK]
Checking 'ip' command                                   [OK]
Checking 'iptables' command                             [OK]
Checking 'prelink' command does not interfere with FIPS [OK]
Checking for obsolete ipsec.conf options                [OK]
```

```ini:/etc/xl2tpd/xl2tpd.conf
[global]

ipsec saref = yes

[lns default]
ip range = 10.11.11.2-10.11.11.100
local ip = 10.11.11.1
require chap = yes
refuse pap = yes
require authentication = yes
name = LinuxVPNserver
ppp debug = yes
pppoptfile = /etc/ppp/options.xl2tpd
length bit = yes
```

```ini:/etc/ppp/options.xl2tpd
ipcp-accept-local
ipcp-accept-remote
ms-dns  8.8.8.8
ms-dns  4.2.2.4
noccp
auth
crtscts
idle 1800
mtu 1450
mru 1450
nodefaultroute
debug
lock
proxyarp
connect-delay 5000
```
kemudian edit credential username dan password

```ini:/etc/ppp/chap-secrets
# Secrets for authentication using CHAP
# client	server	secret			IP addresses
uservpn * passwordvpn *
```

setelah itu coba jalankan service xl2tpd nya :

```bash
service xl2tpd start
```
jangan lupa untuk allow protocol dan port di firewall nya, disini kita menggunakan firewalld di centos 8 / rocky linux

```bash
firewall-cmd --permanent --zone=public --add-service=ipsec
firewall-cmd --permanent --zone=public --add-port={4500,500}/udp
firewall-cmd --permanent --zone=public --add-protocol={50,51}
firewall-cmd --permanent --zone=public --add-port=1701/udp
firewall-cmd --permanent --zone=public --add-masquerade
firewall-cmd --reload
```

setelah itu mari kita coba testing menggunakan windows

![](https://api.ridwan.id/assets/f19ac720-4476-4360-b599-fbaea6d5984d)


Ada beberapa protokol vpn di antara nya pptp, openvpn, sstp, l2tp dan wireguard. kali ini kita akan bahas untuk protokol l2tp dengan kombinasi ipsec. dengan ada nya kombinasi ipsec ini maka protokol l2tp nya akan di enkripsi.

Rumi Ridwan

Web Developer

Latest Post

cara membuat next js running setiap kali server reboot

pengenalan markdown dan mdx

Menampilkan emoji pada Directus Headlesscms

Self host irc client

Cara setting vpn l2tp/ipsec di centos 8