Meu ambiente para desenvolvimento web com WSL2 — Javascript (AdonisJS + React + VueJS)

Esse post é o terceiro de uma série de 4

1. Geral
2. Ruby on Rails (PostgreSQL)
3. Javascript (AdonisJS + React + VueJS)
4. Apache + MySQL + PHP (WordPress)

Como banco de dados para o AdonisJS, utilizo o PostgreSQL, que já mostrei como faço a instalação no post anterior, portanto não vou repeti-lo :)

O fato mais interessante do WSL é que ele permite que executemos comandos na Distro (quase) como se estivéssemos rodando o Linux diretamente. Há alguns detalhes aqui e ali, mas confesso que fiquei bastante surpreso com o fato da instalação do Node ser exatamente igual à que fazia diretamente no Ubuntu.

NVM

Esse é o gerenciador de versões do Node, da mesma forma que o RVM é para o Ruby.

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

IMPORTANTE: durante a escrita desse post, a última versão disponível era a 0.35.3, recomendo que dê uma olhada no repositório oficial para instalar a versão mais recente: https://github.com/nvm-sh/nvm#install--update-script

Durante a instalação o NVM faz o seu melhor para já se adicionar ao arquivo ~/.zshrc, mas ele nem sempre consegue 🤷‍♀️. Portanto, abra uma nova aba e verifique se é possível executar o comando nvm -v (se você vêm seguindo desde o começo, pode só verificar se o termo nvm fica verde 😉).

Caso o NVM não esteja disponível, não se desespere, basta adicionar as linhas abaixo ao final do seu arquivo ~./zshrc:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Node e NPM

Depois de instalado o NVM, é hora de instalar o Node. Particularmente sempre instalo a versão LTS primeiro para deixá-la como padrão, portanto aí vai o comando:

nvm install --lts

Yarn

Via de regra prefiro usar o Yarn como gerenciador de dependências. Em linhas gerais eu o considero mais performático e, como estamos num ambiente que é — por definição — mais lento do que se estivéssemos diretamente no Linux, qualquer milésimo de segundo conta!

Primeiro precisamos adicionar o yarn ao repositório apt:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Agora é só rodar

sudo apt update && sudo apt install yarn

Se tudo ocorreu bem, você deve conseguir rodar yarn -v e ver a versão instalada.

Além disso, para conseguirmos instalar pacotes globalmente, precisamos adicionar a linha abaixo no nosso ~/.zshrc :

export PATH="$PATH:$(yarn global bin)"

Caso tenha dúvidas, basta dar um pulinho da documentação oficial: https://classic.yarnpkg.com/en/docs/install/#debian-stable

Como diria o ditado, estamos com a faca e o queijo na mão. Agora que o ambiente está pronto, podemos seguir com nosso desenvolvimento JS normalmente. Abaixo vou listar os comandos para instalação dos CLIs de cada biblioteca/framework que utilizo e como verificar sua instalação.

AdonisJS

Instale com:

yarn global add @adonisjs/cli

Verifique com:

adonis --version

Documentação: https://adonisjs.com/docs/4.1/installation

React

Instale com:

yarn global add create-react-app

Verifique com:

create-react-app --version

Documentação: https://create-react-app.dev/docs/getting-started/

Vue

Instale com:

yarn global add @vue/cli

Verifique com:

vue --version

Documentação: https://cli.vuejs.org/guide/installation.html