Github Actions — Membuat Workflows Sederhana Untuk Build Projek Webpack

8 min readJun 26, 2020

Persiapan

Beberapa persiapan yang perlu dilakukan, teman — teman setidaknya harus paham :

apa itu git, github.
perintah dasar git (stage, commit, push)
apa itu ci/cd dan automation

Workflows

Kasarnya workflows adalah alur kerja dari github action yang akan kita buat, nantinya kita akan mendefinisikan langkah — langkah perintah sesuai yang kita inginkan. Perintah dalam workflows ini nantinya akan di eksekusi pada saat suatu repo di trigger. Misalnya workflows ini akan di trigger ketika commit di push, atau ketika ada pull request, dll.

Membuat Contoh Projek Sederhana dengan Webpack

untuk membuat contoh, kita akan membuat projek sederhana menggunakan webpack, dimana kita mencoba membuat halaman html dengan javascript yang nantinya akan terhubung dengan webpack.

Jadi, disini kita berharap ketika kita push projek kita ke github, github akan otomatis menjalankan perintah “npm run production” untuk membundling javascript kita secara otomatis.

Buat folder projek baru misalnya dengan nama github-actions-testing :

# buat folder baru :
mkdir github-actions-testing# masuk ke folder :
cd github-actions-testing

Selanjutnya, kita definisikan lokasi ini sebagai node projek :

npm init

menjalankan perintah diatas, anda akan ditanyai beberapa pertanyaan tentang node package kita, seperti berikut :

Isi sepeluarnya, jika tidak merasa perlu diisi, tekan enter saja untuk mengabaikannya.Setelah selesai, sekarang buka text editor teman -teman dan buat beberapa file seperti berikut :

jadi, kita akan membuat script main.js tersebut nantinya, dimana kita manfaatkan Github Actions untuk otomatis menjalankan perintah bundling dengan webpack dan hasilnya otomatis di push ke repo kita juga.

Edit file index.html dengan sederhana saja :

lalu, edit .gitignore , file ini nantinya kita gunakan untuk mengabaikan folder node_modules agar tidak ikut tercommit ke git kita. tambahkan berikut lalu save :

node_modules

Sederhana saja, Selanjutnya edit src/main.js :

alert("Script ini hasil bundling webpack");

Sekarang kita install dulu webpack nya yah, berikut :

menggunakan npm :

npm install webpack webpack-cli --save-dev

atau jika menggunakan yarn :

yarn add webpack webpack-cli

Selanjutnya, kita akan mengubah sedikit file package.json , disini saya menambahkan script berikut berikut :

"scripts": {
    "dev": "node_modules/webpack/bin/webpack.js --mode development --watch",
    "production": "node_modules/webpack/bin/webpack.js --mode production"
},

Hasil akhirnya dari file diatas adalah :

Oh iya, kita lupa… buat file baru bernama webpack.config.js , lalu isi dengan script berikut :

const path = require('path')module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, '.')
    }
}

Oke, jadi configurasi webpack diatas sangat simpel kok, cuman untuk membundle file src/main.js lalu hasil build / outputnya akan kita letakan di root projek kita dengan nama file app.js

Uji Coba Build Projek di Local

sekarang kita coba build projek webpack ini di local duluyah, untuk memastikan apa kah projek benar — benar berhasil

npm run dev

atau

npm run production

Lalu, jika di folder projek kalian keluar file baru bernama app.js , artinya building kalian berhasil !

Sekarang hapus file app.js , karena kita ingin agar file app.js ini di build secara otomatis di github actions nantinya. Jadi hapus file ini terlebih dahulu.

Membuat Workflows

buat folder baru di projek kita tadi, .github/workflows lalu didalam folder workflows tersebut buat file bernama main.yml

Lalu, isi file main.yml tersebut dengan :

oh iya, jangan lupa kalian buat repo baru di github, misalnya github-actions-testiongseperti saya :

Sekarang mari kita jelaskan sebentar tentang fungsi file di main.yml tadi.

Disini kita definisikan name: CI ini hanya nama yang nantinya bisa kita temukan di tabs actions di github.

on: [push] artinya, script didalam workflow ini akan dijalankan ketika github mendeteksi push dari repo tersebut.

jobs ini berisi sebuah work yang nantinya akan dikerjakan, kalian bisa mendifinisikan job ini lebih dari satu misalnya :

jobs:
    testing:
        ...    build:
        ...    deploy:
        ...

selanjutnya, per job yang kita buat, akan berisih langkah langkah perintah yang kita sebut dengan steps :

jobs:
    testing:
        name: testing
        runs-on: ubuntu-latest
        steps:
            - name: perintah 1
              run: echo "hello world"            - name: perintah 2
              with:
                  config1 example
                  config2 example            - name: perintah 3
              ...

artinya, dalam sebuah job bernama testing , kita ingin menjalankan perintah ini di lingkungan os ubuntu-latest , lalu steps dalam job testing ini terdapat 3 step.

Nah perstep ini punya format parameter yang berbeda beda teman teman, parameter name ini untuk memberikan judul nama untuk step yang berjalan, membantu memberikan keterangan lah misalnya memasang package sesuatu atau sebagainya.

