spa with pure js

? ‍? Spa mit reinem JavaScript

Dieses Projekt ist eine einseitige Anwendung (SPA), die mit reinem HTML, CSS und JavaScript erstellt wurde. Es demonstriert das clientseitige Routing und Rendering, ohne sich auf Front-End-Frameworks oder Bibliotheken zu verlassen.

Es ist nicht bestimmt? Produktionsnutzung ! Es ist einfach und hackbar genug, um für? ‍? Lernzwecke .

Euen Hinweis : Diese WebApp hängt von Catfact.ninja API ab. Siehe: cat-fact.js

? ‍Eitung; dr

Sehen Sie sich die auf AWS S3 gehostete Website an: http://spa-with-pure-javascript.s3-wbsite-us-east-1.amazonaws.com

Merkmale

• Dynamische Seite Laden: Seiten (Home und Cat Fakt) werden dynamisch in einen einzelnen Inhaltsbereich geladen, ohne die gesamte Seite neu zu laden.

• Rück-/Vorwärtsnavigation: Die ordnungsgemäße Handlungen des Browsers Rücken- und Vorwärtstasten, um eine nahtlose Navigation zwischen den Seiten zu gewährleisten.

• NGINX -Setup: Dockerisiert mit einer Nginx -Konfiguration zum Servieren des Spa.

• Benutzernavigationszahl: Verfolgt die Offline -Navigation innerhalb des Spa- und Seiten -Nachladens.

  1. Zeigt die Anzahl der Offline -Navigationen an (dh Seitenwechsel innerhalb des Spa ohne eine vollständige Seite nachladen). Der Wert wird von JavaScript in der App.js -Datei aktualisiert, wobei jedes Mal die Navigation innerhalb des Spa auftritt.

  2. Zeigt die Häufigkeit an, mit der die Seite seit Beginn der Sitzung neu geladen wurde. Dieser Wert wird unter Verwendung von SessionStorage verwaltet, wobei jedes Mal, wenn die Seite neu geladen wird, erhöht wird. Der aktualisierte Wert spiegelt sich auf der Seite wider, wie sowohl in app.js als auch in contact.html -Dateien gezeigt.

? Projektstruktur

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 

Erste Schritte

Voraussetzungen

• ? Docker und Docker komponieren auf Ihrem Computer installiert, um in einem Container ausgeführt zu werden.
• ? Knoten mit NPM laufen.

Installation

Installieren Sie Docker oder Node.js:

Docker installieren

Knoten installieren

Klonen Sie das Repository:

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

Wechseln Sie zum Repository -Ordner:

 cd spa-with-pure-js

? Vor Ort mit Docker laufen

Starten Sie die App mit Docker Compose.

Erstellen Sie das Nginx -Containerbild:

 docker-compose build

Startete den Behälter:

 docker-compose up

? Lokal mit http-server laufen

HTTP-Server ist ein einfacher statischer HTTP-Server der Befehlszeile.

Installieren Sie HTTP-Server mit NPM:

 npm install --global http-server

Ausführen auf Port 8080:

 http-server ./src --port 8080

? Öffnen Sie Ihren Browser und navigieren Sie zu http: // localhost: 8080, um die Anwendung anzuzeigen.

Tipp: Verwenden Sie Chrome Devtools (Drücken Sie F12), um zu verstehen, wie die Dateien geladen werden.

Lizenz

Dieses Projekt ist unter der MIT -Lizenz lizenziert - Einzelheiten finden Sie in der Lizenzdatei.