Monitorar e reiniciar automaticamente aplicação Node.js

Na postagem Criação do servidor Node.js e para iniciar o servidor é no terminal node app.js, mas para cada alteração no arquivo JavaScript é necessário parar e iniciar novamente o servidor Node.js. Então, deve se perguntar se existe alguma forma de não precisar reiniciar a aplicação. Sim, existe, esse é o objetivo desse howto.

O que é Nodemon ?

O Nodemon é um utilitário que monitora todas as alterações nos arquivos da aplicação e reinicia automaticamente o servidor quando for necessário.

Instalação e uitlização do Nodemon

No terminal, digite: $ npm install nodemon -g

Para executar a aplicação, execute no terminal: $ nodemon app.js

Agora, altere os arquivos da aplicação e atualiza a página, verá que não foi preciso reiniciar o servidor Node.js com o uso Nodemon.

Para obter mais opções do Nodemon, digite no terminal: nodemon -h

Feito!

Primeiros passos com Node.js

Antes de seguir esse howto de criação do servidor web do Node.js, é pré requisito seguir o howto de Instalação do Node.js no Linux , caso não tenha instalado.

O objetivo desse post é criar o servidor web e o famoso Hello World em Node.js.

Crie um arquivo app.js no diretório de sua escolha com o seguinte conteúdo:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});

server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

Agora, execute o servidor web no terminal, digite: node app.js

Acesse no browser http://localhost:3000 e você irá ver a mensagem "Hello World".

Feito!

Instalando o Node.js no Linux

O que é Node.js?

O Node.js pode ser definido como um ambiente de execução Javascript Server-side.

Isso significa que com o Node.js é possível criar aplicações Javascript para executar como uma aplicação standalone em uma máquina, não dependendo de um browser, como estamos acostumados.

Instalação do Node.js no Linux

Pré requisitos

Se ainda não tiver o curl instalado no Debian, Ubuntu

$ sudo apt install curl

Se ainda não tiver o curl instalado no CentOS, Fedora

$ yum install curl

A partir daqui se aplica em qualquer distribuição Linux a instalação do Node.js

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.3/install.sh | bash

O número da versão que está em negrito pode mudar com o tempo, então recomendo você acessar a página do projeto no GitHub e procurar pela nova versão.

O Node.js será instalado no diretório oculto do seu usuário.

$ source ~/.bashrc

Para listar as versões disponíveis do Node.js

$ nvm ls-remote

Irá exibir as versões do Node.js e assim podemos ver se o NVM está funcionando corretamente.

Até a data de publicação deste howto, a versão atual do Node.js é 12.18.2

$ nvm install v12.18.2

Caso tenha instalado mais de uma versão e tenha necessidade de alternar entre elas, então segue:

$ nvm use

Verifique a versão do Node.js

$ node -v

Já ganha de bônus o NPM na instalação do Node.js. Para atualizar-lo o NPM, basta executar:

$ npm install npm -g

Feito!

Guia de sobrevivência do GIT e Git Flow

GIT

Primeiro é necessário ressaltar a diferença entre GIT e Github, Bitbucket, Gitlab.

O GIT é o sistema de controle de versão e o Github, Bitbucket, Gitlab, são plataformas para hospedar projetos de desenvolvimento por meio de repositório público ou privado, que usa o GIT como base.

Escolhendo a plataforma que irá hospedar o seu projeto no repositório remoto, crie uma conta, se ainda não tiver, gera o par de chaves privada e pública, adicione a chave pública no seu perfil da plataforma escolhida, crie um repositório e por fim o primeiro commit. Calma, que irei explicar cada item passo a passo.

Nesse artigo é explicado no Github por ser mais popular na comunidade opensource.

1. Acesse https://github.com , crie uma conta se ainda não tiver.

2. Gere um par de chaves privada e pública com SSH.

No Windows 10, com o GitBash que emula o terminal Bash do Linux, pode gerar o par de chaves privada e pública, usando o mesmo comando utilizado no Linux (qualquer distro).

$ ssh-keygen

Responda as perguntas que é solicitado, no final são gerados par de chaves privada e pública no arquivo oculto do seu usuário.

chave pública: ~/.ssh/id_rsa.pub
chave privada: ~/.ssh/id_rsa

3. Copiar o conteúdo do arquivo ~/.ssh/id_rsa.pub na configuração do perfil na plataforma escolhida, no caso do Github é https://github.com/settings/keys

$ cat ~/.ssh/id_rsa.pub

4. Colar o conteúdo no campo Key e defina um nome no campo Title, como por exemplo: máquina-casa, máquina-empresa.

Ao salvar, confirma com sua senha da conta.

5. Crie um repositório ao clicar em "+" > "New Repository"

6. Define um nome para o repositório em "Repository name"

7. Marque "Public" ou "Private" conforme a sua escolha do repositório de domínio público ou privado.

8. Clique no botão "Create repository"

9. Agora na sua máquina, crie um diretório para o projeto se não existir ou pode utilizar o diretório existente do seu projeto, adicione o repositório remoto.

10. Acesse o diretório do projeto e segue:

Apenas na primeira vez, execute o comando git init para inicializar o repositório local do Git. O próximo passo é adicionar o repositório remoto correspondente a alguma plataforma Github, Bitbucket, Gitlab ou outro servidor no modo Git Bare . Nesse artigo é utilizado o Github.

11. Adicionando o repositório remoto

É possível adicionar o repositório remoto de duas formas: protocolo https ou ssh. A diferença é que usando o protocolo ssh e com a chave pública adicionada no perfil do Github/Bitbucket/Gitlab ao fazer o push não é solicitado a senha, porém conforme foi gerado o par de chaves privada e pública, uma das perguntas é uma senha secreta corresponde a chave, isso é opcional, o default é sem, mas se caso criou, será solicitado essa senha secreta, ok?

$ git remote add origin git@github.com:< SEU-USERNAME >/< SEU-REPOSITORIO >.git

Inicializa o repositório local no diretório do projeto.

$ git init

12. Adicionando informações nome, e-mail, coloque com suas informações

$ git config --global user.name "Nome completo"
$ git config --global user.email nome.sobrenome@dominio.com

13. Adicionar os arquivos na fila de commit

$ git add .

14. Commit com comentário, se for o primeiro commit, é tradicional colocar "first commit", mas pode colocar qualquer comentário, nos demais commits é interessante colocar comentário relevantes sobre o que foi feito

$ git commit -m "first commit"

15. Enviar os arquivos para o repositório remoto

$ git push origin master

Git Flow

Manter as branches master e develop como principais no repositório do projeto, a branch master é de produção e a branch develop é que estar em desenvolvimento.

As features novas do projeto são issues publicadas no repositório, então cria-se uma branch com o id da issue a partir da branch develop sempre atualizada.

Na prática, fica assim:

Fluxo de Git-Flow

$ git checkout develop
$ git pull origin develop
$ git checkout -b < id-issue >

Faz a codificação na branch da issue e ao terminar, faz o commit e push nessa branch. Em seguida, faz o Pull Request da branch da issue para branch develop e outro desenvolvedor faz o Code Review do que foi feito e estando OK, faz o merge para develop.

git add .
git commit -m "comentário resumido do que foi feito na issue"
git push origin

No final da Sprint que geralmente é de uma ou duas semanas e após testado e OK na develop, faz o merge da branch develop para master.

Segue o fluxo na próxima issue.

Pronto, por meio deste artigo foi possível aprender sobre o Git, plataformas Github, Bitbucket, Gitlab e o fluxo de desenvolvimento utilizando o Git Flow.

Feito!

Conhecendo P5JS

O p5.js é uma biblioteca JavaScript para codificação criativa, com foco em tornar a codificação acessível e inclusiva para artistas, designers, educadores, iniciantes e qualquer outra pessoa. O p5.js é gratuito e de código aberto, porque acreditamos que o software e as ferramentas para aprendê-lo devem estar acessíveis a todos.

Usando a metáfora de um esboço, o p5.js possui um conjunto completo de funcionalidades de desenho. No entanto, você não está limitado à sua tela de desenho. Você pode pensar em toda a página do navegador como seu esboço, incluindo objetos HTML5 para texto, entrada, vídeo, webcam e som.

Para saber mais verifique a documentação

Instalando o Docker com WSL2 no Windows 10

Em 2016, a Microsoft anunciou a possibilidade de rodar o Linux dentro do Windows 10 como um subsistema e o nome a isto foi dado de WSL ou Windows Subsystem for Linux.

O acesso ao sistema de arquivos no Windows 10 pelo Linux era simples e rápido, porém não tinhamos uma execução completa do kernel do Linux e outros artefatos nativos e isto impossibilitava a execução de várias tarefas no Linux, uma delas é o Docker.

Em 2019, a Microsoft anunciou o WSL2, com uma dinâmica aprimorada em relação a 1ª versão:

• Execução do kernel completo do Linux
• Melhor desempenho para acesso aos arquivos dentro do Linux
• Compatibilidade completa de chamada do sistema

O WSL2 já estava disponível na versão Insider do Windows, mas na última semana de maio de 2020 passou a estar disponível em final release na atualização 20.04 do Windows 10.

Assim, o WSL2 permitiu que executemos Docker no Linux usando o Windows 10.

Compare as versões: https://docs.microsoft.com/pt-br/windows/wsl/compare-versions

Vamos entender como usar o Docker com o WSL 2.

Antes de começarmos o que você precisa ter para rodar o WSL:

• Windows 10 Home ou Professional
• Uma máquina compatível com virtualização
• Pelo menos 4GB de memória RAM