ada juga parameter yang tidak kalah penting yaitu uses: <repo> , parameter ini berfungsi menjalankan suatu package yang tersedia. Github Actions punya marketplace yang menampilkan package — package apa saja yang bisa kita gunakan di sini. Seperti dicontoh kita menggunakan package berikut :

actions/checkout
package ini untuk mengambil file file yang ada di repo kita.
actions/setup-node
ini berfungsi untuk memasang nodejs (npm & yarn) di workflow kita, tujuanya agar kita bisa mengakses perintah “npm install”
ad-m/github-push-action
ini package yang membuat kita dengan mudah melakukan push commit, tujuanya nanti hasil file bundling kita bisa langsung di commit ke repo git kita.

untuk mencari package lain, anda bisa akses Github Actions Marketplace di :
https://github.com/marketplace

Oh yah, jangan lupa sesuakan configurasi yang ada di main.yml yang sudah saya buat tadi, yaitu :

#1 Ganti user.name dan user.email dari akun github kalian

#2 Ganti nama repository kalian, ganti tulisan berikut : repository: viandwi24/github-actions-testing dengan nama repo projek kalian yang sudah kalian buat tadi diawal.

nah disitu kalian menyadari adalah parameter with yang digunakan untuk memberikan konfigurasi yang tersedia di package.

with:
    github_token: ${{ secrets.TOKEN }}

karena projek repo kita bersifat public, wajib bagi kita menggunakan bantuan fitur “secrets”, ini fungsinya hampir sama dengan “Env”, jadi kita cukup tuliskan perintah diatas, nantinya file itu akan diganti dengan konfigurasi secrets kita.

Karena kita belum punya konfigurasi secret kita untuk github token, kita buat dulu yah. Caranya kalian kunjungi halaman setting repo kalian. Disebelah kanan sendiri ada tabs “settings”

Lalu masuk ke menu “Secrets”

sebelum kita menekan tombol “New Secret”, kita kan belum punya token. kita buat dulu tokenya, caranya akses ke :
https://github.com/settings/tokens

lalu klik tombol “generate new token”

Centang kolom berikut :
Jika sudah lalu klik generate, beri nama juga misalnya “ACCESS_REPO”

Lalu kalian akan mendapat token, hati hati jangan sebarkan token ini ke orang lain, dan token ini hanya bisa kalian liat satu kali, ketika halam di refresh kalian tidak bisa melihatlagi token yang sudah kalian generate. jika kalian lupa, caranya cukup hapus saja token yang kalian lupa lalu buat token baru.

Copy token yang tertera, lalu paste kan di halaman New Secrets tadi :
Lalu klik “add secret”

Dan berhasil tersimpan :

Saatnya uji coba!

pertama — tama, kita push projek kita ke github:

init projek kita dengan git :

git init

stage semua file :

git add .

buat commit :

git commit -m "first commit"

Tambahkan repo github ke git remote kita : (ganti dengan repo kalian yang sudah kalian buat tadi !)

git remote add origin git@github.com:viandwi24/github-actions-testing.git

atau :

git remote add origin https://github.com/viandwi24/github-actions-testing

Berikut secara keseluruhan console saya :

Saatnya kita push !

git push origin master

Jika push berhasil, lanjut sekarang kita cek di halaman github kita, lalu akses ke menu tab “actions”

Lalu disitu kalian akan liat ada sebuah event berjalan bernama “first commit”, coba kalian klik event tersebut.

Lalu kalian akan melihat proses github actions otomatis menjalankan perintah yang sudah kita definisikan di main.yml tadi. kebetulan prosesnya belum selesai, jadi saya masih bisa melihat animasi prosesnya.

Jika proses kalian sudah selesai, lalu kalian melihat mungkin akan langsung menampilkan outputnya success atau tidak.

dan ternyata build nya sukses bro !!!

dan benar saja, ketika kita refresh repo saya, muncul file baru bernama “app.js” hasil building tadi.

Karena workflows ini sangat sederhana jadi mohon maaf jika ada kekuranganya.

oh iya kekurangan workflows yang saya buat contoh ini karena ketika setelah bulding dengan webpack, output filenya akan di push ke github. alhasil push ini memunculkan trigger baru terhadap actions github kita. akhirnya akan muncul event baru :

Lalu kenapa gagal? karena di event ke dua kita ini dihasilkan trigger nya dari push app.js kita tadi, hehee.. jadinya muncul event baru. lalu kenapa event kedua gagal? karena event kedua tidak mendeteksi perubahan app.js baru, jadinya scriptnya dihentikan sampai commit saja ini menyebabkan status nya bukan sukses.

Tapi tidak masalah, yang penting kalian paham langkahnya dan kenapa ini terjadi. Ini hanya contoh saja yah, kalian bisa membuat automasisasi yang lebih baik lagi sesuai dengan kebutuhan kalian. Jadi jangan lupa cobain package actions/app lainya dari Github Marketplace, disana banyak sekali package yang mendukung pekerjaan kita dalam melakukan automation ini.

Akhir Kata, Semoga Berhasil!

Hasil projek sederhana yang saya buat bisa kalian akses di :
https://github.com/viandwi24/github-actions-testing

Terimakasih, Semoga artikel ini bermanfaat untuk teman — teman, jangan lupa berikan claps dan komentar jika mengalami kesusahan.