Doc Nexajs Docs

Konfigurasi Dasar

File app.js adalah entry point utama aplikasi NexaJS. Berikut adalah contoh konfigurasi dasar:


  const { createNavigation } = require('./assets/js/navigation');
  // Konfigurasi port server
  const PORT = process.env.PORT || 4000;
  const server = createNavigation();
  // Start server
  server.listen(PORT, () => {
  console.log(`Server berjalan di port ${PORT}`);
  });

Catatan: Port default adalah 4000, tapi bisa diubah melalui environment variable PORT.

Struktur Proyek

Berikut adalah struktur folder standar untuk proyek NexaJS:


  nexajs/
  ├── app.js                 # Entry point
  ├── assets/
  │   ├── css/              # Style sheets
  │   ├── js/               # JavaScript files
  │   │   └── navigation.js # Core navigation
  │   └── img/              # Images
  ├── public/               # HTML pages
  │   ├── index.html
  │   ├── about.html
  │   └── 404.html
  └── package.json

Penjelasan Struktur:

app.js - File utama untuk konfigurasi server
assets/ - Folder untuk file statis (CSS, JS, gambar)
public/ - Folder untuk file HTML yang akan di-route
navigation.js - Core module untuk routing dan navigasi

Routing Otomatis

NexaJS menggunakan sistem routing otomatis berdasarkan struktur file di folder public/.

Contoh Routing:


  public/
  ├── index.html    → /
  ├── about.html    → /about
  ├── contact.html  → /contact
  └── 404.html      → Halaman error

Tip: File index.html akan otomatis menjadi route '/' atau homepage.

Penggunaan:

/ → public/index.html
/about → public/about.html
/contact → public/contact.html
/404 → public/404.html (halaman error)

Opsi Konfigurasi Lanjutan

NexaJS menyediakan berbagai opsi konfigurasi untuk menyesuaikan behavior server:


  const server = createNavigation({
  port: 4000,              // Port server (default: 4000)
  publicDir: 'public',     // Direktori file publik
  assetsDir: 'assets',     // Direktori asset
  errorPage: '404.html',   // Halaman error kustom
  logger: true,            // Enable/disable logging
  cors: {                  // CORS options
  origin: '*',
  methods: ['GET', 'POST']
  }
  });

Penjelasan Opsi:

port - Port untuk server (default: 4000)
publicDir - Lokasi file HTML (default: 'public')
assetsDir - Lokasi asset statis (default: 'assets')
errorPage - File untuk halaman 404 (default: '404.html')
logger - Mengaktifkan/menonaktifkan logging
cors - Konfigurasi CORS untuk API

Konfigurasi Assets

NexaJS menyediakan sistem pengelolaan assets yang terpusat melalui file assets/js/assets.js. Sistem ini memungkinkan Anda mengelola semua resource CSS dan JavaScript dari satu lokasi.

Struktur Konfigurasi Assets


  const App = {
  "properti": {
  "version": "v4.0.5",
  "sitename": "NexaUI",
  "favicon": "img/nexaui1.png",
  "charset": "UTF-8",
  "viewport": "width=device-width, initial-scale=1.0"
  },
  "assets": {
  "header": [
  "css/style.css"
  ],
  "footer": [
  "module|js/App.js"
  ]
  }
  }

Penjelasan Properti:

properti: Konfigurasi umum website
- version: Versi aplikasi
- sitename: Nama website
- favicon: Path ke favicon
- charset: Encoding karakter
- viewport: Konfigurasi viewport
assets.header: Array file CSS yang akan dimuat di head
- Mendukung file lokal dan CDN
- File lokal akan otomatis diprefiks dengan /assets/
assets.footer: Array file JavaScript yang akan dimuat di akhir body
- Prefix module| untuk ES6 modules
- File regular tanpa prefix untuk script biasa

Penggunaan Assets

NexaJS secara otomatis menangani pemuatan assets berdasarkan konfigurasi di assets.js.

File HTML

File HTML Anda cukup menyertakan tag head kosong:


  <!DOCTYPE html>
  <html lang="id">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <!-- konten halaman -->
  </body>
  </html>

Catatan: NexaJS akan secara otomatis:

Menambahkan semua CSS yang didefinisikan di assets.header
Menambahkan semua JavaScript yang didefinisikan di assets.footer
Mengatur metadata seperti charset dan viewport
Menambahkan favicon

Menambah Asset Baru

Untuk menambahkan asset baru, cukup edit file assets.js:


  // Menambah CSS baru
  "header": [
  "css/style.css",
  "css/custom.css",         // CSS lokal
  "https://cdn.../style.css" // CSS dari CDN
  ]
  
  // Menambah JavaScript
  "footer": [
  "module|js/App.js",      // ES6 module
  "js/script.js",          // Script regular
  "https://cdn.../script.js" // Script dari CDN
  ]

Best Practices

Gunakan CDN untuk library populer untuk memanfaatkan caching browser
Prefix module| untuk file JavaScript yang menggunakan ES6 modules
Pastikan path relatif dimulai dari folder assets/
Gunakan minified version untuk file dari CDN di production

JavaScript di Header

NexaJS mendukung pemuatan JavaScript baik di header maupun footer. Untuk framework atau library yang perlu dimuat di awal, gunakan konfigurasi di header:


  // assets/js/assets.js
  const App = {
  "assets": {
  "header": [
  "css/style.css",
  "module|js/ngorei-framework.js",  // JavaScript di header
  "https://cdn.example.com/framework.js"  // CDN di header
  ],
  "footer": [
  "module|js/App.js"  // JavaScript di footer
  ]
  }
  }

Penggunaan JavaScript di Header:

Framework yang perlu dimuat sebelum DOM
Library yang dibutuhkan segera
Polyfills dan utilitas dasar
Konfigurasi global framework

Contoh Penggunaan:


  // Konfigurasi assets.js
  "header": [
  "css/style.css",
  "module|js/ngorei-framework.js",     // Framework utama
  "js/polyfills.js",                   // Polyfills
  "js/config.js",                      // Konfigurasi global
  "https://cdn.../essential.js"        // Library penting
  ],
  "footer": [
  "module|js/App.js",                  // Aplikasi utama
  "js/components.js"                   // Komponen tambahan
  ]

Best Practices untuk JavaScript di Header:

Gunakan untuk framework yang crucial
Minimalkan ukuran file untuk performa loading
Pertimbangkan dampak pada waktu rendering
Gunakan module| untuk ES6 modules
Prioritaskan script yang dibutuhkan segera

Perhatian: Terlalu banyak JavaScript di header dapat memperlambat initial page load. Gunakan dengan bijak dan hanya untuk script yang benar-benar diperlukan di awal.

Konfigurasi Server

NexaJS menyediakan berbagai opsi konfigurasi untuk menyesuaikan behavior server sesuai kebutuhan Anda.

Struktur Konfigurasi Dasar


  const { createNavigation } = require('./assets/js/Nexa');
  
  const server = createNavigation({
  port: 3000,                // Port server
  publicDir: 'public',       // Direktori HTML
  assetsDir: 'assets',       // Direktori asset
  errorPage: 'error.html',   // Halaman error
  logger: true,              // Sistem logging
  cors: {                    // Konfigurasi CORS
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST', 'PUT', 'DELETE']
  }
  });

Penjelasan Opsi Konfigurasi:

1. Port Configuration


  port: 3000  // Mengatur port server

Menentukan port dimana server akan berjalan
Bisa dioverride dengan environment variable PORT
Default: 4000

Tip: Gunakan port berbeda untuk development (3000) dan production (80/443).

2. Directory Configuration


  publicDir: 'public',   // Direktori untuk file HTML
  assetsDir: 'assets',   // Direktori untuk asset statis

publicDir:
- Lokasi file HTML yang akan di-serve
- Menentukan struktur routing otomatis
- Default: 'public'
assetsDir:
- Lokasi asset statis (CSS, JS, images)
- Diakses melalui URL /assets/...
- Default: 'assets'

3. Error Handling


  errorPage: 'error.html'  // Halaman error kustom

Menentukan file HTML untuk error page
Harus berada dalam publicDir
Default: '404.html'

4. Logging System


  logger: true  // Mengaktifkan sistem logging

Mencatat aktivitas server:
- HTTP requests
- Error messages
- Connection events
Berguna untuk debugging dan monitoring
Default: true

5. CORS Configuration


  cors: {
  origin: 'http://localhost:3000',  // Domain yang diizinkan
  methods: ['GET', 'POST', 'PUT', 'DELETE']  // Method yang diizinkan
  }

Mengatur Cross-Origin Resource Sharing:
- origin: Domain yang diizinkan mengakses API
- methods: HTTP methods yang diizinkan
Penting untuk keamanan API
Default: { origin: '*', methods: ['GET', 'POST'] }

Environment Setup

Berikut contoh konfigurasi untuk berbagai environment:

Development Environment


  // development.js
  const server = createNavigation({
  port: 3000,
  logger: true,
  cors: {
  origin: '*',  // Mengizinkan semua origin untuk development
  methods: ['GET', 'POST', 'PUT', 'DELETE']
  }
  });

Production Environment


  // production.js
  const server = createNavigation({
  port: 80,
  logger: false,  // Nonaktifkan logging detail
  cors: {
  origin: 'https://myapp.com',  // Hanya izinkan domain produksi
  methods: ['GET']  // Batasi method yang diizinkan
  },
  errorPage: 'production-error.html'
  });

Testing Environment


  // testing.js
  const server = createNavigation({
  port: 4000,
  publicDir: 'test/public',
  logger: true,
  cors: false  // Nonaktifkan CORS untuk testing
  });

Best Practices:

Gunakan environment variables untuk konfigurasi sensitif
Batasi CORS di production
Aktifkan logging lengkap di development
Gunakan port berbeda untuk setiap environment

Environment Variables

NexaJS mendukung environment variables untuk konfigurasi dinamis:


  // .env
  PORT=3000
  NODE_ENV=development
  CORS_ORIGIN=http://localhost:3000
  
  // app.js
  const server = createNavigation({
  port: process.env.PORT || 3000,
  logger: process.env.NODE_ENV === 'development',
  cors: {
  origin: process.env.CORS_ORIGIN
  }
  });

NexaView

NexaView dalam framework NexaJS adalah fitur yang memungkinkan Anda membuat tampilan multi-halaman dalam satu file HTML. Fitur ini menangani transformasi dan pengelolaan view secara otomatis.

Penggunaan Dasar


  <!-- View aktif -->
  <nexaview id="page1" true>
  <div>
  <h4>Halaman 1</h4>
  </div>
  </nexaview>
  
  <!-- View Antrian -->
  <nexaview id="page2">
  <div>
  <h4>Halaman 2</h4>
  </div>
  </nexaview>

Contoh dengan Path


  <nexaview id="about" path="about.html" true>
  <!-- Konten dari about.html akan dimuat di sini -->
  </nexaview>

Memulai dengan NexaJS