node.ucp

node.ucp

Ini adalah panel kontrol JavaScript isomorfik lengkap yang ditulis di atas nodeJs dan bereaksi. Tujuan dari panel kontrol ini adalah untuk berfungsi sebagai contoh atau kode boilerplate untuk orang lain karena sepenuhnya dan sangat fleksibel. Saya menulis kode agar mudah beradaptasi untuk berbagai kasus penggunaan dan jenis dan struktur basis data.

Anda dapat menemukan solusi yang ditulis oleh saya untuk banyak masalah yang berkaitan dengan rendering sisi server, bereaksi, menangani cache penghancuran sumber daya yang mudah berubah dalam pekerja layanan dan sesi penanganan secara manual dalam kode sumber aplikasi ini.

Kode ini menggunakan fungsi panah ES6 dan menjanjikan jauh, jadi terbiasa dengan konsep -konsep ini jika Anda belum melakukannya!

Saya telah mencoba berkomentar sebanyak mungkin untuk menjelaskan pekerjaan aplikasi dalam kode sumber, namun jika hal -hal tidak jelas, jangan ragu untuk bertanya.

Demo

Informasi Login:

Nama pengguna: Jonas

Kata sandi: Tes

Klik di sini untuk demo.

Klik di sini untuk gambar dalam kasus demo tidak berfungsi.

Prasyarat

• NodeJs v6.11.3 atau lebih baru
• MySQL Versi 5.6.5 atau lebih baru jika Anda ingin menggunakan database sampel.
• Jika Anda menggunakan Linux, maka Anda harus menginstal Node-Gyp. Instal menggunakan perintah berikut:

sudo npm install -g node-gyp

• Jika Anda menggunakan Windows, maka Anda perlu menginstal alat Windows Build juga untuk menyusun dan membangun beberapa depedensi. Instal menggunakan perintah berikut:

npm install --global --production windows-build-tools

Menginstal

1. Arahkan ke folder kosong tempat Anda ingin kode sumber ditempatkan.
2. Klon Repositori menggunakan perintah berikut:

git clone https://github.com/zeus2198/node.ucp 

ATAU

Unduh repositori secara manual dari Clone or Download yang terletak di bagian kanan atas repositori dan ekstrak konten dalam folder kosong. 3. Pastikan Anda berada di root proyek dan ketik perintah berikut untuk menginstal paket yang dibutuhkan oleh aplikasi:

npm install

Instalasi paket mungkin memakan waktu. 5. Impor database sampel ( ./sample-database.sql ) ke server MySQL Anda. 4. Buka ./config/config.json File dan edit file konfigurasi sesuai sebagai pengaturan sistem Anda.

Memulai aplikasi

Mode Pengembang:

Untuk memulai aplikasi dalam mode pengembang, gunakan perintah berikut:

npm run start-dev

Dalam mode pengembang, hal -hal berikut terjadi:

• Aplikasi secara otomatis restart setiap kali ada perubahan dalam file apa pun di dalam folder ./src .
• Bagian yang dibagikan oleh klien-server dari aplikasi secara otomatis dibundel pada awal aplikasi.
• Aplikasi ini menggunakan global.css alih -alih global.min.css yang tidak di -cache secara default. Perhatikan bahwa jika Anda memutuskan untuk menggunakan nginx untuk menyajikan file statis (seperti yang dijelaskan nanti) dapat men -cache file .css tergantung pada konfigurasi nginx.
• Penghancuran cache otomatis untuk file bundel berlangsung pada restart aplikasi. Penghancuran cache ini terdeteksi oleh pekerja layanan ( ./public/js/sw.js ) dan file bundel kemudian diganti dalam cache kami!

Mode Produksi:

Sebelum memulai aplikasi dalam mode produksi, Anda perlu menggabungkan bagian yang dibagikan oleh klien dari aplikasi di bawah satu file sehingga dapat disajikan kepada klien, untuk melakukannya menggunakan perintah berikut:

npm run make

