spa with pure js

? ‍? Spa con JavaScript puro

Este proyecto es una aplicación de una sola página (SPA) creada con HTML, CSS y JavaScript puro. Demuestra el enrutamiento y la representación del lado del cliente sin confiar en ningún marco o bibliotecas frontal.

No está destinado a? ¡Uso de producción ! ¿Es simple y hackable para ser utilizado? Propósitos de aprendizaje .

️ Nota : Esta aplicación web depende de la API Catfact.ninja. Ver: gato-fact.js

? ‍️Tl; Dr

Vea el sitio web alojado en AWS S3: http://spa-withpure-javascript.s3-website-us-east-1.amazonaws.com

Características

• Carga dinámica de la página: las páginas (hecha en el hogar y el gato) se cargan dinámicamente en un solo área de contenido sin recargar la página completa.

• Navegación de retroceso/avance: maneja correctamente los botones de espalda y avance del navegador, asegurando una navegación perfecta entre páginas.

• Configuración de Nginx: Dockerized con una configuración NGINX para servir al SPA.

• Recuento de navegación del usuario: rastrea la navegación fuera de línea dentro del SPA y la recarga de la página.

  1. Muestra el recuento de navegaciones fuera de línea (es decir, cambia la página dentro del SPA sin una recarga de página completa). JavaScript actualiza el valor en el archivo App.js, incrementando cada vez que la navegación ocurre dentro del SPA.

  2. Muestra el número de veces que la página ha sido recargada desde que comenzó la sesión. Este valor se gestiona utilizando SessionStorage, incrementando cada vez que la página se vuelve a cargar. El valor actualizado se refleja en la página, como se muestra en los archivos app.js y contact.html .

? Estructura de proyectos

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 

Empezando

Requisitos previos

• ? Docker y Docker componen instalados en su máquina para ejecutar en un contenedor.
• ? Nodo para ejecutarse con npm.

Instalación

Instale Docker o Node.js:

Instalar Docker

Instalar nodo

Clon el repositorio:

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

Cambiar a la carpeta del repositorio:

 cd spa-with-pure-js

? Ejecutando localmente con Docker

Inicie la aplicación usando Docker Compose.

Construya la imagen del contenedor Nginx:

 docker-compose build

Inició el contenedor:

 docker-compose up

? Ejecutando localmente con http-server

HTTP-server es un servidor HTTP estático de línea de comandos simple.

Instale el servidor HTTP con NPM:

 npm install --global http-server

Ejecutar en el puerto 8080:

 http-server ./src --port 8080

? Abra su navegador y navegue a http: // localhost: 8080 para ver la aplicación.

Consejo: Use Chrome DevTools (presione F12) para comprender cómo se cargan los archivos.

Licencia

Este proyecto tiene licencia bajo la licencia MIT; consulte el archivo de licencia para obtener más detalles.