spa with pure js

？‍？純粋なJavaScriptを備えたスパ

このプロジェクトは、純粋なHTML、CSS、およびJavaScriptを使用して構築された単一ページアプリケーション（SPA）です。フロントエンドのフレームワークやライブラリに依存することなく、クライアント側のルーティングとレンダリングを示します。

それは意図されていませんか？生産使用！それはシンプルで、？学習目的。

ショ和注：このWebAppは、catfact.ninja APIに依存します。参照：cat-fact.js

？‍♂ ‍♂️tl; dr

AWS S3：http：//spa-with-pure-javascript.s3-website-us-east-1.amazonaws.comでホストされているWebサイトを表示します

特徴

• ダイナミックページの読み込み：ページ（ホームおよび猫の事実）は、ページ全体をリロードせずに単一のコンテンツ領域に動的にロードされます。

• バック/フォワードナビゲーション：ブラウザのバックアンドフォワードボタンを適切に処理し、ページ間のシームレスなナビゲーションを確保します。

• nginxセットアップ：スパを提供するためのnginx構成でDockerized。

• ユーザーナビゲーションカウント：スパとページのリロード内のオフラインナビゲーションを追跡します。

  1. オフラインナビゲーションのカウントを表示します（つまり、フルページをリロードせずにスパ内のページの変更）。値は、app.jsファイルのjavascriptによって更新され、スパ内でナビゲーションが発生するたびに増加します。

  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は、マシンに取り付けられたコンテナに設置されており、コンテナで実行されます。
• ？ npmで実行するノード。

インストール

dockerまたはnode.jsをインストールしてください：

Dockerをインストールします

ノードをインストールします

リポジトリをクローンします：

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

リポジトリフォルダーに切り替えます。

 cd spa-with-pure-js

？ Dockerでローカルに実行されます

Docker Composeを使用してアプリを起動します。

nginxコンテナ画像を構築します：

 docker-compose build

コンテナを開始しました：

 docker-compose up

？ http-serverでローカルに実行されます

HTTP-Serverは、単純なコマンドライン静的HTTPサーバーです。

NPMにHTTP-Serverをインストールします。

 npm install --global http-server

ポート8080で実行：

 http-server ./src --port 8080

？ブラウザを開き、http：// localhost：8080に移動してアプリケーションを表示します。

ヒント：Chrome Devtools（Press F12）を使用して、ファイルのロード方法を理解します。

ライセンス

このプロジェクトは、MITライセンスに基づいてライセンスされています。詳細については、ライセンスファイルを参照してください。