Kill NodeJS Process

Untuk menghentikan proses aplikasi nodejs yang berjalan di background, yang biasanya dijalankan pada session lain, gunakan command berikut pada bash:

# list proses yang running pada port 3000
sudo netstat -lpn |grep :'3000'

# kill proses berdasarkan id proses yang tampil
kill -9 1192
Iklan

Node JS pada Apache Server

Pertama harus diinstall dulu bahan-bahannya yaitu NODEJS dan NPM pada Ubuntu Server 14.04 (Versi jadul sih, biasa males upgrade :D)

# install NodeJS (untuk contoh ini akan menggunakan versi 8)
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

# install NPM, pakai aptitude karena pakai apt-get gagal, belum tau sebabnya šŸ˜€
sudo aptitude install npm

setelah berhasil, aktivasi modul http proxy apache

sudo a2enmod proxy_http

kemudian seting konfigurasi virtual hostnya:

<VirtualHost *:80>
	ServerName namasub.namadomain.com
	ServerAlias www.namasub.namadomain.com

	ProxyRequests Off
	ProxyPreserveHost On

	ProxyPass / http://localhost:3000/
	ProxyPassReverse / http://localhost:3000/

	ErrorLog ${APACHE_LOG_DIR}/error.log
	LogLevel warn
	CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Resstart apache

sudo service apache2 restart

Untuk mengetes konfigurasi buat file javascript bernama hello.js

const http = require('http');

const hostname = 'localhost';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Run aplikasi

nodejs hello.js

Test pada browser:Ā 

testbrowser

Vuetify Dialog Component

berikut ini adalah komponen dialog untuk vuetify supaya lebih mudah membuat konfirmasi dialog

<template>
  <v-dialog v-model="dialog" :max-width="options.width" @keydown.esc="cancel">
    <v-card>
      <v-toolbar dark :color="options.color" dense flat>
        <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
      </v-toolbar>
      <v-card-text v-show="!!message">{{ message }}</v-card-text>
      <v-card-actions class="pt-0">
        <v-spacer></v-spacer>
        <v-btn color="primary darken-1" flat="flat" @click.native="agree">Ya</v-btn>
        <v-btn color="grey" flat="flat" @click.native="cancel">Batal</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
  /**
   * Vuetify Confirm Dialog component
   *
   * Insert component where you want to use it:
   * <confirm ref="confirm"></confirm>
   *
   * Call it:
   * this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
   * Or use await:
   * if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
   *   // yes
   * }
   * else {
   *   // cancel
   * }
   *
   * Alternatively you can place it in main App component and access it globally via this.$root.$confirm
   * <template>
   *   <v-app>
   *     ...
   *     <confirm ref="confirm"></confirm>
   *   </v-app>
   * </template>
   *
   * mounted() {
   *   this.$root.$confirm = this.$refs.confirm.open
   * }
   */
  export default {
    data: () => ({
      dialog: false,
      resolve: null,
      reject: null,
      message: null,
      title: null,
      options: {
        color: 'primary',
        width: 380
      }
    }),
    methods: {
      open(title, message, options) {
        this.dialog = true
        this.title = title
        this.message = message
        this.options = Object.assign(this.options, options)
        return new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
        })
      },
      agree() {
        this.resolve(true)
        this.dialog = false
      },
      cancel() {
        this.resolve(false)
        this.dialog = false
      }
    }
  }
</script>

ExtJS 3.2.0 Row Editor

Pada library RowEditor untuk ExtJS 3.2.0 ada sedikit masalah ketika kita me-resize containernya, layout akan berantakan, untuk mengatasinya tambahkan baris berikut pada awal file library RowEditor.js


Ext.override(Ext.form.Field, {
  setSize : function(w, h){
    var ret = Ext.form.Field.superclass.setSize.call(this, w, h);
    if (!this.flex) {
      if (undefined !== w) { this.width = w; }
      if (undefined !== h) { this.height = h; }
    }
    return ret;
  }
});

Nuxt + MuseUI

Berikut ini adalah cara integrasi Nuxt dengan MuseUI:

Persiapan template:

vue init museui/nuxt-template my-project
cd my-project
npm install

Test run:

npm run dev

NUXT – IView

Berikut step by step membuat aplikasi berbasis nuxt

Sebelum memulai harus sudah terinstall vue-cliĀ terlebih dahulu.

  1. gunakan nuxt starter template dengan vue-cli
    vue init nuxt-community/starter-template [nama-project]
    
  2. isi Project name, Project description dan Author, tekan enter untuk nilai defaultnya
  3. masuk ke direktory project
    cd [nama-project]
  4. ketik command, maka akan mendowload semua package yang dibutuhkan
    npm install
  5. test aplikasi, setelah selesai download package
    npm run dev
  6. browse aplikasi pada alamat: http://localhost:3000, berikut ini contoh tampilannya:
    browser

Berikutnya kita akan mencoba mengintegrasikan aplikasi nuxt dengan UI, kita coba menggunakan iviewĀ berikut step by step-nya:

  1. Install iview sebagai node module dengan command sbb:
    npm install iview --save

    command tersebut akan meng-install iview kedalam direktory project kita

  2. Berikutnya edit file nuxt.config.js dan tambahkan baris berikut:
    plugins: [
      {src: '~plugins/iview', ssr: true}
    ],
    
  3. Kemudian buat file iview.js dalam folder pluginsĀ dan masukan script berikut:
    import Vue from 'vue';
    import iView from 'iview';
    
    Vue.use(iView);
    import 'iview/dist/styles/iview.css';
    

 

Laravel First Try

Download composer

$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer
$ sudo chmod +x /usr/local/bin/composer

Install laravel

$ cd /var/www/
$ composer create-project --prefer-dist laravel/laravel project-name
$ php artisan key:generate 

Edit file config/app.php

'key' => env('APP_KEY', 'uOHTNu3Au1Kt7Uloyr2Py9blU0J5XQ75'),

'cipher' => 'AES-256-CBC',

Create Apache VirtualHost

$ nano /etc/apache2/sites-available/project-name.com.conf
<VirtualHost *:80>

        ServerName laravel.example.com
        DocumentRoot /var/www/project-name/public

        <Directory />
                Options FollowSymLinks
                AllowOverride None
        </Directory>
        <Directory /var/www/laravel>
                AllowOverride All
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        LogLevel warn
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
$ a2ensite project-name.com
$ sudo service apache2 reload

Access Laravel

$ sudo echo "127.0.0.1  project-name.com" >> /etc/hosts

And access http://project-name.com in your favorite web browser

Sumber: http://tecadmin.net/install-laravel-framework-on-ubuntu/