Forem: Andrey Araújo

As Vantagens do Tailwind CSS em Projetos ReactJS

Andrey Araújo — Wed, 31 Jan 2024 14:26:14 +0000

O desenvolvimento de aplicações web utilizando ReactJS tem se tornado cada vez mais popular devido à sua flexibilidade e eficiência. Quando combinado com o framework Next.js, os desenvolvedores têm acesso a uma experiência de desenvolvimento ainda mais robusta e otimizada. Principalmente quando se trata da última versão do Next.js e do ReactJS.

Neste artigo, exploraremos as vantagens de integrar o Tailwind CSS em projetos ReactJS, com foco especial nas melhorias que ele pode oferecer quando utilizado com o Next.js. Além disso, vou mostrar uma alternativa interessante, o ShadcnUI, que pode ser integrado de forma complementar ao TailwindCSS, trazendo ainda mais agilidade na criação de interfaces.

Tailwind CSS

O Tailwind CSS é um framework CSS utilitário que proporciona uma abordagem única para o desenvolvimento de interfaces. Ele permite aos desenvolvedores criar designs personalizados diretamente em suas marcações. Diferente de outras bibliotecas CSS, como Bootstrap ou Material UI, que oferecem componentes predefinidos, Tailwind fornece classes utilitárias que você pode combinar para criar designs únicos.

Suas vantagens são especialmente evidentes ao trabalhar com ReactJS e, mais ainda, em projetos Next.js. Algumas das principais vantagens incluem:

Produtividade Aprimorada: Com classes utilitárias predefinidas, p-10 flex m-2 por exemplo, o Tailwind acelera o desenvolvimento ao eliminar a necessidade de escrever CSS do zero. Isso resulta em um fluxo de trabalho mais ágil e produtivo para os desenvolvedores ReactJS.
Estilo Consistente: O Tailwind promove um estilo consistente em todo o projeto, graças às suas classes padronizadas. Isso simplifica a manutenção do código e garante uma experiência de usuário coesa. Então chega de perder tempo escolhendo nome para classes CSS!
Customização Flexível: Apesar de suas classes predefinidas, o Tailwind é altamente customizável. Isso permite que os desenvolvedores personalizem o design de acordo com as necessidades específicas do projeto, mantendo a flexibilidade do ReactJS.

A Integração Perfeita com Next.js

Ao integrar o Tailwind CSS em projetos Next.js, as vantagens mencionadas são ainda mais perceptíveis. Next.js oferece um sistema de roteamento eficiente e renderização otimizada, enquanto o Tailwind simplifica o styling. Juntos, eles proporcionam um ambiente de desenvolvimento dinâmico e eficaz.

Otimização de Desempenho: A natureza modular do Tailwind se alinha perfeitamente com a abordagem de componentes do React e Next.js. Isso resulta em um código mais otimizado e em um desempenho geral aprimorado da aplicação.
Server-Side Rendering (SSR) e Static Site Generation (SSG): O Next.js suporta SSR e SSG, e ao integrar o Tailwind, a aplicação mantém um estilo consistente mesmo ao ser renderizada no servidor. Isso é crucial para garantir uma experiência do usuário mais suave.

O que vejo falar sobre o Tailwind

Tem um tempo já que pesquiso sobre esse framework, e como ele vem crescendo dentro da comunidade. Mas já vi muitos comentários do tipo: “ele só adiciona complexidade ao projeto”, “os arquivos React ficam enormes adicionando tantas classes nos elementos HTML”, e por ai vai.

Confesso que no começo vi dessa forma, mas depois de começar a usar, a fazer vários testes, e recentemente usar em projetos do trabalho, mudei totalmente de ideia, e hoje vejo que esse framework traz mais vantagens do que desvantagens.

