spa with pure js

? ‍? Spa avec pur javascript

Ce projet est une application de page (SPA) construite à l'aide de Pure HTML, CSS et JavaScript. Il démontre le routage et le rendu côté client sans compter sur aucun cadre ou bibliothèque frontal.

Il n'est pas destiné? Utilisation de la production ! C'est assez simple et piratable pour être utilisé pour? ‍? Des fins d'apprentissage .

️ Remarque : Ce WebApp dépend de l'API Catfact.Ninja. Voir: cat-fact.js

? ‍️TL; DR

Consultez le site Web hébergé sur AWS S3: http://spa-with-pure-javascript.s3-website-us-East-1.amazonaws.com

Caractéristiques

• Chargement dynamique de la page: les pages (Fait Home et Cat) sont chargées dynamiquement dans une zone de contenu unique sans recharger toute la page.

• Navigation arrière / avant: gère correctement les boutons arrière et avant du navigateur, assurant une navigation transparente entre les pages.

• Configuration Nginx: docking avec une configuration Nginx pour servir le spa.

• Nombre de navigation utilisateur: suit la navigation hors ligne dans les recharges de spa et de page.

  1. Affiche le nombre de navigations hors ligne (c'est-à-dire que la page change dans le spa sans rechargement de page pleine). La valeur est mise à jour par JavaScript dans le fichier app.js, incrémentant chaque fois que la navigation se produit dans le spa.

  2. Affiche le nombre de fois que la page a été rechargée depuis le début de la session. Cette valeur est gérée à l'aide de SessionStorage, incrément chaque fois que la page est rechargée. La valeur mise à jour est reflétée dans la page, comme indiqué dans les fichiers app.js et contact.html .

? Structure du projet

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 

Commencer

Condition préalable

• ? Docker et Docker composent installés sur votre machine pour fonctionner dans un conteneur.
• ? Node pour fonctionner avec NPM.

Installation

Installez docker ou node.js:

Installer Docker

Installer le nœud

Clone le référentiel:

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

Passez au dossier du référentiel:

 cd spa-with-pure-js

? Courir localement avec Docker

Démarrez l'application à l'aide de Docker Compose.

Construisez l'image du conteneur Nginx:

 docker-compose build

A commencé le conteneur:

 docker-compose up

? Exécution localement avec HTTP-Server

HTTP-Server est un serveur HTTP statique en ligne de commande simple.

Installez HTTP-Server avec NPM:

 npm install --global http-server

Exécutez sur le port 8080:

 http-server ./src --port 8080

? Ouvrez votre navigateur et accédez à http: // localhost: 8080 pour afficher l'application.

Astuce: utilisez Chrome Devtools (appuyez sur F12) pour comprendre comment les fichiers sont chargés.

Licence

Ce projet est autorisé en vertu de la licence MIT - voir le fichier de licence pour plus de détails.