spa with pure js

? ‍? Spa com javascript puro

Este projeto é um aplicativo de página única (SPA) criada usando HTML, CSS e JavaScript puro. Ele demonstra roteamento e renderização do lado do cliente sem confiar em nenhuma estrutura ou bibliotecas front-end.

Não se destina a? Uso da produção ! É simples e hackeable o suficiente para ser usado? ‍? Fins de aprendizado .

️ NOTA : Este WebApp depende da API CatFact.ninja. Veja: gat-fact.js

? ‍♂️Tl; dr

Veja o site hospedado no AWS S3: http://spa-with-pure-javascript.s3-website-us-east-1.amazonaws.com

Características

• Carregamento de página dinâmica: as páginas (fato doméstico e gato) são carregadas dinamicamente em uma única área de conteúdo sem recarregar a página inteira.

• Navegação traseira/para a frente: lida corretamente nos botões traseiros e para a frente do navegador, garantindo navegação perfeita entre as páginas.

• Configuração do NGINX: Dockerized com uma configuração NGINX para servir o spa.

• Contagem de navegação do usuário: rastreia a navegação offline dentro do spa e na página recarrega.

  1. Exibe a contagem de navegações offline (ou seja, alterações de página no spa sem uma página inteira recarregada). O valor é atualizado pelo JavaScript no arquivo app.js, incrementando cada vez que a navegação ocorre dentro do spa.

  2. Exibe o número de vezes que a página foi recarregada desde o início da sessão. Esse valor é gerenciado usando o SessionStorage, incrementando cada vez que a página é recarregada. O valor atualizado é refletido na página, conforme mostrado nos arquivos app.js e contact.html .

? Estrutura do projeto

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 

Começando

Pré -requisitos

• ? Docker e Docker Compose instalado em sua máquina para ser executado em um contêiner.
• ? Nó para executar com o NPM.

Instalação

Instale o docker ou node.js:

Instale o docker

Instale o nó

Clone o repositório:

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

Mude para a pasta repositório:

 cd spa-with-pure-js

? Correndo localmente com o Docker

Inicie o aplicativo usando o Docker Compose.

Construa a imagem do contêiner nginx:

 docker-compose build

Iniciou o contêiner:

 docker-compose up

? Correndo localmente com http-server

HTTP-Server é um servidor HTTP estático simples da linha de comando.

Instale o HTTP-Server com o NPM:

 npm install --global http-server

Execute na porta 8080:

 http-server ./src --port 8080

? Abra o navegador e navegue para http: // localhost: 8080 para visualizar o aplicativo.

Dica: use o Chrome Devtools (pressione F12) para entender como os arquivos são carregados.

Licença

Este projeto está licenciado sob a licença do MIT - consulte o arquivo de licença para obter detalhes.