Uma das vantagens do React é a possibilidade de componentizar elementos da nossa aplicação, e isso vai de encontro com a construção de interfaces usando Tailwind, por mais que as vezes precisemos adicionar bastante classes para estilizar um componente, vai do desenvolvedor analisar cada situação e componentizar o que for preciso, para não termos aqueles arquivos gigantes que adoramos dar manutenção. (contém ironia)

E por mais que o Tailwind já traga bastante agilidade no desenvolvimento de interfaces, vou te mostrar uma outra ferramenta que vai te trazer ainda mais.

ShadcnUI com TailwindCSS

Enquanto o Tailwind CSS é excepcional para a estilização utilitária, às vezes é desejável adicionar elementos de design mais complexos, ou que já tenham uma certa estilização pronta, para termos mais agilidade na criação de interfaces. É aqui que o ShadcnUI entra em cena. Este é um conjunto de componentes UI que podem ser facilmente integrados com o Tailwind, adicionando uma camada extra de estilo e interatividade.

Componentes Prontos para Uso: O ShadcnUI oferece uma variedade de componentes prontos para uso, como botões, cards e modais, que podem ser facilmente integrados a projetos ReactJS com Tailwind, apenas fazendo uma instalação do componente.
Estilo Elegante e Responsivo: Os componentes do ShadcnUI são projetados para serem elegantes e responsivos, complementando o estilo utilitário do Tailwind. Isso permite que os desenvolvedores alcancem uma estética visualmente atraente sem sacrificar a eficiência do desenvolvimento.
Tamanho do framework: O ShadcnUI não é igual ao MaterialUi, ou ChakraUI, que no momento da instalação já adiciona todos dos componentes disponíveis para usar. Nós fazemos a instalação apenas do componente que iremos usar, sendo totalmente customizável com as classes do tailwind. Isso eu vejo como uma grande vantagem.
```
npx shadcn-ui@latest add button
```

Conclusão

Ao escolher Tailwind CSS para estilização em projetos ReactJS, especialmente em conjunto com Next.js, os desenvolvedores podem alcançar uma eficiência e consistência notáveis. A adição do ShadcnUI oferece uma alternativa interessante para projetos que exigem componentes mais elaborados. Experimente essa combinação poderosa e impulsione seus projetos ReactJS para novos patamares de desenvolvimento eficiente e estilo envolvente.

Se quiserem um vídeo mostrando essas ferramentas, desde instalação até a utilização em projetos reais, deixem ai nos comentários. 😉

Links úteis

ShadcnUI: https://ui.shadcn.com/docs
Tailwind CSS: https://tailwindcss.com/docs/installation

Começando na programação em 2024

Andrey Araújo — Tue, 02 Jan 2024 23:53:26 +0000

A área da programação, apesar de suas promissoras oportunidades, não está isenta de desafios para aqueles que buscam iniciar suas carreiras. A crescente demanda por profissionais de tecnologia é evidente, mas o caminho até se tornar um programador competente pode ser íngreme e desafiador. Neste artigo, exploraremos as dificuldades enfrentadas pelos aspirantes a programadores, destacaremos o constante crescimento da indústria de tecnologia e ofereceremos dicas valiosas para superar as barreiras iniciais da carreira.

Os Desafios Iniciais na Jornada da Programação:

Abundância de Escolhas:
- A variedade de linguagens de programação, frameworks e tecnologias pode ser esmagadora para quem está começando. A escolha certa pode ser difícil, e a curva de aprendizado varia de uma linguagem para outra.
Autoconfiança e “Impostorismo”:
- Muitos novatos enfrentam dúvidas sobre suas habilidades e se veem como "impostores". A autoconfiança é um desafio contínuo, mesmo para programadores experientes. Tentar fugir da síndrome do impostor é uma coisa que fazemos sempre, não importa a senioridade. Então esteja ciente que isso vai andar lado a lado na sua jornada.
Experiência Prática Limitada:
- A teoria é crucial, mas a falta de experiência prática pode dificultar a aplicação do conhecimento em situações do mundo real, como resolver testes técnicos em entrevistas de empregos.

O Crescimento Exponencial da Área de Programação

Aqui podemos destacar três pontos, o primeiro é a demanda crescente por profissionais de TI. Onde empresas de todos os tamanhos estão buscando talentos para impulsionar sua presença digital. Empresas pequenas estão querendo se destacar ou alavancar cada vez mais no mundo digital e as grandes estão buscando números maiores ainda ou melhoria nos seus processos.

O segundo ponto é a diversidade de oportunidades, porque sabemos que a programação não se limita ao desenvolvimento de software. Áreas como ciência de dados, inteligência artificial, segurança cibernética oferecem uma gama diversificada de oportunidades.

E por último a inovação constante. A natureza dinâmica da tecnologia exige que os programadores estejam sempre atualizados. Novos frameworks, linguagens e metodologias surgem regularmente, impulsionando a inovação na indústria.

Dicas para Superar os Desafios Iniciais e Ingressar no Mercado:

Escolha com Sabedoria e Comece com o Básico:
- Inicie com uma linguagem amigável para iniciantes, como Python, e expanda gradualmente para outras à medida que ganha confiança.
Aproveite os Recursos Online:
- Utilize plataformas online, cursos e tutoriais para aprender a programar. Há uma infinidade de recursos gratuitos disponíveis.
Participe de Comunidades Online:
- Junte-se a fóruns e grupos de discussão. A comunidade de programadores é vasta e geralmente acolhedora para novatos.
Crie Projetos Práticos:
- A aplicação prática do conhecimento é fundamental. Comece com projetos simples e vá aumentando a complexidade à medida que avança.
Busque Mentoria:
- Ter um mentor pode ser inestimável. Procure orientação de programadores mais experientes para obter insights valiosos.
Não Tenha Medo de Errar:
- Os erros são oportunidades de aprendizado. Enfrente desafios, corrija seus erros e evolua constantemente.
Desenvolva Habilidades de Resolução de Problemas:
- A programação é, em sua essência, a resolução de problemas. Pratique a lógica de programação e trabalhe em projetos desafiadores.
Mantenha-se Atualizado e Esteja Aberto à Mudança:
- A tecnologia evolui rapidamente. Esteja disposto a aprender novas tecnologias e métodos de programação.

Conclusão:

Ingressar na área da programação pode ser desafiador, mas os benefícios a longo prazo são imensuráveis. Com dedicação, paciência e um compromisso contínuo com a aprendizagem, vocês podem superar as dificuldades iniciais e prosperar em um setor em constante expansão. Lembre-se de que o sucesso na programação é uma jornada, e cada linha de código é um passo em direção ao domínio das habilidades necessárias para se destacar no mundo digital.

Estrutura de dados - Coleções chaveadas

Andrey Araújo — Wed, 22 Mar 2023 00:56:44 +0000

Sabemos que todas as linguagens de programação tem estrutura de dados embutidas e que se diferem uma das outras. Meu objetivo aqui não vai ser explicar e mostrar o que são e como funcionam estrutura de dados em si, mas mostrar um tipo de estrutura de dados em Javascript que acredito que seja interessante conhecermos, por mais que no dia a dia quase sempre recorremos a outro tipo de estrutura de dados.

Map

Na estrutura Map, temos conjuntos de chave e valor, e o mais interessante aqui é que podemos ter qualquer tipo de valor para identificar essas chaves e valores.

O conjunto de valores é iterado por ordem de inserção, e quando fazemos uma iteração nessa estrutura, usando um loop, for...of por exemplo, é retornado um array de [chave, valor] para cada iteração.

Aqui já podemos perceber que os objetos são praticamente iguais aos Maps, e sempre optamos por usar objetos. Mas vou te mostrar algumas diferenças entre eles:

Tipos das chaves

As chaves do Map podem ser qualquer valor (incluindo funções, objetos, ou qualquer outro tipo primitivo).
A chave de um Objeto deve ser uma String ou um Symbol.

Iteração

Um Map é iterável, então ele pode ser diretamente iterável.
O Objeto não implementa o protocolo de iteração, e os objetos não podem ser iterados diretamente usando o for...of (por padrão).

Performance

O Map performa melhor em cenários envolvendo adições e remoções frequentes em pares chave-valor.
Já o Objeto não é otimizado para adições e remoções frequentes de pares chave-valor.

Definindo Maps

const contacts = new Map()
contacts.set('Andrey', {email: 'andreyaraujo.dev@gmail.com'})
contacts.get('Andrey') 
// {email: 'andreyaraujo.dev@gmail.com'}
contacts.has('Araújo') // false
console.log(contacts.size) // 1
contacts.delete('Andrey') // true

É bastante simples usar Maps, mas temos que ter cuidados com alguns pontos ao definirmos Maps e seus valores:

const contacts = new Map()
contacts['Andrey'] = {email: 'andreyaraujo.dev@gmail.com'}

Essa forma de definir propriedades não interage com a estrutura de dados do Map. Dessa forma é usada a implementação genérica do objeto. O valor 'Andrey' não é armazenado no Map para queries. Outras operações nos dados irão falhar.

contacts.has('Andrey') // false
contacts.delete('Andrey') // false

WeakMap

Da mesma forma que o Map, o WeakMap é um objeto com chave/valor, em que as chaves são fracamente referenciadas. Os valores podem ser de qualquer tipo, já as chaves tem que ser objetos.

A sua utilização é bem semelhante ao Map, mas podendo receber um Array ou outro objeto iterável cujos elementos são pares key-value.

const wm = new WeakMap()
wm.set({ name: 'andrey' }, { phone: 99999 })

Set

Objetos Set são coleções iteráveis, por ordem de inserção, que aceitam qualquer tipo de valor, desde que não se repitam. Na sua definição também podemos passar um objeto iterável, sem valores repetidos, onde todos esses valores são adicionados ao novo Set. Caso esse objeto iterável contenha itens repetidos, o novo objeto não terá esses objetos repetidos.

const mySet = new Set([1, 1, 2, 3]) // {1, 2, 3}

Comparando ao Array, o Set tem algumas facilidades, como busca, deleção de elementos, (.has, .delete) mas ainda tem funcionalidades bem básicas, o Array nos da muito mais opções como por exemplo, .reduce, .sort, .filter, etc.

Mas e porque usar o Set ao invés de Array ou objeto normal?
Como o Set contém apenas elementos distintos, deixa a vida muito mais fácil se soubermos antecipadamente que queremos evitar salvar dados duplicados em nossa estrutura.

WeakSet

Assim como no objeto Set, o WaekSet permite armazenar valores únicos. Também pode receber como parâmetro um objeto iterável. A diferença aqui é que no WeakSet, só podemos armazenar objetos, e não qualquer tipo de valor igual no Set. Aqui também as referências ao objetos na coleção são mantidos fracamente.

Conclusão

O Javascript nos da algumas opções para trabalhar com estrutura de dados, por mais que no dia a dia não sejam tão usadas, para cada caso elas tem sua utilidade e valor, cabe a nós analisar e ver onde cada uma se encaixa melhor.

Usando Docker e docker-composer no dia a dia

Andrey Araújo — Fri, 05 Mar 2021 22:40:24 +0000

Vou mostrar aqui apenas como se inicia um projeto em Node e Typescript, com Docker e banco de dados Postgres. Espero que o que tem aqui os inspire a ir em busca de mais conhecimento sobre o assunto.

Sumário

Iniciando o projeto

Para iniciar o projeto vou rodar o comando yarn init -y, caso esteja usando o npm é só trocar por npm init -y. Com isso vai ser criado o arquivo package.json.

