How Install VueJS Ubuntu 20.04

June 7, 2022

How Install VueJS. Dalam membangun Website tentunya kita harus mementingkan dan memikirkan tampilan yang interaktif dan mudah dipahami oleh user. Salah yang menangani itu di Codingan Website adalah Javascritp dan CSS. Java mempunyai beberapa Framework yang dapat digunakan salah satunya adalah Vue.js. “How Install Vue.js”, Vue.js biasanya digunakan untuk membangun User Interface (UI). Dengan kata lain, Vue.js bertuga untuk menampilkan informasi kepada user sesuai dengan intruksi dari Controller. Dan Informasi yang ditunjukan pun harus mudah dipahami.

Apa Saja Kelebihan VueJS ( How Install Vue.js )

Mempunyai Ukuran Ringan
Untuk dokumentasi lengkap
Mudah untuk diIntegrasikan
Plugin yang banyak
Dapat interaksi dua arah.

Langkah 1 : Install VueJS (How Install VueJS)

Untuk Installasi Vue.JS dalam sebuah Server ada beberapa motode yang dapat digunakan seperti CDN dan NPM

Menggunakan CDN Paket

How install VueJS. Jika installasi menggunakan CDN paket, prosesnya sangat gampang, kita hanya perlu untuk menambhak url ke bagian project VueJS

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Motode ini disarankan digunakan hanya untuk membangun Project untuk percobaan aja, karna motode ini akan menjadi masalah jika digunakan untuk pengembangan Aplikasi.

Menggunakan NPM

Jika untuk membangun sebuah Project dengan Skala besar, kita harus melakukan Installasi Vue JS dengan menggunakan NPM (How Install Vue JS). VueJS dikembangkan dengan NPM. Hal pertama yang harus di pastikan di install adalah Node.JS.

1. Install Node JS ( How Install VueJS)

Sebelum memulai installasi, kita harus memastikan bahwa semua paket pada Ubuntu 20.04 sudah diperbarui. Gunakan perintah berikut ini untuk melakukan pembaruan paket pada Ubuntu 20.04 (How Install Vue JS)

apt update -y
apt upgrade -y

Secara default paket repository Node JS tidak tersedia di Ubuntu 20.04. Kita harus menambahkan ya pada sistem Ubuntu 20.04

curl -sL https://deb.nodesource.com/setup_16.x | bash -

Setelah berhasil menambahkan Repository Node Js. Kita sudah dapat melakukan installasi NodeJS ( How Install NodeJS). Gunakan perintah berikut ini.

sudo apt-get install nodejs

Jika proses Installasi sudah selesai. lihat versi dari Node JS. untuk melihat versi dapat gunakan perintah berikut ini.

node -v

Output

v16.15.1

2. Install NPM

Sekarang Node JS telah selesai di Install dengan Versi Terakhir, Beritnya yang harus diinstall adalah NPM. Untuk NPM kita akan melakukan Install pada Versio Latest atau terakhir.

Gunakan perintah berikut untuk melakukan Install dan Update NPM

npm install npm@latest -g

Verifikasi versi NPM jika proses sudah selasai.

npm -v

Output

8.12.1

3. Install Vue JS CLI ( How Install VueJS)

Sekarang untuk kebutuhan Vue JS sudah terpenuhi dan kita sudah dapat untuk melakukan Installasi Vue JS (How Install Vue JS). Gunakan perintah berikut ini untuk Install VueJS

npm install -g @vue/cli

Verifikasi Version

vue --version

Output

@vue/cli 5.0.4

4. Membuat Project in How Install VueJS

Sekarang kita telah dapat membuat sebuah project denga menggunakan VueJS. Gunakan perintah berikut untuk melakukan installasi VueJS.

vue create dixmata-project

Anda dapat mengganti “dixmata-project” sususai dengan nama project Anda

Setelah melakukan perintah diatas akan keluar Outpu seperti dibawah ini

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Ada dua pilihan yang dibisa kita lihat pada Output Default ( [Vue 3] ) dan Default ( [Vue 2] ). Pilih sesuai kebutuhan dan Enter.

Jika berhasil dalam membuat Project maka Output seperti berikut

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project dixmata-project2.
👉  Get started with the following commands:

 $ cd dixmata-project2
 $ npm run serve

5. Run Project

Sekarang kita telah berhasil dalam membuat Project, makan selanjutnya adalah menjalankan project yang telah kita buat.

Pindah ke Directory project yang kita buat

cd dixmata-project2

Dan jalan project dengan menggunakan perintah berikut ini

npm run serve

Output

 DONE  Compiled successfully in 4390ms                                                                                                                          6:58:03 AM


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.10:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Untuk port default dari VueJS menggunakan port 8080

6. Membuat Systemd Service Untuk VueJS

Jika ingin menjalankan Systemd untuk VueJS, kita perlu membuat filenya. Ikutin perintah berikut untuk membuat file Systemd VueJS

nano /lib/systemd/system/vuejs.service

tambahkan Command berikut

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/home/dixmata/dixmata-project2
ExecStart=npm run serve -- --port=8080

[Install]
WantedBy=default.target

Note: Jangan lupa untuk mengganti “WorkingDirectory” dengan folder Project Anda. Simpan dan tutup, uji coba dengan menggunakan perintah berikut

systemctl daemon-reload

Jika berhasil makan Start VueJS dan Enable start VueJS di System, jika system melakukan Reboot maka VueJS akan berjalan secara otomatis.

systemctl start vuejs
systemctl enable vuejs

Perikasa VueJS, berjalan atau tidak, dengan menggunakan perintah berikut ini.

systemctl status vuejs

Akan tampil Output berikut ini

● vuejs.service
     Loaded: loaded (/lib/systemd/system/vuejs.service; enabled; vendor preset: enabled)
     Active: active (running) since Tue 2022-06-07 07:12:00 UTC; 2s ago
   Main PID: 23962 (npm run serve -)
      Tasks: 19 (limit: 4611)
     Memory: 133.3M
     CGroup: /system.slice/vuejs.service
             ├─23962 npm run serve --port=8080
             ├─23990 sh -c vue-cli-service serve "--port=8080"
             └─23991 node /home/dixmata/dixmata-project2/node_modules/.bin/vue-cli-service serve --port=8080

Jun 07 07:12:00 dixmata systemd[1]: Started vuejs.service.
Jun 07 07:12:00 dixmata npm[23962]: > [email protected] serve
Jun 07 07:12:00 dixmata npm[23962]: > vue-cli-service serve "--port=8080"
Jun 07 07:12:01 dixmata npm[23991]:  INFO  Starting development server...

Sekarang semua sudah selesai dari Tahap persiapan dan Installasi, VueJS juga telah masuk kedalam Systemd Linux Ubuntu 20.04 Server. Jadi proses How Install VueJS Ubuntu 20.04 telah berhasil kita lakukan.

Tahap terakhir adalah membuka atau mengakses VueJS menggunakan Browser. Buka Browser Anda, lalu akses IP-Address server diikuti dengan port 8080, seperti berikut

http://your-ip-address:8080

Selamat Anda telah berhasil melakukan Installasi VueJS di Ubuntu 20.04 Server (How install VueJS). Sekarang Anda telah dapat menlanjutkan Project VueJs dengan mudah dan Tentram. Semoga Dokumentasi ini bermanfaat dan mudah dimengerti.