Generate Spring dan VueJS Boilerplate dengan JHipster dan Docker
 |
| Logo JHipster |
JHipster merupakan sebuah development platform untuk meng-inisiasi web project Java dan Javascript menjadi sebuah project yang terintegrasi (boilerplate) baik yang berupa monolitik hingga mikroservis dengan cepat.
(*Diperlukan pengetahuan dasar tentang Docker, Spring dan VueJS).
Disclaimer: Artikel ini saya tulis sebagai catatan pribadi dengan berpindah-pindah dari satu komputer ke komputer lain, maka struktur folder yang tampil dan juga tampilan gambar snapshot banyak yang berbeda-beda.
Perkenalan
Untuk perkenalan bisa lihat slide berikut ini https://www.jhipster.tech/presentation (sekitar 1-2 menit).
Jika kita ingin membuat sebuah website yang kekinian dengan cepat, kita memiliki beberapa pilihan kode generator yang membantu kita menghemat banyak waktu, dan memberikan kita perkakas juga meng-generate kode-kode umum yang diperlukan untuk memulai sebuah project web moderen. Akan tetapi, tidak mudah untuk menemukan kode generator yang mudah digunakan dan sesuai kebutuhan. Nah, untuk alasan inilah, team JHipster menggabungkan beberapa framework terkenal mulai dari frontend hingga backend menjadi dalam satu platform yang diberi nama JHipster. Jhipster merupakan gabungan dari Spring Boot, ReactJS, AngularJS, VueJS, Bootstrap dan berbagai komponen yang saling melengkapi dan semuanya merupakan open source sehingga cocok untuk membuat aplikasi web modern monolitik hingga microservices.
Untuk informasi mengenai perusahaan-perusahaan yang menggunakan JHipster dapat dicek disini.
Untuk informasi mengenai aplikasi-aplikasi yang dibuat menggunakan JHipster dapat dicek disini.
Mari Mencoba
Untuk mulai mengenal JHipster lebih dekat adalah dengan langsung mencobanya sendiri. Berikut adalah tahap-tahap belajar yang saya lakukan.
Step 1: Install dan Set Up JHipster dengan Docker (link)
Untuk melakukan instalasi JHipster dan memulai bekerja di lokal komputer, kita memiliki beberapa opsi yang dapat dilakukan:
- JHipster Online, adalah cara untuk meng-generate aplikasi JHipster tanpa harus melakukan instalasi JHipster di lokal komputer kita.
- Local installation dengan NPM, merupakan cara yang paling umum untuk mulai bekerja dengan JHipster. Semua telah disediakan dan diinstall pada lokal kompute kita, mungkin sedikit lebih rumit untuk memulai, tapi cara ini merupakan cara yang paling umum digunakan oleh orang-orang. Bila ragu pilih cara yang mana maka opsi ini adalah yang paling direkomendasikan.
- Local installation dengan Yarn, sama dengan poin no dua diatas “Local installation dengan NPM”, cuma bedanya kita menggunakan Yarn bukan NPM. Harap diingat bahwa Yarn sedikit kurang popular dibanding NPM, jadi tidak direkomendasikan untuk pemula.
- Dengan “Docker” container, JHipster diinstall dengan menggunakan docker container (saya gunakan opsi ini).
Kali ini saya memilih menggunakan docker container untuk memulai membuat project. Saya memilih pilihan ini karena setau saya hal ini akan menyingkat banyak waktu dan mengurangi instalasi berbagai libraries di host laptop saya.
JHipster memiliki sebuah Dockerfile, yang spesifik dibuat untuk ini, yang mana Dockerfile ini akan menyediakan kita sebuah Docker image. Dockerfile ini membuat sebuah Docker “Automated build” yang imagenya tersedia di https://hub.docker.com/r/jhipster/jhipster/
Image ini akan membantu kita menjalakan JHipster dari dalam Docker container.
By the way kali ini saya akan build image saya sendiri bukan pakai yang ada di docker hub.
git clone https://github.com/jhipster/generator-jhipster.git . |
| Clone code dari github |
Build Dockerfile
Build docker image bernama my_jhipster:0.1 dengan perintah dibawah ini:
docker build -t my_jhipster:0.1 . |
| Build docker image dari source di github. |
Proses ini memakan waktu sekitar 10-20 menit tergantung kecepatan internet anda. bila anda tinggal di negara maju mungkin hanya akan memakan 2-5 menit saja.
Docker Image Hasil Build
 |
| Image JHipster yang baru saja dibuat. |
Untuk mengetahui cara pakai dari image tersebut kita bisa menggunakan dokumentasi yang mereka taruh di Docker Hub https://hub.docker.com/r/jhipster/jhipster/.
Matikan Containers Lain
Supaya tidak ada port yang terblokir pastikan kontainer lain telah dalam kondisi yang mati.
atau pastikan saja port yang akan kita gunakan yaitu 8080,9000, 3001 available.
 |
