Komunitas Cloud Indonesia

Penggunaan Node.JS dengan Metro.CSS di AppHarbor

Penulis :   |   October 9, 2012

JavaScript (JS) sudah dikenal lama oleh programmer sebagai salah satu bahasa yang digunakan di dalam pembuatan aplikasi website. Dikenal juga sebagai client side language karena aplikasi JS berjalan di atas browser. Namun, kini JS dapat digunakan untuk web server, salah satu caranya adalah menggunakan node.js, untuk mengetahui lebih lanjut mengenai node.js, silakan membaca link ini. Selain JS, dalam membuat aplikasi website kita mengenal CSS sebagai bahasa yang dapat kita gunakan untuk mempercantik halaman sebuah web. Metro.css merupakan salah satu framework CSS yang dapat kita gunakan untuk membuat tampilan ala Metro UI (yang sekarang diubah menjadi Modern UI).

Selanjutnya kita akan mendeploy aplikasi node.js dengan tampilan ciamik menggunakan metro.css. Buat kamu yang lupa atau belum tahu caranya mendeploy, kamu dapat membaca artikel mengenai mendeploy aplikasi ke AppHarbor, baik pada artikel aplikasi hello world maupun aplikasi ASP.NET MVC. Yuk, kita mulai tutorialnya.

Persiapan

  • Kita buat terlebih dahulu aplikasi di AppHarbor, saya sudah membuat aplikasi AppHarbor dengan nama node-metro-css. Kalau kamu belum tahu caranya membuat aplikasi di AppHarbor, silakan baca tautan ini.
  • Pastikan kamu sudah menginstall msysgit dan node.js.
  • Source code repository menggunakan bawaan AppHarbor. Tahap berikutnya adalah melakukan cloning source code.

Cloning Source Code dari GitHub

  1. Buka aplikasi Git-Bash
  2. Jalankan perintah berikut:
    $ cd /c/Tmp
    $ git clone https://github.com/Code52/metro.css.git

Setting Node.js Website

Masih di dalam aplikasi Git-Bash. Jalankan perintah berikut:

$ cd metro.css/node
$ npm install

$ node metro -i "c:\Temp\metrosite"
$ cd /c/Temp/metrosite

## Sebelum menginstall edit file package.json dan ganti value dari property "express" menjadi:
## "express": "2.5.11"
$ npm install

Untuk menjalankan aplikasi jalankan perintah berikut (masih di direktori yang sama [metrosite])

$ node app.js

Lalu akan keluar port aplikasi webnya, misalkan port  53167. Buka browser arahkan ke URL http://localhost:53617.

Push Source Code dan Deploy ke AppHarbor

Untuk mendeploy ke AppHarbor kita perlu membuat git repository dari website yang kita buat sebelumnya (dalam contoh ini yaitu metrosite). Lakukan perintah berikut pada folder website yang kita buat (Folder yang saya gunakan yaitu C:\Temp\metrosite):

$ git init 
$ git add . 
$ git commit –m "Initial commit"

## [UPDATED]Ganti USER_NAME & REPOSITORY_NAME pada URL AppHarbor repository di bawah ini:
$ git remote add origin https://[USER_NAME]@appharbor.com/[REPOSITORY_NAME}.git
## Contoh URL AppHarbor repo yang saya pakai = https:[email protected]/node-metro-css.git 
$ git push origin master

Ups, ternyata proses build mengalami kegagalan. Ternyata kita harus meng-enable “File System Write Access” dan men-disable “Precompilation”. Caranya adalah pada menu di panel kiri, klik “Settings” lalu klik “Enable File System Write Access” dan klik “Disable Precompilation”. Lalu kita commit file kosong dengan ekstensi txt untuk men-trigger build process.

Voila, akhirnya sudah berhasil di-deploy, silakan lihat aplikasinya di http://node-metro-css.apphb.com. Selamat mencoba :).

  1. ACCI – Asosiasi Cloud Computing Indonesia
  2. Lowongan .NET Developer
  3. Lowongan Android Developer
  4. Lowongan Java Developer
  5. Jakarta Cloud Computing Meetup 09.2016

Penulis :

Pengembara teknologi yang mencari ilmu mengenai teknologi dan menyebarkan ilmu yang sudah dipelajarinya bagi orang lain melalui blog ini. Tulisan lainnya bisa diakses di tonilab.wordpress.com

Komentar

7 thoughts on “Penggunaan Node.JS dengan Metro.CSS di AppHarbor
  1. Putra

    keren bro artikelnya. kebetulan gw lagi belajar front end nih. trims banget ya. moga dapet pahala deh 😀

    Reply
  2. Toni Dermawan Post author

    Makasih agan Putra sudah membaca artikel ini dan atas doanya juga. Sebarin artikel gw ke orang-orang terdekat agan :).

    Salam Awan,
    Toni

    Reply
  3. Putra

    Ohya gan, ketika setting node.js: website
    di –> “$ npm install gabisa” nih..
    ada pesan command not found. Kenapa yah?

    Reply
    1. Putra

      Dan setelah di cek file package.json nya ternyata ga ada value express-nya gan.

      {
      “name”: “metro-css”,
      “description”: “A website template with \”Metro\” styling.”,
      “version”: “0.0.1”,
      “author”: “Code 52”,
      “contributors”: [
      { “name” : “Chris Sainty”, “email”: “[email protected]” }
      ],
      “dependencies”: {
      “mkdirp”: “>= 0.3.0”,
      “ncp”: “>= 0.2.4”
      },
      “repository”: “git://github.com/Code52/metro.css.git”,
      “main”: “metro”,
      “engines”: { “node”: “>= 0.4.1 < 0.7.0" }
      }

      Reply
      1. Toni Dermawan Post author

        1) “$ npm install” line yg mana gan?Line 2 apa 9 (di bagian Setting Node.js Website). Pastikan path direktorinya udah bener.

        2) Kalau itu mah package.json dari si metro.css, bukan package.json dari website metro yang telah dibuat pada line 4 (di bagian Setting Node.js Website). Coba dijalanin line by line, pastikan juga path direktorinya bener.

        Terima kasih.

        Reply
  4. imerzone

    Sory gan, mau tanya.

    untuk perintah terakhir git push origin master, masih ngga bisa, walaupun sudah diubah setting “File System Write Access” dan “Precompilation” nya.
    Masih ada tulisan seperti di bawah ini..

    error: The requested URL returned error: 403 while accessing https:[email protected]/node-metro-css.git/info/refs

    fatal: HTTP request failed”

    kemudian, “Lalu kita commit file kosong dengan ekstensi txt untuk men-trigger build process.”, maksudnya seperti apa. bisa dijelaskan?

    Apakah mungkin error nya disebabkan saya belum commit file txt kosong??

    Thx

    Reply
  5. Toni Dermawan Post author

    Sorry gan baru bales :),

    Itu errornya dari proses push source code ke git server. Kalau error ketika build baru berhubungan dengan setting “File System Write Access” (enable) dan “Precompilation” (disable).

    https:[email protected]/node-metro-css.git/info/refs <- Kalau dilihat dari URL repository di samping, artinya agan tidak mempunyai hak untuk menulis ke repo ~/node-metro-css.git. Agan bisa buat repository sendiri dengan nama "node-metro-css2". Mungkin link ini bisa membantu https://help.github.com/articles/https-cloning-errors.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *