spa with pure js

? ‍? Spa dengan JavaScript murni

Proyek ini adalah aplikasi satu halaman (SPA) yang dibangun menggunakan HTML murni, CSS, dan JavaScript. Ini menunjukkan perutean dan rendering sisi klien tanpa mengandalkan kerangka kerja atau perpustakaan front-end.

Itu tidak dimaksudkan untuk? Penggunaan produksi ! Sederhana dan cukup mudah untuk digunakan? ‍? Tujuan pembelajaran .

️ Catatan : WebApp ini tergantung pada Catfact.ninja API. Lihat: Cat-fact.js

? ‍♂️Tl; dr

Lihat situs web yang dihosting di AWS S3: http://spa-with-pure-javascript.s3-website-us-east-1.amazonaws.com

Fitur

• Pemuatan Halaman Dinamis: Halaman (Fakta Rumah dan Kucing) secara dinamis dimuat ke dalam area konten tunggal tanpa memuat ulang seluruh halaman.

• Navigasi Back/Forward: Menangani tombol punggung dan ke depan browser dengan benar, memastikan navigasi yang mulus antar halaman.

• Pengaturan Nginx: Dockerized dengan konfigurasi Nginx untuk menyajikan spa.

• Hitungan Navigasi Pengguna: Melacak navigasi offline di dalam spa dan halaman ulang halaman.

  1. Menampilkan jumlah navigasi offline (yaitu, perubahan halaman di dalam spa tanpa memuat ulang halaman penuh). Nilai diperbarui oleh JavaScript dalam file App.js, bertambah setiap kali navigasi terjadi di dalam SPA.

  2. Menampilkan berapa kali halaman telah dimuat kembali sejak sesi dimulai. Nilai ini dikelola menggunakan sessionStorage, bertambah setiap kali halaman dimuat ulang. Nilai yang diperbarui tercermin dalam halaman, seperti yang ditunjukkan pada file app.js dan contact.html .

? Struktur proyek

src/
│   ├── index.html           # Main entry point of the app  
│   ├── 404.html             # Redirect to index.html, necessary when running with http-server (npm package)
│   ├── contact.html         # A normal HTML page
│   ├── app/                 # JavaScript logic
│   │    └── app.js          # Main SPA logic, including navigation and route handling
│   │    └── routes.js       # Class responsible for routing and loading page content
│   └── pages/               # HTML pages for different routes
│      ├── home/
│      │   └── home.js       # Home page content
│      ├── about/
│      │   └── about.js      # About page content
│      └── not-found/
│          └── not-found.js  # Fallback page content (404)
├── docker-compose.yml       # Docker Compose configuration
├── Dockerfile               # Dockerfile for containerizing the app
├── nginx.conf               # Nginx configuration 

Memulai

Prasyarat

• ? Docker dan Docker menyusun yang dipasang pada mesin Anda untuk berjalan dalam wadah.
• ? Node untuk dijalankan dengan NPM.

Instalasi

Instal Docker atau Node.js:

Instal Docker

Instal Node

Klon Repositori:

 git clone https://github.com/elidaniel92/spa-with-pure-js.git

Beralih ke folder repositori:

 cd spa-with-pure-js

? Berlari secara lokal dengan Docker

Mulai aplikasi menggunakan Docker Compose.

Bangun gambar wadah nginx:

 docker-compose build

Memulai wadah:

 docker-compose up

? Berlari secara lokal dengan http-server

HTTP-Server adalah server HTTP statis baris perintah sederhana.

Instal HTTP-Server dengan NPM:

 npm install --global http-server

Jalankan di port 8080:

 http-server ./src --port 8080

? Buka browser Anda dan navigasikan ke http: // localhost: 8080 untuk melihat aplikasi.

Tip: Gunakan Chrome DevTools (tekan F12) untuk memahami bagaimana file dimuat.

Lisensi

Proyek ini dilisensikan di bawah lisensi MIT - lihat file lisensi untuk detailnya.