$ sudo apt-get install nginx

$ sudo vi /etc/nginx/sites-available/api.example.com.conf

server {
 keepalive_timeout 30;
 # SSL configuration
 listen 443 ssl default_server;
 listen [::]:443 ssl default_server;
 server_name api.example.com;
 ssl_certificate /etc/nginx/ssl/certificate.crt;
 ssl_certificate_key /etc/nginx/ssl/certificate.key;
 ssl_session_cache    shared:SSL:10m;
 ssl_session_timeout  10m;
 # application-a
 location /application-a {
  include /etc/nginx/global/include.request.conf;
  rewrite ^/application-a(/.*) $1 break;
  proxy_pass http://127.0.0.1:8881;
 }
 # application-b
 location /application-b {
  include /etc/nginx/global/include.request.conf;
  rewrite ^/application-b(/.*) $1 break;
  proxy_pass http://127.0.0.1:8882;
 }
 # application-c
 location /application-c {
  include /etc/nginx/global/include.request.conf;
  rewrite ^/application-c(/.*) $1 break;
  proxy_pass http://127.0.0.1:8883;
 }
 location / {
  try_files $uri $uri/ =404;
 }
 access_log /etc/nginx/logs/access.log;
 error_log  /etc/nginx/logs/error.log;
}

server {
 listen 80 default_server;
 listen [::]:80 default_server;
 server_name    api.example.com;
 rewrite        ^ https://$server_name$request_uri? permanent;
}

$ sudo mkdir /etc/nginx/global

$ sudo vi /etc/nginx/global/include.request.conf

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;

$ sudo mkdir /etc/nginx/ssl

$ sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/nginx/ssl/certificate.key -out /etc/nginx/ssl/certificate.crt

$ sudo ln -s /etc/nginx/sites-available/api.example.com.conf /etc/nginx/sites-enabled/

$ sudo systemctl reload nginx

let angka=12;//type data Number
let ubah = String(angka);// "12"
console.log(typeof ubah); // type data menjadi String

let cek = true; //type data boolean
let ubah2= String(cek);//"true"
console.log(ubah2);

let num=12;//type Number
let ubah =  num.toString();
console.log(typeof ubah);// "String"

let text ="123";//String
let ubah = Number(text);
console.log(typeof ubah);//Number

let cek =true;//boolean
let ubah1 =Number(cek);// 1
console.log(typeof ubah1);//Number

Baca juga cara menghitung jumlah array pada javascript

let num="12.12";//string
let bulat = parseInt(num); //hasil 12
console.log(typeof bulat);// Number

let pecahan=parseFloat(num);//hasil 12.12
console.log(typeof pecahan);//Number

console.log(Boolean(1));//true
console.log(Boolean(0));//false
console.log(Boolean("story"));//true
console.log(Boolean(""));//false

"" + 2 + 3
"" - 4 + 5
true + true
12 / "3"
"5" * "5"
7 + 8 + "px"
"$" + 1 + 12
"5" - 4
"12px" - 8
12 / 0
"  -12\n" + 5
"  -14\n" - 3
null + 3
undefined + 3

memahami layout pada bootstrap

layout merupakan hal yang sangat penting dalama pembuatan website, maka dari itu kita harus paham dulu agar bisa membuat layout yang responsif.coba temen-temen bayangkan kalau website/blog yang temen-teman kunjungi itu tidak responsif pasti langsung di closs atau cari alternatif lain yang lebih nyaman digunakan.dengan layout yang responsif akan membuat user betah berkunjung di website. layout yang respinsif adalah website yang kita buat bisa beradaptasi dengan device yang user gunakan.layout yang kita pelajari saat ini menggunakan framework, yaitu framework bootstrap.

layout yang paling dasar diboostrap adalah class container, container adalah pembungkus semua element.

class container terbagi menjadi dua:
1. container
2. container-fluid

Baca juga membuat segitiga dengan javascript

class container akan membuat layout berada di tegah-tegah atau hanya 80% saja dari browser.

cara mnggunakanya

<div class="container">
//content
</div>

class container-fluid akan membuat layout berada 100% ukuran browser atau full layar

cara menggunakannya

<div class="container-fluid">
//content
</div>

dalam satu halaman web bisa saja digunakan dua-duanya sesuai kebutuhan.

selanjutnya class row, class row sama seperti row/baris pada tabel pada umumnya.

class col sama seprti colum tabel pada umunya, row dan col selalu berdampingan penggunanya.

<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>

perlu di perhatikan layout pada framework boostrap itu terbagi menjadi 12 collum

terdapat juga beberapa pilihan class grid

Small untuk ukuran layar ≥576px dengan nama classnya sm, class sm bisa diisi 1-12

<div class="row">
<div class="col-sm-12">
//content
</div>
</div>

Medium untuk ukuran layar ≥768px dengan nama class md, class md sama juga bisa diisi 1-12

<div class="row">
<div class="col-md-12">
//content
</div>
</div>

Large untuk ukuran layar ≥992px dengan nama class lg, class lg sama juga bisa diisi 1-12

<div class="row">
<div class="col-lg-12">
//content
</div>
</div>

Extra large untuk layar ≥1200px dengan nama class xl, class xl juga bisa diisi -12

<div class="row">
<div class="col-xl-12">
//content
</div>
</div>

class grid bisa di kombinasikan penggunaanya tergantung dari website target pengguna website temen-teman

<div class="row">
<div class="col-xl-12 col-md-8">content</div>
</div>

terdapat satu class keren yaitu class offset, class ini digunakan jika kamu ingin membuang beberapa collum sebelunya.

<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 offset-md-4">col-md-4 .offset-md-4</div>
</div>

silahkan lihat documentasinya klik disini

artikel ini hanya membahas pengenalnya saja

Kepanjangan dari PWA adalah Progressive Web Apps. lantar apa itu pengertian dari Progressive Web Apps ??

Apa itu Progressive Web Apps(PWA)  ?

Alibaba

trivago

Instagram

Twitter

1. Chrome 52 atau di atasnya
2. Web Server for Chrome, atau server web pilihan Anda
3. Text Editor
4. Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools