Sebelumnya kita mulai Ada beberapa yang harus kita siapakan yaitu diantaranya:
- Install apache2 on ubuntu
- Install nodejs & angular-cli
- Template project (generate new project from angular-cli)
- Build template project (compile/compress project from angular-cli)
- Setup apache2 using documentRoot
Create project from angular-cli
Ok, tahap pertama kita buat dulu project menggunakan angular-cli command seperti berikut:
# example
ng new belajar-angular
Setelah project terbuat, sekarang kita coba running development mode dengan perintah:
ng serve
Coba browser menggunakan browser ke alamat localhost:4200, untuk develop angular. menurutku lebih menyenangkan di Google Chrome / Chromium karena punya fitur yang lumayan seperti browser console, inspector, debuger. Maka hasilnya seperti berikut:
Build project using production profile
Untuk mem-build project angular dengan template yang di create dari angular-cli. menggunakan perintah seperti berikut:
ng build --prod
Nah setelah itu file hasil buildnya akan di buat dalam folder dist/{project-name}
contohnya seperti berikut:
dist
└── belajar-angular
├── 3rdpartylicenses.txt
├── favicon.ico
├── index.html
├── main.a5fc10236b5169f2cfbc.js
├── polyfills.c6871e56cb80756a5498.js
├── runtime.ec2944dd8b20ec099bf3.js
└── styles.3bb2a9d4949b7dc120a9.css
1 directory, 7 files
Nah dari hasil build itu, kita akan mendapatkan file html
, css
dan js
serta files resources lainya seperti gambar, ico dan lain-lain. Sekarang kita tinggal copy-paste aja ke web server contohnya ke apache2 tpi kita harus tau dulu RootDocument nya di taruh dimana supaya web servernya membaca file index.html
Configure RootDocument on Apache2
Sekarang kita edit file /etc/apache2/sites-enabled/000-default.conf
seperti berikut:
<VirtualHost *:81>
ServerAdmin webmaster@localhost
# kita copy-paste files angular yang telah di build tadi ke sini
DocumentRoot /var/www/html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Berikut perintahnya:
## grant access to user read, write, dan execute
sudo chmod -R 777 /var/www/html
## remove content from /var/www/html/*
rm -rf /var/www/html/*
## copy content angular into /var/www/html
cp -r path-project/belajar-angular/dist/belajar-angular/* /var/www/html
Setelah itu, coba reload configurasinya dengan perintah berikut:
## reload without restart
apachectl graceful
## or if not working try to restart
systemctl restart apache2.service
Sekarang coba check dengan browser ke alamat localhost:81 berikut hasilnya: