Ferramentas client-side

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira, acervo comunitário fictício no bairro da Ribeira, Recife, cabe numa pasta. Ferramenta de linha de comando ajuda a organizar. Ela não substitui HTML que abre no navegador.

O exemplo está em exemplos/25-ferramentas-client-side/. Abra index.html. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• O que o npm faz, sem obrigar a instalar pacotes aqui.
• Ler um package.json.
• Entender bundler só como ideia.
• Servir a pasta em HTTP local.
• Distinguir deploy conceitual de estudo em 127.0.0.1.

npm, o que é

npm é o gerenciador de pacotes do Node.js. Ele baixa bibliotecas descritas no package.json. Neste volume você não precisa rodar npm install. A página abre direto.

Node.js entra quando um script da pasta pedir. O capítulo 16 já mostrou um caso com Vite, sempre em 127.0.0.1. Aqui o HTML basta.

package.json

O arquivo nomeia o projeto e lista comandos. private: true evita publicar por engano no registro de pacotes.

{
  "name": "ribeira-ferramentas",
  "private": true,
  "scripts": {
    "start": "python -m http.server 8767 --bind 127.0.0.1"
  }
}

scripts.start é um apelido. Se você tiver Node e quiser, npm start dispara o Python neste endereço. Sem Node, rode o mesmo comando Python à mão. O resultado visível é o mesmo: HTTP só em 127.0.0.1.

Mude "name" para "ribeira-patio". Preveja: a página não muda. Recarregue index.html. Confira. O nome do pacote não é o título da página.

Bundler, a ideia

Um bundler junta vários arquivos JS e CSS num (ou poucos) arquivos que o navegador baixa. Vite, esbuild e similares fazem isso. A Biblioteca da Ribeira deste volume não empacota nada.

npm install baixa o que dependencies listar. Este package.json não lista dependência. Não há node_modules para criar.

Você lê index.html e o texto da pasta. Bundler vira assunto quando o projeto cresce. Não é prova de que “agora é profissional”.

HTTP local

python -m http.server 8767 --bind 127.0.0.1

Rode na pasta do exemplo. Visite http://127.0.0.1:8767/. Encerre com Ctrl+C. Não use 0.0.0.0.

Disco é a pasta. Janela com file:// também abre este HTML. HTTP local testa caminho de URL. Publicação é outro computador, outro acordo.

Deploy, só a ideia

Publicar significa copiar arquivos para um servidor que outras pessoas alcançam. Pode ser página estática gratuita, ou um serviço pago. Nenhum cartão é o único caminho. Este volume não exige conta.

Erro comum: achar que sem npm a página “não é de verdade”. index.html desta pasta já é página. Outro erro: bind em todos os endereços da máquina.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ferramentas</title>
  </head>
  <body>
    <h1>Ferramentas desta pasta</h1>
    <p><code>package.json</code> só nomeia o projeto. O script start usa Python em 127.0.0.1. Você não precisa publicar.</p>
  </body>
</html>

Atividades

1. O que private: true evita no package.json?
2. Bundler é obrigatório para abrir o index.html deste capítulo?
3. Qual endereço você usa no servidor de estudo, e qual você não usa?

Respostas comentadas

1. Evita publicar o pacote de estudo no registro do npm por um comando descuidado.
2. Não. O HTML abre no navegador. Bundler é ideia para projeto maior, não requisito desta pasta.
3. Use 127.0.0.1. Não use 0.0.0.0. Estudo fica nesta máquina.

O arquivo completo

Referência do exemplo 25-ferramentas-client-side, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Ferramentas</title>
<style>
/* Apoio de leitura, teclado e tela estreita. */
img{max-width:100%;height:auto} html {overflow-wrap:anywhere} main {min-width:0} input,textarea,select,canvas {max-width:100%;box-sizing:border-box} fieldset {min-width:0}
pre {max-width:100%;overflow:auto} :focus-visible {outline:3px solid #0f3d3e;outline-offset:3px}
.skip {position:absolute;top:-5rem;left:1rem;background:#0f3d3e;color:white;padding:.5rem;z-index:9}.skip:focus {top:.5rem}
table {max-width:100%} td,th {overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head>
<body><a class="skip" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Ferramentas desta pasta</h1>
<p><code>package.json</code> só nomeia o projeto. O script start usa Python em 127.0.0.1. Você não precisa publicar.</p>
</main></body>
</html>