Logo em seguida vamos instalar todas as dependências do projeto:

yarn add express
yarn add -D @types/express
yarn add -D typescript ts-node nodemon
yarn tsc —init (Para criar o arquivo tsconfig.json)

Com todas as dependências instaladas, agora vamos começar a codar.

Arquivos iniciais

Na raiz do seu projeto crie uma pasta chamada src e dentro dela crie dois arquivos, index.ts e routes.ts. No arquivo index.ts vamos ter o seguinte código:

// 1
import express from 'express';

// 2
import routes from './routes';

// 3
const app = express();

// 4
app.use(express.json());

// 5
app.use(routes);

// 6
app.listen(3000, () => console.log('🔥 Server started at http://localhost:3000'));

Importamos o express.
Importamos o arquivo de rotas.
Criamos uma variável chamada app e atribuímos a ela o módulo com funções do express.
Configuramos para que o app faça o parse do JSON.
Dizemos para o app usar o arquivo de rotas.
Dizemos para o app subir o servidor na porta 3000.

Agora vamos para o arquivo de rotas. No arquivo routes.ts coloque o seguinte código:

import { Router } from 'express';

const routes = Router();

routes.get('/', (req, res) => {
  res.send('Olá Mundo!');
});

export default routes;

Apenas criamos uma rota do tipo GET que devolve uma resposta "Olá Mundo!", sem muita complicação, aqui é moleza!

Por último, mas não menos importante, no arquivo package.json temos que inserir um script para subir a aplicação, então, coloque o seguinte código logo antes das declarações das dependências do projeto:

"scripts": {
  "dev": "npx nodemon --exec ts-node ./src/index.ts --ignore-watch node_modules"
},

Aqui estamos dizendo pro nodemon executar o ts-node partindo do arquivo index.ts ignorando a pasta node_modules. Nada de outro mundo aqui.

E para testar tudo no seu terminal, rode o comando yarn dev ou npm run dev, o resultado deve ser mais ou menos esse:

Criando o arquivo Dockerfile

Depois de ter criado a aplicação e testado, vamos criar o arquivo Dockerfile. Nesse arquivo vai conter apenas as configurações iniciais do projeto para criar nossa imagem, como por exemplo, versão do node.

Mas antes disso você sabe o que é o Dockerfile? Para que serve?

Dockerfile é o arquivo onde definimos as instruções para criar as nossas próprias imagens. Ele tem sua própria sintaxe com os seus respectivos comandos. Nele é como se tivesse uma receita de bolo, só que no nosso caso o bolo é a aplicação, é uma receita para criar nossa imagem da aplicação.

Para este exemplo vamos colocar o seguinte conteúdo no nosso arquivo:

FROM node:alpine

WORKDIR /usr/src/app

COPY package*.json ./

RUN yarn

COPY . .

EXPOSE 3000

CMD ["yarn", "dev"]

Vamos saber pra que serve cada instrução dessa.

FROM → De onde vai baixar a imagem que vamos utilizar, no caso vamos usar a ver alpine do node, que é uma versão mais simplificada.

WORKDIR → Define o diretório onde a aplicação vai ficar no disco do container, aqui você pode usar o diretório que preferir.

COPY → Copia tudo que começa com package e termina com .json para dentro da pasta /usr/src/app.

RUN → Executa o yarn ou npm install para adicionar as dependências do projeto e criar a pasta node_modules.

COPY → Copia tudo que está no diretório onde o arquivo Dockerfile está para dentro da pasta que definimos no WORKDIR.

EXPOSE → Expomos uma porta para o container ficar ouvindo os acessos.

CMD → Executa o comando yarn dev que está nos scripts do package.json para iniciar a aplicação. Aqui separamos todas as palavras por vírgula dentro de um array.

Crie um arquivo .dockerignore para ignorar algumas coisas, neste exemplo vamos adicionar a pasta node_modules para ser ignorada.

