React.js + Docker: Development Environment

Configurar o ambiente de desenvolvimento às vezes é uma tarefa cansativa. Quem nunca teve problemas com programas incompatíveis? Quebra de compatibilidade entre versões? E não termina por aí, tem muita coisa que pode dar errado.

Para quem não quer ter esse tipo de dor de cabeça, o Docker é uma excelente alternativa. Se você não sabe muito sobre docker, recomendo que leia este artigo antes de continuar: O que é Docker?

Desta forma, o objetivo deste artigo é mostrar para você como criar um aplicativo web com React.js e Docker. Vale mencionar que o foco aqui é mostrar como configurar seu ambiente de desenvolvimento.

Para seguir este tutorial você precisará:

• Docker instalado no seu computador: Clique aqui para mais detalhes
• Editor de código
• Terminal

React.js + Docker: Se Conectando ao Container

Primeiramente crie o diretório do aplicativo no seu computador. No meu caso, o diretório será: /home/react-docker

Importante destacar que eu estou utilizando o Linux Ubuntu 20.04.

Agora acesse o diretório criado anteriormente pelo terminal e execute o seguinte comando:

docker run --rm --volume "/home/react-docker:/srv/react-docker" --workdir "/srv/react-docker" --publish 3000:3000 -it node:12 bash

Após executar o comando acima, você se conectará ao container. Ou seja, é como se você estive conectado a um "novo computador".

Na primeira vez que você executar este comando, o docker precisará baixar a imagem node:12 e isso pode levar alguns minutos.

Segue uma breve explicação sobre os parâmetros deste comando:

• --volume "/home/react-docker:/srv/react-docker": Cria um link entre a pasta do computador hospedeiro (/home/react-docker) com a pasta do container (/srv/react-docker).
• --workdir "/srv/react-docker": Diretório inicial quando o container for iniciado.
• --publish 3000:3000: Cria um link entre a porta 3000 do container com a porta 3000 do computador hospedeiro.
• -it: Cria um link entre o terminal do container com o terminal do computador hospedeiro.
• -rm: Remove antigos containers (muito útil depois da primeira execução).

React.js + Docker: Criando o projeto

Agora conectado ao container, vamos criar o nosso projeto. Execute este comando dentro do container:

npx create-react-app .

Pronto, nosso aplicativo web foi criado!

Algo muito importante para mencionar sobre esta etapa, as instalações que são feitas enquanto você estiver conectado ao container serão perdidas quando o container for finalizado.

Mas pode ficar tranquilo, o nosso aplicativo foi criado dentro da pasta /srv/react-docker do container, que é um link para a pasta /home/react-docker do computador hospedeiro.

Se você fizer outras instalações, fique atento! Talvez seja necessário criar uma nova imagem com Docker File.

Ao final deste processo fique atento ao Owner da pasta /home/react-docker no computador hospedeiro. No meu caso eu precisei alterar o Owner da pasta e seus arquivos, uma vez que eles foram criados por dentro do container.

Quem estiver usando Linux é só executar este comando no computador hospedeiro:

sudo chown -R <USERNAME> /home/react-docker

React.js + Docker: Executando o projeto

Para executar o projeto se conecte novamente ao container:

docker run --rm --volume "/home/react-docker:/srv/react-docker" --workdir "/srv/react-docker" --publish 3000:3000 -it node:12 bash

Agora conectado ao container, execute este comando:

npm start

Pronto! Para ver o projeto rodando, acesse o navegador no seguinte endereço http://localhost:3000

React.js + Docker Compose

Para não precisar executar o comando Docker Run toda vez, você pode configurar o Docker Compose.

Primeiramente crie o arquivo "/home/react-docker/docker-compose.yml" com o seguinte conteúdo:

version: '3'

services:
  node:
    image: node:12
    ports:
      - '3000:3000'
    volumes:
      - ./:/srv/react-docker
    working_dir: /srv/react-docker
    command: 'npm start'

Agora no computador hospedeiro execute o seguinte comando:

docker-compose up

Se você preferir executar o container em background execute este comando:

docker-compose up -d

Neste caso, para se conectar ao container primeiro você deve descobrir o Container ID:

docker ps

Agora execute o comando:

docker exec -it <CONTAINER_ID> bash

Pronto, conectado ao container!

Por fim

Neste tutorial eu utilizei as seguintes versões:

• Docker: 19.03
• Docker Compose: 1.25
• Node: 12.20
• Npm: 6.14
• create-react-app: 4.0

Dúvidas ou sugestões é só entrar em contato. Abraço.