Perhatikan bahwa perintah di atas juga akan meminifkan konten file ./public/css/global.css dan menyimpannya sebagai ./public/css/global.min.css .

Setelah bundling selesai gunakan perintah berikut untuk memulai aplikasi:

npm start

Dalam mode produksi, hal -hal berikut terjadi:

• Aplikasi ini menggunakan global.min.css dan bukan global.css yang merupakan sumber daya yang di -cache.
• Cache Bust untuk file bundel masih akan terjadi tetapi hanya untuk file bundel yang dibuat menggunakan perintah npm run make .
• Mode produksi Express (Web-Server kami yang digunakan dalam aplikasi) diaktifkan.

Karya seni

Anda dapat menemukan file photoshop dari karya seni yang digunakan dalam proyek ini dari sini

Catatan

• Direktori ./src/shared/ berisi kode yang umum di bagian klien dan server jadi pastikan Anda tidak mengekspos informasi sensitif apa pun di bagian ini.
• Aplikasi ini menggunakan pekerja layanan yang hanya berfungsi pada domain LocalHost dan HTTPS yang diaktifkan, jadi pastikan Anda menggunakan protokol HTTPS dengan domain Anda.
• Rute yang dilindungi tidak diterjemahkan di sisi server.
• Untuk menghapus cache , buka ./public/js/sw.js dan edit string versi. Kemudian tutup semua tab aplikasi yang dibuka di browser dan buka aplikasi lagi. Gunakan ini untuk menghapus global.min.css dari cache saat Anda mengedit file global.css .
• Mendapatkan sertifikat SSL gratis dan menggunakan Nginx untuk membalikkan proxy domain ke aplikasi Anda.

Menggunakan database yang berbeda

File ./src/db/db.api.abstract.js berisi kelas abstrak untuk API basis data kami, baca komentar untuk spesifikasi metode. Kemudian minta file ini di lapisan API database khusus Anda dan angkanya metode abstrak. Lihat ./src/db/mysql.api.js file untuk contoh implementasi. Perhatikan bahwa setiap metode harus mengembalikan janji.

Setelah Anda selesai menulis API untuk DB Anda, pergilah ke ./config/config.json dan edit opsi databaseAPI untuk mencocokkan nama file yang berisi lapisan API DB Anda. File harus ditempatkan di ./src/db/ direktori.

Menyajikan file statis menggunakan nginx

Saya merekomendasikan menggunakan Nginx untuk menyajikan file statis alih -alih nodeJs. Untuk melakukannya, Anda dapat menambahkan blok lokasi berikut ke konfigurasi blok terputus Anda:

 location /public {
	alias  /path/to/your/app/public;
}

Jika Anda memutuskan untuk pergi dengan Nginx untuk menyajikan file statis, Anda mungkin ingin menggeser kompresi GZIP untuk aplikasi Anda ke Nginx juga. Jika Anda melakukannya, yang harus Anda lakukan, maka nonaktifkan kompresi di sisi aplikasi dengan mengomentari dua baris berikut dari ./node.ucp.js file:

 //./node.ucp.js
// comment out the following lines if you use nginx for gzip compression
import compression from 'compression' ;

app . use ( compression ( ) ) ;

Menggunakan Process Manager untuk memastikan aplikasi berjalan selamanya dalam mode produksi

Dalam mode produksi, Anda mungkin ingin memiliki manajer proses yang dapat memulai kembali aplikasi jika crash, saya sarankan menggunakan PM2 untuk tujuan ini. Instal PM2 menggunakan perintah berikut:

npm install pm2 -g

Sekarang sebelum menggunakan PM2 untuk memulai aplikasi Anda dalam mode produksi, pastikan aplikasi benar -benar dimulai dan menjalankan aplikasi Anda akan macet di Loop Mulai dan Restart.

Saya telah membuat file konfigurasi untuk PM2 untuk memulai aplikasi, untuk memulai aplikasi dalam mode produksi dengan tipe PM2:

pm2 start node.ucp.pm2.json