Desenvolvimento Front-End

Uma jornada com o Debian como aliado

o que vamos ver

Visão Geral do Debian

Configuração do ambiente

Otimizando fluxo de trabalho

Exemplo

@allythy

Site

https://allythy.github.io/

Linkedin:

https://linkedin.com/in/allythy

Visão

Estabilidade
Segurança
Comunidade
Software Livre

Configuração do ambiente de desenvolvimento

Instalação

Git

O Git é um sistema de controle de versão distribuído, que registra alterações em um arquivo ou conjunto de arquivos ao longo do tempo para que você possa lembrar versões específicas mais tarde.

sudo apt-get install git

Nodejs

Node.js é um ambiente de tempo de execução (runtime environment) de código aberto baseado no motor JavaScript V8 da Google

NVM (Node Version Manager)


# installs NVM (Node Version Manager)
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js
nvm install 20

# verifies the right Node.js version is in the environment
node -v # should print `v20.12.0`

# verifies the right NPM version is in the environment
npm -v # should print `10.5.0`

Instalação

sudo apt-get install nodejs npm

Docker

Docker é uma plataforma de código aberto projetada para facilitar a criação, implantação e execução de aplicativos em contêineres

Repositório do docker

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

# Install
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Instalação

sudo apt-get install docker.io

Otimizando fluxo de trabalho

Os hooks são programas que acionam ações em determinados pontos da execução do git

Git Hooks

O Git, nessa situação, se compara ao chef, onde todas as receitas e ingredientes são gerenciados, permitindo que os subchefs colaborem e compartilhem suas criações.

Vamos considerar os hooks do Git como as etapas de verificação de qualidade durante o processo de preparação dos pratos.

git (chef)

pre-commit (chef de qualidade)

pre-push (chef de apresentação)

Image by <a href="https://www.freepik.com/free-vector/hand-drawn-chef-drawingillustration_69225398.htm#from_view=detail_serie">Freepik</a>

Instalação

Husky

Facilita a execução do git hooks no javacript

npm install --save-dev husky

npx husky init

Instalação

Algumas ferramentas trabalham em conjunto com husky

npm install --save-dev eslint prettier lint-staged @commitlint/{cli,config-conventional}

eslint - Lint javascript
prettier - Formatador javascrit
lint-staged - Executa o lint em arquivos na stage do git
commitlint - Lint das mensagens commits

Exemplo de uso

Instalação

Docusaurus

Um gerador de site estático. Ele fornece recursos de documentação fácil e simples.

npx create-docusaurus@latest my-website classic

Obrigado

https://linkedin.com/in/allythy