Agora para verificar se está tudo certo vamos rodar o comando:

docker build -t dockernode .

docker build cria uma imagem a partir do Dockerfile
-t é o nome da imagem
dockernode é o nome que escolhi para essa imagem
. é onde o Dockerfile está, o comando será executado no mesmo diretório que o Dockerfile se encontra.

Se a saída no terminal for algo semelhante a isso, deu tudo certo na criação da imagem:

Se você chegou até aqui sem nenhum erro, ótimo, mas ainda faltam algumas coisinhas. Até agora só criamos a imagem, falta criar o container. E para isso temos e executar o comando abaixo:

docker run -p 3000:3000 -d dockernode

docker run cria um container.
-p 3000:3000 libera a porta 3000 do container para que ele possa ouvir as requisições de fora acessando a porta 3000.
-d detach, o terminal fica livre e o processo roda em segundo plano. (Se você não passar essa tag você não conseguirá mais usar a aba do terminal, ficará travada mostrando o processo.)
dockernode o nome da imagem que estou usando para criar o container.

Rodando o comando será exibido o ID do container e executando no terminal docker ps será listado o processo em execução no Docker.

É interessante observar, a aplicação está rodando dentro do container do Docker, e não na nossa máquina local. Para acessar basta colocar no navegador [http://localhost:3000](http://localhost:3000) que será exibida a mensagem "Olá Mundo!"

O comando docker run só precisa ser executado uma vez para criar o container, para outras operações usamos: docker start <id do container> para iniciar, docker stop <id do container> para parar e docker logs <id do container> para ver os logs.

Docker Compose

Estamos chegando a última parte do nosso exemplo de uso de Dockerfile e Docker Compose, agora vamos ver o que é e como funciona o Docker Compose.

Basicamente o Docker compose é um orquestrador de containers no Docker. Ele vai definir como o container deve se comportar. Anteriormente no dockerfile definimos como a aplicação vai funcionar, o Docker compose vai fazer o banco de dados subir, a aplicação ficar no ar e se conectar com o banco de dados, neste exemplo, mas ele pode fazer muito mais.

Vou mostrar também um recurso muito legal que são os volumes, usamos eles para espelhar os arquivos do projeto na máquina local com o volume do container. Dessa forma toda vez que alterarmos qualquer arquivo na máquina local ele enviará para o container do Docker. (Para isso que instalamos o nodemon).

Mão na massa...

Na raiz do projeto crie o arquivo docker-compose.yml e dentro dele coloque o seguinte código:

version: "3"
services: 
  api:
    image: dockernode
    container_name: "app"
    ports: 
      - "3000:3000"
    links: 
      - link-db
    volumes: 
      - ./:/usr/src/app
  link-db:
    image: postgres
    container_name: "postgres"
    volumes: 
      - ./postgres:/var/lib/postgres
    ports: 
      - "5432:5432"
    environment: 
      - POSTGRES_USER=your_user
      - POSTGRES_DB=your_db
      - POSTGRES_PASSWORD=your_pass

version → Especifica a versão do docker-compose file.
services → Define um serviço.
api → Nome do serviço, aqui você pode colocar o nome que preferir.
image → imagem que o serviço vai usar.
container_name → Como o próprio nome diz, é o nome do container.
ports → Portas que serão usadas no host e no container.
links → Link para containers em outro serviço.
volumes → Diretório que usamos para espelhar, antes dos dois pontos é o diretório que vamos pegar os arquivos e depois dos dois pontos o diretório de destino, que vai ser o do container.
environment → Contém as variáveis de ambiente do banco de dados, aqui definimos o usuário, senha e banco de dados que a aplicação vai usar para se conectar com o banco de dados.

Aqui coloquei a pasta para os arquivos do banco de dados na mesma pasta do projeto, mas só como exemplo, você deve definir uma outra pasta para poder guardar esses arquivos do banco de dados. (Volumes do service link-db)

Antes de executar o comando do docker-compose vamos parar o container e excluí-lo.

Execute no terminal docker ps para conferir se o container está executando, pegue o ID do container e para parar o container rode o comando docker stop <id> e depois execute docker rm <id> para remover o container, por fim execute o comando abaixo para criar o container e subir o serviço:

docker-compose up

Pronto, ele vai iniciar o serviço fazendo build do projeto conforme o Dockerfile, liberar a porta 3000 e ficará monitorando a pasta do projeto a partir da rootDir e enviar para /usr/src/app.

Para parar o serviço tecle CTRL+C. Pode rodar com docker-compose up -d para rodar em background e liberar o terminal.

Agora sim tudo pronto, já temos o serviço sendo executado, e acessando http://localhost:3000 teremos "Olá Mundo" como retorno.

Usando variáveis de ambiente no docker compose

Um arquivo que nos ajuda e poupa um bom trabalho nos projetos é o arquivo .env , (eu espero que todos usem 😄), com ele definimos todas as variáveis de ambiente que nosso projeto usar, usuário de banco de dados, host, senha, por exemplo.

E como vimos anteriormente, no arquivo docker-compose.yml existem algumas dessas variáveis, mas setamos elas manualmente, isso pode expor dados sensíveis da nossa aplicação, já que esse arquivo fica exposto para todos. Na sessão de environment no banco de dados, vamos substituir algumas coisas. Então vamos lá.

Na raiz do projeto crie um arquivo chamado .env e nele coloque o seguinte código:

# Database
DB_USER=your_user
DB_NAME=your_db
DB_PASSWORD=your_password
DB_PORT=5432

São as mesmas variáveis que estão no arquivo docker-compose.yml, substitua os valores delas pelos seus dados.

No arquivo docker-compose.yml faça as seguinte alterações:

ports: 
  - "${DB_PORT}:5432"
environment: 
  - POSTGRES_USER=${DB_USER}
  - POSTGRES_DB=${DB_NAME}
  - POSTGRES_PASSWORD=${DB_PASSWORD}

Na parte do serviço do banco de dados, coloque os mesmos nomes das variáveis de ambiente que você definiu anteriormente.

Certo, mas como o arquivo do docker-compose.yml vai entender essas variáveis de ambiente se eu não tenho nenhuma configurada na minha máquina?

Para isso temos que criar um arquivo makefile, que vai criar essas variáveis pra gente e fazer com que o arquivo do docker entenda essas variáveis. E para subir a aplicação, ao invés de usar docker-compose up, vamos usar make up.

Então na raiz do seu projeto crie um arquivo chamado Makefile. Esse arquivo é bastante simples, não tem nada demais, apenas algumas instruções:

include .env

.PHONY: up

up:
    docker-compose up -d 

.PHONY: down

down:
    docker-compose down

.PHONY: logs

logs: 
    docker-compose logs -f

include vai incluir o arquivo .env e no escopo da execução o arquivo vai entender as variáveis de ambiente como se todas tivessem exportadas.
.PHONY força a criação de um rótulo.

Agora você pode executar o comando make up no terminal.

Pronto, acessando http://localhost:3000 no navegador você verá que a aplicação está no ar. E acessando o banco de dados com um aplicativo de sua preferência você verá que o banco de dados foi criado e também já está no ar.

Conclusão

Apesar desse app ter sido bem simples, as vantagens de usar o Docker são grandes, ainda mais quando começamos a usar mais de um banco de dados, vários serviços, e temos que trabalhar em equipe, todos com as mesmas versões e configurações do projeto.

Outra coisa que agrada bastante é que se formos apagar os containers e as imagens, não fica nenhum arquivo no nosso computador, aquele lixo na máquina.

Links úteis

gomex/docker-para-desenvolvedores

Docker e Docker Compose um guia para iniciantes.