Node.js e terminal: dominando o ambiente de desenvolvimento front-end

Conhecendo o Node.js e o terminal - Apresentação

Você quer iniciar seus estudos em um framework, uma biblioteca do front-end, como React, Angular ou Vue, mas ainda tem dúvida de como o Node funciona? Se sim, esse curso é para você!

Boas-vindas! Meu nome é Antonio Evaldo e serei o seu instrutor nesse curso de Node.

Audiodescrição: Antonio se autodeclara como um homem branco. Ele tem cabelos cacheados, pretos, na altura do ombro. Uso óculos, tem bigode e cavanhaque, e olhos castanho-escuros. Está de camiseta preta. Ao fundo, uma parede iluminada por um gradiente do rosa ao azul, com um quadro de guitarra à direita.

O que vamos aprender?

Neste curso, vamos aprender tudo que é necessário saber em relação ao Node.js, para você poder trabalhar de forma muito mais tranquila com o framework front-end que escolher.

Então, você vai descobrir o que é o Node.js e por que utilizá-lo, além de como utilizá-lo no terminal (linha de comando). Também aprenderá o que é o NPM e os pacotes do Node, e como automatizar tarefas utilizando os scripts do NPM.

Nós também vamos explorar ferramentas front-end muito comuns que você pode utilizar em qualquer projeto, e nem precisa ser um framework. São elas: ESLint, o Prettier, o JSON Server.

Você também vai aprender a diferença entre dependências de desenvolvimento e dependências de produção.

Por fim, faremos o deploy de um projeto que utilizaremos como exemplo, servindo de base para as nossas práticas ao longo do curso: o VidFlow, uma plataforma para publicar e assistir vídeos, clone do YouTube.

E após estudar tudo isso, você terá todos os conhecimentos necessários para começar a estudar um framework front-end, seja ele React, Angular ou Vue, porque praticamente todos eles utilizam o Node. Com essa base já construída e sólida, você terá uma transição muito mais suave.

Pré-requisitos

É importante que você tenha familiaridade com HTML, CSS e JavaScript para fazer esse curso. Mais especificamente em JavaScript, é interessante que você tenha conhecimento pelo menos até requisições HTTP.

Para estudar bem!

Se tiver qualquer dificuldade no andamento deste curso, consulte o fórum. Nós tentaremos responder o mais rápido possível.

Além disso, acesse o Discord da Alura e comunique-se por este canal para tirar suas dúvidas e trocar ideias com outros alunos e alunas.

Vamos estudar!

Conhecendo o Node.js e o terminal - Por que utilizar o Node.js?

Quando escolhemos um framework ou biblioteca front-end para trabalhar, não importa qual seja, praticamente todas pedem para executarmos alguns comandos.

Para trazer alguns exemplos, vamos abrir a documentação do React na seção "Start a New React Project" (iniciar um novo projeto). Temos nela uma nota dizendo que precisamos instalar o Node.js para desenvolvimento local. Se descermos um pouco a tela, encontramos algumas opções de blocos de código que pedem para executarmos alguns comandos. Um deles é o npx create-next-app@latest.

Podemos conferir que isso não é muito diferente na documentação do Angular. Para começar a desenvolver com Angular, temos o comando npm install -g @angular/cli, ligeiramente parecido com o de criar projeto com o React.

Ao conferir na documentação do Vue, mais uma vez encontramos esses comandos e eles também pedem para ter o Node.js instalado. O comando do Vue é npm create vue@latest.

Observação: Dependendo da data que você estiver acompanhando este curso, esses comandos podem variar um pouco.

Mas, afinal, o que são esses comandos? Por que precisamos do Node.js para instalá-los?

Node.js: Ambiente de execução do JavaScript

Para explicar melhor por que precisamos do Node.js, precisamos entender como o JavaScript funciona no ambiente ao qual estamos acostumados, que são os navegadores (ou browsers).

Chamamos esses navegadores de (alguns dos) ambientes de execução do JavaScript. Como sabemos, ele serve para manipular, ler o HTML e CSS, fazer algumas lógicas de programação. Os navegadores que conhecemos até agora, por exemplo, são Chrome, Mozilla Firefox, Opera e Microsoft Edge.

Mas onde entra o Node.js nisso? Ele surge como um novo ambiente de execução do JavaScript. Então, podemos chamá-lo de JavaScript Runtime, uma expressão bastante comum para esse contexto.

Mas, qual a diferença do Node.js para os navegadores?

A diferença é que ele consegue executar operações locais em nossos computadores, como a criação de servidores e APIs — propósito original do Node.js. Sendo o Node.js um ambiente de execução do JavaScript, isso significa que podemos utilizar essa linguagem, com que já temos familiaridade, para criar APIs, por exemplo; o que não era possível antes da criação do Node.js.

Além disso, o Node.js também consegue fazer leitura e escrita de arquivos, compilação de código e automatização de processos. E essas são apenas algumas das suas capacidades.

Se o Node.js foi criado inicialmente voltado para o ambiente do back-end, como ele ajuda no front-end? Justamente devido a essas operações citadas acima, que são muito úteis para nós do lado do front-end.

Fazendo uma analogia com o contexto de videogames, podemos imaginar que os arquivos JavaScript são como se fossem arquivos de jogos, e os navegadores como se fossem os consoles, como o Playstation ou o Xbox.

Um arquivo de jogo sozinho não consegue ser executado. Precisamos de um ambiente de execução, e os navegadores atuam nesse papel. Assim, combinando os navegadores com o JavaScript, conseguimos executá-lo do lado do front-end.

