Skip to main content

· One min read
Wisnu Harjanta

Case ini terjadi ketika ada env NEXT_PUBLIC dinext.js yang diakses pada komponent. Ketika proses build selesai dan app dijalankan, env bernilai undefined. Sehingga app tidak berjalan dengan normal.

Error ini disebabkan karena Next.js akan berjalan pada runtime dan buildtime. padahal env hanya berjalan ketika proses runtime saja. alhasil env tidak terdefinisi. untuk mengatasi problem ini bisa menambahkan env pada Dockerfile atau docker compose dan cara lain yaitu dengan publicRuntimeConfig

· 2 min read

CI(Continuous Integration)/CD(Continuous Deployment)

CI dan CD merupakan 2 tahapan yang dimana CI untuk melakukan integrasi/sync kode dengan repository ataupun melakukan pengujian kode, apakah kode tersebut layak untuk dilakukan deployment ke production

sedangkan CD merupakan tahapan kelanjutan dari proses CI, yaitu proses deployment ke production. Dalam tahapan ini kode yang sudah dilakukan build/compile akan dilakukan proses menjalankan project, sehingga project dapat diakses oleh pengguna

Tool untuk C/CD ini diantara lain: azure, jenskins, gitlab CI/CD.

Untuk tutorial ini, akan menggunakan gitlab CI/CD sebagai toolnya

Siapakan project yang ingin dilakukan deployment, jika belum punya bisa buat terlebih dahulu dengan perintah

npx create-next-app cicd-next

setelah itu masuk ke directory foldernya

cd cicd-next

dan buat file gitlab-ci.yml, atau bisa menggunakan perintah

touch gitlab-ci.yml

kemudian pastekan kode berikut

stages:
  - build
  - deploy
before_script:
  - npm install
  - npm install pm2 -g
build:
  stage: build
  image: node:16
  script:
    - echo "Start build"
    - npm run build
  cache:
    paths:
      - node_modules
  artifacts:
    paths:
      - .next
      - build
    expire_in: 1 day
  only:
    - main
deploy:
  stage: deploy
  image: node:16
  script:
    - echo "Start deploy"
    - pm2 start npm -- start
  only:
    - main

Untuk lakukan commit dan push ke remote

git add . && git commit -m "ci/cd: create gitlab-ci.yml" && git push

Konfigurasi Gitlab Runner di VPS​

Agar konfigurasi gitlab-ci.yml yang ada direpo dapat dijalankan dan dimonitoring oleh gitlab, maka perlu install gitlab runner terlebih dahulu.

install gitlaba runner dengan command berikut

sudo apt-get install gitlab-runner

atau 

sudo dnf install gitlab-runner

atau jika ingin install secara manual, bisa ikut instruksi di link berikut Gitlab Runner

Untuk check apakah gitlab runner sudah sukses terinstall, jalankan perintah

gitlab-runner -v

Register Gitlab Runner pada VPS​

Langkah selanjutanya setelah install gitlab runner yaitu melakukan register gitlab runner. Fungsi register ini yaitu untuk melakukan sync/koneksi antara gitlab runner dan host gitlab

· One min read
Wisnu Harjanta

https://chrome.google.com/webstore/detail/react-performance-devtool/fcombecpigkkfcbfaeikoeegkmkjfbfm

React context devtool https://chrome.google.com/webstore/detail/react-context-devtool/oddhnidmicpefilikhgeagedibnefkcf

cypress recorder https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab

Graphql inspector https://chrome.google.com/webstore/detail/graphql-network-inspector/ndlbedplllcgconngcnfmkadhokfaaln

Redux devtool https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Smart page rule https://chrome.google.com/webstore/detail/smart-page-ruler/nmibbjghlmdiafjolcphdggihcbcedmg

· One min read
Wisnu Harjanta

As software engineering we often need tools or resources for help when development a project. And this is some tools and resource can you use

Quickref.me​

It is a resource for provide cheatsheet about bash, regexp, github, etc https://quickref.me/

Readme.so​

Readme.md generator for your repository. when if you create a repository you need the readme file to explain about you repository.

https://readme.so/

Rest API Generator​

https://retool.com/api-generator