This manual is about setting up an automatic deploy workflow using nodejs, PM2, nginx and GitLab CI. It is tested on:
- Target server: Ubuntu 16.04 x64. This is suitable for Ubuntu 14.x.
- Windows 10 on my PC to work.
| <script> | |
| function handleMouseenter() { | |
| console.log('Cursor memasuki halaman') | |
| } | |
| function handleMouseleave() { | |
| console.log('Cursor meninggalkan halaman') | |
| } | |
| </script> |
| <script> | |
| import { | |
| onMount, | |
| tick, | |
| beforeUpdate, | |
| afterUpdate, | |
| onDestroy | |
| } from 'svelte' | |
| let photos = [] |
| <script> | |
| // Definisi static variabel | |
| const picture = 'https://placekitten.com/400/400' | |
| const string = `this string contains some <strong>HTML!!!</strong>` | |
| // Definisi dynamic variabel | |
| let count = 0; | |
| let name = 'Dunia' | |
| // Definisi fungsi |
| <script> | |
| const Message = 'This is a simple page with Svelte' | |
| function ShowAlert() { | |
| alert('This is a simple alert') | |
| } | |
| </script> | |
| <section class="section-wrapper"> | |
| <h1>Hi There,</h1> |
| <script> | |
| const Message = 'Hi there, welcome!' | |
| </script> | |
| <section class="section-wrapper"> | |
| <p>{Message}</p> | |
| </section> | |
| <style> | |
| .section-wrapper { |
| /* Add-on prototype function on String */ | |
| String.prototype.capitalize = function() { | |
| var string = this.toString(); | |
| if (string.length === 0) return; | |
| var split = string.split(' '); | |
| return split.map(function(item) { |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.min.css" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"> |
| body { | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #39DCF5; | |
| } | |
| .hello_world-hello_world-4 { | |
| width: 400px; |
| import React, { Component } from 'react'; | |
| import HelloWorld from './pagedraw/hello_world' | |
| import './App.css' | |
| class App extends Component { | |
| constructor() { | |
| super(); | |
| this.state = { | |
| fullname: '' |