chieftan frontend

Chieftan Frontend

Aplikasi Web Aurelia yang mengkonsumsi API Chieftan untuk otomatisasi tugas

Memulai

Untuk mengatur lingkungan pengembangan, Anda akan memerlukan node.js yang diinstal pada mesin lokal Anda. Anda dapat mengunduhnya dari sini.

Setelah itu selesai, klon Repositori Chieftan dan jalankan npm install untuk menginstal berbagai dependensi yang diperlukan oleh Chieftan.

Perkembangan

Lingkungan pengembangan dibangun di sekitar webpack dengan modul panas yang diaktifkan, memungkinkan (dekat) pembaruan realtime dari kedua stylesheet dan kode (jika belum dijalankan) tanpa memuat ulang halaman. Anda dapat memulai server pengembangan dengan menjalankan npm run server:dev dari folder proyek dan kemudian mengakses http://localhost:3002 di browser Anda.

Penyebaran

Penyebaran melibatkan membangun paket produksi aplikasi dan kemudian menempatkan konten folder dist di server Anda. Untuk membangun paket produksi, cukup jalankan npm build dan tunggu webpack selesai.

Jika Anda ingin mengaktifkan pelaporan kesalahan Sentry untuk kesalahan frontend, Anda harus mengatur variabel lingkungan SENTRY_DSN ke DSN Sentry Publik. Anda juga dapat menandai versi rilis dengan mengatur variabel lingkungan VERSION .

Contoh Build Script

SENTRY_DSN= " https://[email protected]/1 " VERSION= " $( git rev-parse HEAD ) " npm run build

Skrip build ini akan menandai rilis menggunakan Git SHA saat ini dan mengkonfigurasi pelaporan kesalahan Sentry.

URL yang bagus

Perlu dicatat bahwa, jika Anda ingin memanfaatkan HTML5 Push State API untuk URL yang bagus, Anda perlu mengkonfigurasi server web Anda untuk melayani file index.html untuk semua 404s.

Dengan nginx ini dapat dengan mudah dilakukan dengan menggunakan arahan try_files .

Contoh konfigurasi nginx

 server {
  listen :80 default;
  hostname chieftan.emss.co.za;

  root /var/www/chieftan/dist;

  # Serve the frontend
  location / {
    try_files $url $url.html index.html;
  }

  # Pass API requests to the application instance (basic)
  location /api {
    proxy_pass http://127.0.0.1:8000;
  }
}

Gambar Docker

Anda juga dapat menggunakan frontend Chieftan menggunakan Docker, untuk membangun gambar cukup jalankan npm build && docker build . Untuk membangun gambar kontainer dengan paket aplikasi terkompilasi terbaru.

Wadah ini didasarkan pada nginx:alpine , membuatnya sangat ringan, dan akan mendengarkan di port 3000 secara default. Anda dapat mengikuti instruksi pada halaman gambar Nginx Docker untuk mengonfigurasinya secara berbeda, atau menempatkannya di belakang proxy terbalik dalam penyebaran produksi.