Já o Node.js também é um ambiente de execução, mas ele está mais para um "computador gamer", porque ele consegue fazer algumas operações a mais, que os navegadores não conseguem.

Inclusive, da mesma forma que existem jogos apenas para Xbox ou Playstation, existem jogos apenas para computadores. Isso significa que existem arquivos JavaScript que podem ser executados apenas nos navegadores, e existem arquivos JavaScript que podem ser executados apenas no Node.js. Temos funções específicas do Node e funções específicas do front-end.

É bom manter isso em mente e saber que existem, sim, diferenças entre o front-end e o back-end, mesmo utilizando a mesma linguagem de programação.

Node.js no desenvolvimento front-end

Para entender como o Node pode ajudar no ambiente de desenvolvimento front-end — seja usando React, Angular ou Vue —, vamos conferir um exemplo.

Há um conceito muito comum na programação chamado "componentes". O código abaixo tem uma tag section, e dentro dela tem um componente chamado Banner, com um 'B' maiúsculo:

<section>
    <Banner />
</section>

O que o Node pode fazer, no caso, é ler esse código e manipular o arquivo, transformando-o em código HTML que os navegadores conseguem entender. Por exemplo:

<section>
    <header class="banner">
        <img src="..." alt="...">
        <p class="..."></p>
    </header>
</section>

Nesse caso, ele transformou o Banner em uma tag header, com uma imagem e um parágrafo dentro.

Essa é apenas uma das muitas coisas que o Node consegue fazer para auxiliar no nosso desenvolvimento. Muitas vezes, ele faz isso de forma bem automática e rápida. Vamos conferir muitos desses benefícios ao longo deste curso.

Agora que você sabe a importância de se utilizar o Node e por que precisamos dele, vamos instalá-lo.

Nos encontramos no próximo vídeo!

Conhecendo o Node.js e o terminal - Instalando o Node.js

Agora que sabemos que precisamos do Node para qualquer framework de front-end, vamos instalá-lo.

Talvez você já tenha instalado no seu computador, então vamos fazer primeiro essa verificação. Você pode abrir o terminal do seu computador (se for Windows, o programa PowerShell) e, para verificar se o Node já está instalado, rodar o seguinte comando:

node --version

No caso do instrutor, que não tem o Node instalado ainda, aparece a seguinte resposta:

O termo 'node' não é reconhecido como nome de cmdlet, função, arquivo de script ou programa operável.

Basicamente, quando aparece esse erro no Windows, quer dizer que o Node realmente não está instalado.

Se, por outro lado, apareceu uma versão do Node que seja menor do que 16, por exemplo, 14 ou inferior, então recomendamos que você a desinstale, porque ela já está um pouco desatualizada. Além disso, se for uma versão maior do que 16, mas ímpar, também recomendamos que desinstale. Depois de desinstalar, você volta para esse vídeo para instalar uma versão mais recente.

Vamos fechar o PowerShell e acessar o site http://nodejs.org. Há dois grandes botões verdes na tela; do lado esquerdo está a versão mais recente no momento da gravação deste vídeo: 20.9.0 LTS. Para você, pode estar aparecendo uma versão mais recente, mas será sempre LTS, que significa Long Term Support (Suporte a Longo Prazo), e uma versão par nesse lado esquerdo.

Versão par ou ímpar remete ao número antes do primeiro ponto: 20.9.0 é par, enquanto 21.1.0 é ímpar.

A versão do botão da direita, a Current (Atual) — no momento, 21.1.0 —, sempre vai ser ímpar. Mas não recomendamos que baixe a versão Current, porque por mais que seja mais recente, ela pode conter alguns bugs (erros). A versão LTS é sempre a mais estável.

Vamos clicar no botão da versão 20 e, ao fazer isso, o navegador vai baixar o arquivo executável automaticamente. Ao terminar de baixar, vamos abri-lo.

Após abrir o arquivo, surge uma janela do Windows para instalar o Node no nosso computador. Primeiro, clicamos no botão "Next" nessa janela. Seguindo para o termo de contrato, devemos aceitar marcando a checkbox e depois clicando em "Next" novamente.

Depois temos a janela para selecionar o local de instalação do Node, mas não precisamos nos preocupar com isso. Clicamos em "Next". Seguimos para mais configurações com as quais não precisamos nos preocupar, então clicamos em "Next" mais uma vez. Clicamos uma última vez na janela de configurações e, por fim, clicamos no botão "Install".

Note que ele exige que você tenha privilégio de administrador, então clicamos em "Sim" no pop-up sobreposto, pois essa é uma operação importante. Então, apenas esperamos ele instalar o Node na nossa máquina.

Se tudo correr com sucesso, a janela exibirá a mensagem de que o Node já foi instalado, então clicamos em "Finish".

Para ter certeza, vamos abrir de novo o terminal e rodar o comando:

node -v

A resposta a esse comando deve ser "v20.9.0", a versão do Node que instalamos.

Reforçando: Você precisa ter pelo menos uma versão LTS do Node no seu computador, que seja maior ou igual a 16, para conseguir usar as ferramentas que vamos utilizar ao longo do curso. A versão 20 é suficiente para os nossos propósitos.

Sobre o curso Node.js e terminal: dominando o ambiente de desenvolvimento front-end

O curso Node.js e terminal: dominando o ambiente de desenvolvimento front-end possui 122 minutos de vídeos, em um total de 61 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o Node.js e o terminal
• Gerenciando pacotes com NPM
• Explorando scripts, pacotes locais e globais
• Usando uma biblioteca externa
• Deploy do projeto