1. Verifique a versão do seu Windows, se já for a versão 20.04 ótimo, estamos prontos, senão precisamos instalar a atualização para instalar a 20.04.
   https://www.microsoft.com/pt-br/software-download/windows10
   O software da atualização verificará se sua máquina é compatível com a atualização. A atualização poderá levar muito tempo, pra mim levou mais de 1 hora para atualizar.
2. Instale a última atualização do kernel do WSL 2:
   https://docs.microsoft.com/pt-br/windows/wsl/wsl2-kernel
   Basta instalar, não precisa de mais nada
   Recomendar este tutorial e colocar no Youtube Install Windows Subsystem for Linux (WSL) on Windows 10
3. Habilite o recurso do WSL no Windows
   Digite no PowerShell em modo administrador:
   dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
   Reinicie sua máquina somente por segurança.
4. Atribua a versão default do WSL para a versão 2
   wsl --set-default-version 2
5. Escolha sua distribuição Linux no Windows Store
   Ao iniciar a versão, você deverá criar um usuário que poderá ser o mesmo da sua máquina e uma senha, este será o usuário root da sua instância WSL.
6. Alterar a versão do WSL de uma distribuição
   wsl --set-version
   
7. Dicas:
   
   • Atalho no menu iniciar Ou executando C:\Windows\System32\wsl.exe
   • O sistema de arquivos do Windows é acessível em /mnt
   • É possível acessar o sistema de arquivos do Linux pela rede do Windows digite \\wsl$
   • É possível acessar uma pasta digitando explorer.exe
   • É possível abrir uma pasta com o VSCode digitando code .
   • É possível acessar executáveis do Windows no terminal do Linux.
8. Instale o Docker Desktop versão maior ou igual 2.3
9. Habilite o WSL no Docker Desktop
   Vá em Resources/WSL Integration
10. Teste o seu Docker
    Execute o comando docker run ou docker-compose up
11. Por padrão o WSL2 pode utilizar “recursos de forma ilimitada” na sua máquina
    Se você quiser limitar os recursos, crie um arquivo .wsconfig na pasta do seu usuário
    https://docs.microsoft.com/pt-br/windows/wsl/wsl-config#configure-global-options-with-wslconfig
    Depois de configurar execute no power shell:
    wsl --shutdown
    (vai reiniciar o Docker também e vai aparecer uma mensagem se você quer iniciar o Docker
12. As duas distribuições WSL do docker
    https://www.docker.com/blog/new-docker-desktop-wsl2-backend/
13. Liberar memória no host
    https://linux-mm.org/Drop_Caches
    echo 1 | sudo tee /proc/sys/vm/drop_caches
echo 3 | sudo tee /proc/sys/vm/drop_caches
14. Use BuildKit and multi-stage builds
    Acrescente export DOCKER_BUILDKIT=1 no .profile do seu usuário

Referências:

Guia rápido de instalação do WSL2

Feito!

Executando primeira aplicação Electron

O que é Electron?

Electron é um framework de código aberto criado por Cheng Zhao, e agora desenvolvido pelo GitHub. Permite desenvolver aplicações para desktop com interface gráfica usando componentes frontend e backend originalmente criados para aplicações web: Node.js para o backend e Chromium para o frontend.

Estrutura de uma aplicação Electron

Um aplicativo Electron básico consiste em três arquivos: package.json (metadata), main.js (código) e index.html (ambiente gráfico com frontend) e o framework é fornecido pelo arquivo executável (electron.exe no Windows, electron.app no macOS e electron no Linux).

Se desejar adicionar ícones customizados podem renomear ou editar o arquivo executável.

O arquivo mais importante é o package.json. Nele mantém as informações sobre os pacotes. As informações mais comuns são:

• "name", nome da aplicação;
• "version", versão da aplicação;
• "main", nome do script principal da aplicação;

package.json é um arquivo npm.

Aplicações que usam Electron

Um número significativo de aplicativos desktop é construído com o Electron, dentre os quais:

• Atom
• GitHub Desktop
• Visual Studio Code
• Discord
• Entre outros

Criando primeira aplicação com Electron

Ps: Necessário instalar antes o Nodejs

Crie um diretório para a aplicação Electron, acesse esse diretório e execute npm init

$ mkdir -p electron/first-app
$ cd electron/first-app
$ npm init


O NPM guiará o arquivo package.json com base das perguntas solicitadas. O script especificado por main é onde inicializa o aplicativo.

package.json

{
  "name": "first-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Reginaldo",
  "license": "MIT"
}

Instalar o Electron de forma global

$ sudo npm install -g electron

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: { nodeIntegration: true
}
})

// and load the index.html of the app.
win.loadFile('index.html')

// Open the DevTools.
//win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.


Finalmente o arquivo index.html de exemplo

< !DOCTYPE html>
< html>
< head>
< meta charset="UTF-8">
< title>Hello World!

< meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
< /head>
< body>

Hello World!

We are using node , Chrome , and Electron .
< /body>
< /html>

Executar a aplicação Electron

$ npm start

Feito!