spa with pure js

? ‍? Спа -салон с чистым JavaScript

Этот проект представляет собой одностраничное приложение (SPA), созданное с использованием чистого HTML, CSS и JavaScript. Он демонстрирует маршрутизацию и рендеринг на стороне клиента, не полагаясь на какие-либо фронтальные рамки или библиотеки.

Это не предназначено? Использование производства ! Это просто и достаточно взломан, чтобы использовать? ‍? Учебные цели .

️ Примечание . Это веб -приложение зависит от catfact.ninja api. См.: Cat-fact.js

? ‍ ‍tl; Dr

Посмотреть веб-сайт, размещенный на AWS S3: http://spa-with-pure-javascript.s3-website-us-east-1.amazonaws.com

Функции

• Динамическая загрузка страниц: страницы (домов и кошка) динамически загружаются в одну область содержимого без перезагрузки всей страницы.

• Навигация с задней/вперед: должным образом обрабатывает кнопки браузера сзади и вперед, обеспечивая бесшовную навигацию между страницами.

• Настройка NGINX: заправлена ​​с конфигурацией NGINX для обслуживания SPA.

• Подсчет навигации пользователей: отслеживает автономную навигацию в SPA и перезагрузке страниц.

  1. Отображает количество автономных навигаций (т.е. изменения страницы в SPA без полной перезагрузки страницы). Значение обновляется JavaScript в файле app.js, увеличивая каждый раз, когда навигация происходит в SPA.

  2. Отображает количество раз, когда страница была перезагружена с момента начала сеанса. Это значение управляется с помощью SessionStorage, увеличивая каждый раз, когда страница перезагружается. Обновленное значение отражается на странице, как показано как в файлах app.js , так и в файлах contact.html .

? Структура проекта

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 

Начиная

Предварительные условия

• ? Docker и Docker Compose установлены на вашем компьютере для запуска в контейнере.
• ? Узел для запуска с NPM.

Установка

Установите Docker или Node.js:

Установите Docker

Установите узел

Клонировать репозиторий:

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

Переключитесь на папку репозитория:

 cd spa-with-pure-js

? Бег на местном уровне с докером

Запустите приложение с помощью Docker Compose.

Создайте изображение контейнера Nginx:

 docker-compose build

Запустил контейнер:

 docker-compose up

? Работа на локальном уровне с HTTP-Server

HTTP-Server-это простой статический HTTP-сервер командной строки.

Установите HTTP-Server с NPM:

 npm install --global http-server

Запустить на порту 8080:

 http-server ./src --port 8080

? Откройте свой браузер и перейдите на http: // localhost: 8080, чтобы просмотреть приложение.

Совет: используйте Chrome Devtools (нажмите F12), чтобы понять, как загружаются файлы.

Лицензия

Этот проект лицензирован по лицензии MIT - для получения подробной информации см. Файл лицензии.