| Jangan lupa matikan container yang tidak terpakai supaya ports available. |
Run Container
Jalankan docker image yang kita build diatas dengan perintah berikut:
docker run -it -p 8080:8080 -p 9000:9000 -p 3001:3001 my_jhipster:0.1  |
| Container berisi JHipster jalan di Linux. |
Sedikit Penyesuaian Di Windows
winpty docker run -it -p 8080:8080 -p 9000:9000 -p 3001:3001 my_jhipster:0.1 |
| Container berisi JHipster jalan di Windows. |
Selanjutnya gunakan docker start jangan docker run.
docker run vs docker start?
Docker start command will start any stopped container. If you used docker create command to create a container, you can start it with this command. Docker run command is a combination of create and start as it creates a new container and starts it immediately.
Buka terminal baru lalu masuk kedalam container.
docker exec -it 29b30eb98555 bash |
| Lihat id container dan masuk kedalam container. |
Sedikit Penyesuaian Di Windows
winpty docker exec -it 29b30eb98555 bash |
| Lihat ID container dan masuk kedalam container. |
Dari dalam kontainer kita bisa melihat bahwa env sudah tersetup dengan baik. perintah jhipster --v sudah bisa dieksekusi.
Install di Host dengan NPM
Install JHipster
npm install -g generator-jhipster
Hasilnya adalah sebagai berikut.
$ jhipster --version
INFO! Using JHipster version installed globally
6.10.3Step 2: Buat Project
jhipster
 |
| Proses awal membuat JHipster project. |
jhipster --blueprint vuejs
 |
| Jika perlu logs lihat disini. |
Jawab pertanyaan dengan jawaban default berikut (atau sesuai keinginan anda).
 |
| Jawab pertanyaan yang diajukan oleh JHipster. |
Hasil dari proses create project akan seperti dibawah ini.
 |
| Hasil generate project. |
Step 3: Mulai/Run Server dan Masuk ke Back End
Seperti proses diatas masuk ke container my_jhipster docker exec -it 29b30eb98555 bash, lalu ketik ./mvnw (ingat sebelumnya kita udah setup projectnya kan dengan perintah $jhipster).
./mvnwPerintah biasa juga berjalan dengan baik
./mvnw spring-boot:run
Perintah ./mwn ini akan menginstal/download semua dependencies dan merunning mereka baik Spring Boot juga VueJS via NPM (Tidak perlu Maven Goal disini, semua sudah di set paketan oleh JHipster, bahkan perintah NPM pun dibungkus disini).
 |
| Proses build project dan download dependencies (sering fail di jaringan Indihome). |
 |
| Service berjalan di localhost port 8080 |
Bila terjadi error karena kendala koneksi dan package ada yg rusak bisa eksekusi perintah berikut:
./mvnw clean verifyPenting jika ingin fitur “live reload” berjalan pada kode JavaScript/TypeScript, kita perlu untuk menjalankan perintahnpm startoryarn start. Info selengkapnya baca Using JHipster in development.
 |
| Pastikan npm start atau yarn start berjalan. |
Buka url http://localhost:8080/ untuk melihat tampilan awal dari JHipster.
 |
| Halaman awal JHipster |
 |
| Dengan themes gelap |
Step 4: Administrasi JHipster Site
Sampai sini mari kita buat first commit untuk track perubahan dan mengetahui apa saja yang kemudian di tambahkan oleh JHipster.
 |
| Initial Commit |
Step 5: Buat Entities
Setelah melakukan setup terhadap env dan membuat project, maka tahap selanjutnya adalah membuat entities. Misalnya, membuat entity Author dan Book. Untuk tiap entity kita harus memiliki:
- Database dan table
- Liquibase change set (Db migration)
- JPA Entity
- Repository dari Spring Data JPA
- Spring MVC REST Controller, yang memberikan operasi dasar CRUD
- Router Vue/ReactJS/Angular, sebuah component dan juga service
- HTML untuk view
- Integration tests, untuk mem-validate bahwa semua bekerja dengan baik
- Performance tests, untuk memastikan semua bekerja dengan mulus
Jika ada beberapa entities yang dimiliki, maka kemungkinan ada relasi yang perlu dipasang. Untuk itu maka diperlukan:
- Foreign key
- Kode JavaScript dan HTML untuk mengelola relationship
Untuk setiap “entity” yang dibuat oleh sub-generator akan menyertakan files yang diperlukan, dan memberikan fungsi dasar untuk CRUD pada front-end untuk setiap entity.
Berikut adalah opsi dari parameters yang bisa diberikan.
- --table-name <table_name> - Secara default JHipster akan meng-generate sebuah table dengan nama yang berdasarkan dari nama entity, Jika ingin nama yang berbeda name table bisa diberikan sebagai parameter disini.
- --angular-suffix <suffix> - Jika ingin routes dari Angular memiliki custom suffix gunakan opsi ini.
- --client-root-folder <folder-name> - Gunakan root folder untuk name dari entities pada applikasi client side..
- --regenerate - Ini akan meng-regenerate entity sebelumnya tanpa bertanya dahulu.
- --skip-server - Ini akan meng-skip kode server-side dan hanya meng-generate kode client-side.
- --skip-client - Ini akan meng-skip kode client-side code dan hanya meng-generate kode server-side.
- --skip-db-changelog - Ini akan meng-skip database changelog (saat menggunakan Liquibase untuk SQL databases).
- --db - Menentukan database yang digunakan saat mengskip server side generation.
JHipster JDL Studio
Untuk menghemat waktu kita gunakan saja JDL yang sudah jadi dari https://start.jhipster.tech/jdl-studio/ lalu download JDL yg ada dari awal file di kanan atas.
Import JDL
jhipster import-jdl ../jhipster.jdl
Hasil Files Hasil Import JDL
Restart server dan pastikan npm start jalan di terminal lainnya.
Sumber
https://www.ionos.com/digitalguide/websites/web-development/jhipster/
https://www.jhipster.tech/jdl/getting-started
https://www.jhipster.tech/creating-an-entity/
https://www.jhipster.tech/
https://github.com/mraible/jhipster6-demo#install-jhipster-6
https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/
https://yeoman.io/codelab/setup.html
Comments
Post a Comment