Forem: Hosana Barcelos

Compiling 2025: My Professional Roadmap ✨

Hosana Barcelos — Mon, 27 Jan 2025 02:34:32 +0000

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

`C:hosana\journey\milestones> npm i 2025`

⚒️ Setting up the environment

The year 2025 has already started with some exciting news for me: I’m on vacation! For many people, this might not seem like big news, but for me, it’s one of the most significant milestones in my professional life, simply because I’ve never experienced taking time off work before—this is my very first time. As a lover of writing, I created a vacation journal to document what it feels like to experience each day away from work for the first time. I’m fascinated by the idea of reading these entries in the future. Taking advantage of this well-deserved rest, I’ve been focusing on my personal and professional goals in a relaxed and thoughtful way. During this time, I’ve been reflecting on and meditating on everything I hope to achieve this year: professional aspirations, interests, academic goals, and resources. I want to nourish myself with enriching content that will bring me closer to the professional I aspire to become.

`C:hosana\journey\milestones> npm run 2025`

🎯 Getting to work

So far, I’m focusing on the following items to achieve my main interests and goals:

Postgraduate Studies in Software Engineering: At the end of 2024, I started a postgraduate program in Software Engineering at UFRJ, and I want to absorb as much knowledge as possible from the course throughout 2025.
Systems Development: 2024 was the most active year of my software development career so far. I developed systems for areas such as aesthetics, financial markets, social networks, and more. Along the way, I identified key areas for improvement in my career as a developer, especially after earning a higher seniority role. This year, I want to strengthen best development practices to stand out within my stack.
Micro-SaaS: I began a course focused on micro-SaaS to better understand the market, and I want to complete the project I’m currently working on.
Automations: In 2024, I learned a lot about Atlassian products (especially Jira Software). I’ve realized how broad and comprehensive this tool is in daily use, and I want to further strengthen my skills by creating efficient automations that turn problems into productive ideas in practice.
Design System: I aim to continue developing a component library that I started last year. Depending on the outcome, I might revisit some steps I skipped during the process, including the entire Style Guide phase.
UX Writing: I’ve selected a UX Writing course offered by FIAP after actively contributing to documentation and tone-of-voice guidelines at work. I’ve always been passionate about writing, and I find it fascinating to contribute professionally using textual techniques, usability in texts, semantics, microcopy, and information architecture.
Agile Certification: After a long time working in leadership roles and delivering consistent, quality-focused results using Scrum, I plan to enroll in and earn a significant certification in the field of agile methodologies.

These are just a few (a preview) of my professional goals for 2025. In addition, I have personal goals that will help me face challenges with greater maturity.

`http://localhost:2025`

🚀 Focus on results

I have many goals and dreams for my career, and this will be another year where I’ll give my best to achieve everything I aspire to in the future as a technology professional.

Liked it? Connect with me through my social networks at: https://www.hosana.me.

🇧🇷

Esta é uma submissão para o Desafio de Escrita de Ano Novo 2025: Compilando 2025.

`C:hosana\journey\milestones> npm i 2025`

⚒️ Preparando o ambiente

O ano de 2025 já iniciou com novidades na minha vida: Estou de férias! Para muitas pessoas isso não é exatamente uma novidade, mas pra mim é uma das maiores novidades profissionais que já tive, simplesmente porque nunca soube o que era tirar férias do trabalho antes, é a primeira vez que posso fazer isso. E como uma boa amante de escrita, criei um diário de férias para deixar registrado sobre como foi viver cada dia durante a primeira vez que fiquei offline do trabalho, sou fascinada na ideia de pegar essas escritas para ler no futuro. Aproveitando esse bom tempo de descanso, tenho focado nos meus objetivos pessoais e profissionais de forma leve. Durante esse tempo, tenho me dedicado em entender e meditar em tudo o que espero para esse ano. Objetivos profissionais, interesses, objetivos acadêmicos, recursos... Quero me nutrir de muito conteúdo que me aproxime cada vez mais da profissional que desejo ser.

`C:hosana\journey\milestones> npm run 2025`

🎯 Colocando a mão na massa

Até o presente momento, estou buscando me concentrar nos itens abaixo para alcançar meus interesses e objetivos principais:

Pós-graduação em Engenharia de Software: Ao final do ano de 2024 dei início à Pós-graduação de Engenharia de Software pela UFRJ e quero absorver o máximo de conteúdo do curso em 2025.
Desenvolvimento de Sistemas: 2024 foi o ano mais ativo em desenvolvimento de software da minha carreira até o momento. Desenvolvi sistemas para a área de estética, mercado financeiro, redes sociais, entre outros. Durante esse longo caminho, pude coletar principais pontos de melhoria na minha carreira como desenvolvedora, principalmente por conquistar um cargo de senioridade maior. A partir disso, neste ano, quero fortalecer boas práticas de desenvolvimento para me destacar dentro da minha stack.
Micro-SaaS: Iniciei um curso focado em micro-saas para entender mais sobre o mercado e quero finalizar o projeto que estou desenvolvendo.
Automações: Em 2024 aprendi muito sobre os produtos da Atlassian (em especial o Jira Software). No dia a dia percebo que é uma ferramenta extremamente ampla e completa, quero fortalecer mais ainda minhas habilidades realizando automações eficientes e que transformam problemas em ideias produtivas na prática.
Design System: Desejo continuar implementando uma biblioteca de componentes que comecei a desenvolver no ano passado. Dependendo do resultado, poderei dar atenção para algumas etapas que pulei durante o desenvolvimento que consiste em toda a parte de Style Guide.
UX Writing: Separei o curso de UX Writing oferecido pela FIAP depois de ter colaborado ativamente em documentações e manual de tom e voz no ambiente de trabalho. Mergulho no universo da escrita desde sempre e acho fantástico poder colaborar profissionalmente com técnicas textuais, usabilidade em textos, semântica, microrredação e arquitetura da informação.
Certificação Ágil: Após muito tempo trabalhando em posição de liderança e entregas consistentes com foco em qualidade utilizando o Scrum, desejo realizar minha inscrição para tirar uma certificação importante no mundo das metodologias.

Esses são alguns (uma prévia) dos meus objetivos profissionais para 2025. Além deles, possuo metas pessoais que possam me ajudar a enfrentar os desafios com mais maturidade.

`http://localhost:2025`

🚀 Foco em resultado

Tenho muitos objetivos e sonhos para minha carreira e será mais um ano em que darei o meu melhor para alcançar tudo o que almejo no futuro como uma profissional de tecnologia.

Curtiu? Se conecte comigo onde preferir acessando minhas redes em: https://www.hosana.me.

Alien game: traveling through space in a flying saucer 👽🛸🚀

Hosana Barcelos — Sun, 22 Sep 2024 21:18:10 +0000

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

An alien who needs to dodge obstacles to travel in their flying saucer.

Demo

Game: https://aliengame-ten.vercel.app
Repository: https://github.com/hosanabarcelos/alien-game

Journey

A game inspired by the famous dinosaur game that shows up when we're offline. It was fun to think of items that could fit into the scenario because I'm a big fan of aliens hahaha. Additionally, I really enjoyed choosing sounds to add to the logic of my game while I was working through some bugs.

MIT License.

Liked it? Connect with me through my social networks at: https://www.hosana.me.

GitHub Foundations certification is now free!💲

Hosana Barcelos — Tue, 17 Sep 2024 21:44:49 +0000

Verified students on GitHub Education can now take the GitHub Foundations certification exam for free!

What's New?

You read that correctly at the beginning of this article! GitHub certifications were costing US$99 earlier this year, but starting today (09/17/2024), those who wish to pursue an official GitHub Foundations certification can do so at no cost.

What Do You Need?

Be a Verified Student

You need to be a verified student at GitHub Education.
GitHub verifies this to confirm that you are a student. They require candidates to use a school or university-issued email address to register.

Have Two-Factor Authentication Enabled on Your GitHub Account

Your GitHub account must have two-factor authentication enabled to access this benefit. Just log in to your account, go to settings and enable 2FA authentication at Password and authentication.

What Content Should You Know?

The exam tests basic skills with fundamental GitHub concepts such as repositories, commits, branches, markdowns, and project management. You should be familiar with:

Introduction to Git and GitHub
GitHub Repositories
Contributor Features
Modern Development
Project Management
Privacy, Security, and Administration
GitHub Community Benefits

How to Register for the Exam?

Go to https://education.github.com/experiences/foundations_certificate or step-by-step instructions on taking the exam:

Introduction Video: Watch the video available at https://youtu.be/M3IZLIvr7GA.
Certification Study Guide: Access the study guide at https://github.com/LadyKerr/github-certification-guide/blob/main/study-guides/gh-foundations.md.
Resource Repository: Access the repository with guides and resources to help you prepare at https://github.com/LadyKerr/github-certification-guide
⭐️ Register for the Exam: After reviewing all the guides and resources and feeling prepared, register at https://examregistration.github.com/certification/GHF

Cost

Remember, this exam will be free if you are a verified student. Although you might see a $99 fee on the screen, GitHub makes it clear that a voucher will be applied during checkout, reducing the cost to $0. See below:

Credly Badge and Certification

After completing the exam, you will receive a #Credly badge to showcase your skills, a badge for completing specific courses or certifications. This acts as a digital proof of your achievements.

So, will you take advantage of this opportunity?

Liked it? Connect with me through my social networks at: https://www.hosana.me.

🇧🇷

Os alunos verificados na GitHub Education agora podem fazer o exame de certificação da GitHub Foundations de forma gratuita!

Qual a novidade?

É isso mesmo que você leu no início desse artigo! As certificações da GitHub estavam custando US$99 no início do ano, mas a partir de hoje (17/09/2024) quem quiser se aventurar em busca de uma certificação oficial da GitHub Foundations, poderá fazer isso gratuitamente.

O que precisa?

Ser um estudante verificado

Você precisa ser um aluno verificado em GitHub Education.
O GitHub faz essa verificação para confirmar que você é um estudante. Sendo assim, exigem que os candidatos usem um endereço de e-mail emitido pela escola ou universidade para se inscrever.

Ter sua conta do GitHub com 2FA habilitada

Sua conta do GitHub deve ter a autenticação de dois fatores habilitada para ter acesso ao benefício. Basta fazer login na sua conta, acessar as configurações e habilitar a autenticação 2FA em Senha e autenticação.

Qual conteúdo você deve saber?

A prova mede habilidades de nível básico com noções básicas do GitHub, como repositórios, commits, ramificações, markdowns e gerenciamento de projetos. Então é esperado que você saiba como funciona:

Introdução ao Git e GitHub
Repositórios do GitHub
Recursos de colaborador
Desenvolvimento moderno
Gerenciamento de projetos
Privacidade, Segurança e Administração
Benefícios da Comunidade GitHub

Como me inscrever para a prova?

Em https://education.github.com/experiences/foundations_certificate há o passo a passo de como realizar o exame, que é:

Vídeo de apresentação: Veja o vídeo disponível em https://youtu.be/M3IZLIvr7GA.
Guia de estudo para a certificação: Acesse o guia de estudo em https://github.com/LadyKerr/github-certification-guide/blob/main/study-guides/gh-foundations.md.
Repositório de recursos: Acesse o repositório com guias e recursos que te ajudarão a se preparar em: https://github.com/LadyKerr/github-certification-guide
⭐️ Cadastrar-se para a prova: Depois de revisar todos os guias e recursos e se sentir preparado, se registre em: https://examregistration.github.com/certification/GHF

Valor

Lembre-se, essa prova não terá custos se você for um estudante verificado. Por mais que você veja o valor de US$99 em tela, o GitHub deixa claro que o voucher será aplicado durante a finalização da compra e o valor se reduz a US$0. Observe:

Selo Credly e Certificação

Depois de concluir a prova, você ganhará um selo #Credly para mostrar suas habilidades, um selo para quem completa cursos ou certificações específicas. Isso funciona como uma prova digital para fornecer suas conquistas.

E aí, vai aproveitar essa oportunidade?

Curtiu? Se conecte comigo onde preferir acessando minhas redes em: https://www.hosana.me.

Purple Theme space animation with Saturn planet 🪐🌠👾

Hosana Barcelos — Wed, 11 Sep 2024 16:14:34 +0000

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

A space-themed project in purple, inspired by my website hosana.me, created for the Frontend Challenge. It features a space background with subtle animation and a Saturn-like planet.

Demo

Code and result on CodePen.

Journey

The idea behind the project for the Challenge:

A simple project that came to mind as soon as I saw the Challenge, since this time the theme is space. Not only do I really like this theme, but my portfolio website also has a complete space vibe. Combining both resulted in the project shown above. The smooth CSS animation on the orbit surprised me because I realized it was much simpler than I thought.

Inspiration Website:

None other than my portfolio website.

Liked it? Connect with me through my social networks at: https://www.hosana.me.

Clean Code: Exerça a habilidade de escrever código simples e eficiente🔥

Hosana Barcelos — Sun, 08 Sep 2024 18:41:58 +0000

Hoje eu trago alguns métodos e técnicas simples de Clean Code, mas que fazem toda a diferença na hora de escrevermos nosso código.

O que veremos?

Você vai acompanhar comigo:

Código limpo? O que é isso?
Funções
Nomes significativos
Comentários
Formatação
Benefícios
Dicas

Código limpo? O que é isso?

Resumidamente, Clean Code é uma filosofia de desenvolvimento de software que auxilia programadores a aplicarem técnicas e métodos simples ao escrever código. Se você é programador, provavelmente já se deparou com códigos de difícil compreensão que acabaram dificultando e atrasando seu trabalho. Essas técnicas tem como objetivo facilitar a escrita, leitura e compreensão tanto de quem escreveu o código, quanto de quem possa pegá-lo no futuro.

“…escrever um código limpo é como pintar um quadro. A maioria de nós sabe quando a figura foi bem ou mal pintada.

Mas ser capaz de distinguir uma boa arte de uma ruim não significa que você saiba pintar.

Assim como distinguir um código limpo de um ruim não quer dizer que saibamos escrever um código limpo.”

Livro Clean Code — Página 6

Se preferir, você pode entender mais sobre a definição de Clean Code aqui. A seguir, veremos algumas técnicas de Clean Code na prática.

Funções

Usar responsabilidade única

É uma boa prática criar funções com responsabilidade única. Abaixo é possível visualizar um exemplo simples de uma função que faz soma, subtração e exibe o resultado, tudo em um mesmo lugar:

❌ Exemplo de código sujo:

function calculateAndDisplay(a, b, operation) {
  let result;

  if (operation === 'sum') {
    result = a + b;
  } else if (operation === 'subtract') {
    result = a - b;
  }

  DisplayResult(result);
}

function DisplayResult(result) {
  console.log('O resultado é: ' + result);
}

Essa implementação pode ser aprimorada se mantermos uma responsabilidade única para cada função. Vamos ver como ficaria fazendo o uso de Clean Code? Se liga:

✅ Exemplo de código limpo:

function DisplayResult(result) {
  console.log('O resultado é: ' + result);
}

function sum(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

const totalSum = sum(3, 7);
DisplayResult(totalSum);

const totalSubtract = subtract(3, 7);
DisplayResult(totalSubtract);

Se ligou? Agora vemos que separamos as responsabilidades, fizemos reutilização de código, usamos flexibilidade pois podemos facilmente adicionar novas operações criando novas funções, sem alterar o código existente, o que segue o princípio "aberto para extensão, fechado para modificação" e além disso, fazemos o bom uso de menor complexidade condicional.

A primeira versão usa condicionais (if e else if) para determinar a operação, o que adiciona um pouco mais de complexidade, né? Já na segunda versão, cada operação é isolada, e o código que chama essas operações (totalSum e totalSubtract) é simples e direto, sem necessidade de lógica condicional.

Usar técnicas para nomes de funções

VERBO + PALAVRA-CHAVE

Essa técnica é ideal para deixar nomes de funções mais claras e explicativas. Vejamos alguns exemplos:

sendEmail();
removeUser();
createNewUser();
createPdfTicket();
updateUserProfile();

Evitar repetições

Quem trabalha com programação sabe que quando percebe-se que um código está grande demais, significa que algo dá pra ser melhorado (refatorado). Nesse caso, muitas vezes acabamos repetindo códigos que poderiam ser aproveitados em outros lugares. Vejamos um exemplo prático:

❌ Exemplo de código sujo e repetitivo:

function calculateArea(width, height) {
    if (width <= 0) {
        throw new Error('Width must be positive.');
    }
    if (height <= 0) {
        throw new Error('Height must be positive.');
    }
    return width * height;
}

✅ Exemplo de código limpo:

function validatePositive(value, name) {
    if (value <= 0) {
        throw new Error(`${name} must be positive.`);
    }
}

function calculateArea(width, height) {
    validatePositive(width, 'width');
    validatePositive(height, 'height');
    return width * height;
}

Observe que o valor recebido pela condicional, possui a mesma regra de validação. Com isso, não é necessário criarmos duas regras de validação para que tudo ocorra como o esperado e ainda conseguimos manter a função clara. Essa refatoração torna o código mais modular e reutilizável, eliminando a necessidade de repetir a verificação em diferentes partes do código. Massa, né?

Nomes significativos

Responder questões para definir um nome

Uma boa técnica para se pensar na hora de definir um nome para variáveis, funções e etc, é usar a habilidade de descrição. Pense:

Por que existe? O que faz? Como é usado?

Responder essas três questões pode ajudar o programador a definir um nome significativo e que esteja claro para quem pegar esse código no futuro. Por exemplo:

❌ Exemplo de nome não significativo:

const d = 25; // tempo decorrido em dias

Sabemos que é uma boa prática evitar comentários no código. Esse exemplo acima mostra que mesmo recebendo um comentário, essa variável não possui um nome significativo. Porque esse tempo existe? O que esse tempo faz? Como esse tempo é usado? A getnte não faz ideia!

Agora veja alguns exemplos de nomes significativos parecidos com o objetivo do exemplo anterior:

✅ Exemplo de nomes significativos:

const daysSinceAccountCreation = 25;
const daysSinceLastPostModification = 25;
const daysSinceLastLogin = 25;

Vamos pegar a primeira variável e usar a técnica de responder as três questões:

-> Por que existe? Para saber há quanto tempo a conta existe.
-> O que faz? Exibe a quantidade de dias desde a criação de conta.
-> Como é usado? Pode ser usado como um campo de exibição na seção de informações da conta, por exemplo.

Agora ficou mais simples e claro, não é?

Não usar números mágicos

Como programadora, por diversas vezes me deparei com números em que eu não fazia ideia do porquê existiam. A função existe, funciona perfeitamente e tudo ocorre como o esperado. Mas por que é esperado esse tal número? Ou por que não é esperado esse tal número? Vejamos um exemplo prático:

❌ Exemplo de uso de número mágico:

if (new Date().getHours() > 18) {
    console.log('Atendimento indisponível.');
}

A cafeteria fecha às 18h. Após esse horário, atendimentos não são mais realizados na loja. Podemos transformar essa informação em código, usando Clean Code:

✅ Exemplo de código limpo sem uso de número mágico:

const currentHour = new Date().getHours();
const closingHour = 18;

if (currentHour > closingHour) {
    console.log('Atendimento indisponível.');
}

Agora é explícito para qualquer reviewer que esse número 18 presente no código, é equivalente ao horário de fechamento da loja.

Evitar informações confusas

❌ Exemplo de informação confusa:

const userList = {
    groupName: 'Admin',
    users: ['user01', 'user02'],
};

Essa variável faria mais sentido se estivesse recebendo diretamente um array com TODOS os tipos de usuários, concorda? Esse nome pode acabar causando confusão, pois o objeto retorna apenas usuários do tipo Admin.

✅ Exemplo de informação clara:

const adminUserGroup = {
    groupName: 'Admin',
    users: ['user01', 'user02'],
};

Agora fica claro que o uso dessa variável retorna apenas usuários do tipo Admin.

Fazer distinção significativa

❌ Exemplo de distinção suja:

getActiveAccount();
getActiveAccounts();

Se você é programador ou programadora, muito provavelmente já teve problemas com um ponto e vírgula pelo menos alguma vez na vida. Dá pra compararmos um ponto e vírgula com esse exemplo acima. A letra S ao final da função, pode causar um erro difícil de ser percebido rapidamente, atrasando todo o trabalho do programador.

A partir disso, é importante lembrarmos de fazer distinção significativa ao escrever código que tenha funções diferentes mas no mesmo contexto:

✅ Exemplo de distinção significativa:

getActiveAccount();
getAllActiveAccounts();

Comentários

Nome claro >>>>>>> comentários

O que você quer escrever no comentário? Por que não dizer a mesma coisa em nome de funções ou variáveis? Sempre que sentir a necessidade de fazer um comentário, tente fazer isso.

Comente só o necessário

Muitos comentários poluem e confundem o código. Não comente o óbvio.

Comentários absoletos

O código evolui com o tempo, mas nem sempre os comentários são atualizados. Ao surgir necessidade de deixar um comentário no código, é importante lembrarmos de atualizá-lo também.

Não usar como versionamento

EXCLUIR código não usado ao invés de comentar, é uma boa prática. Já me deparei com alguns colegas dizendo:

Mas iremos usar no futuro.
É muito simples, não foi trabalho a mais e a gente pode precisar depois.

Já temos o versionamento com GIT para nos ajudar nisso, não é? Ao precisar desse código, é só consultarmos nosso código em versões passadas. Sendo assim, sempre que o código não estiver sendo mais usado, exclua-o.

Formatação

Lembre-se de três pontos importantes:

Padronização
Consistência
Definição do time

Padronização

Escolher um estilo de indentação, ponto e vírgula, aspas simples ou dupla, idioma e etc.

Consistência

Ser consistente no código, traz facilidade aos desenvolvedores para identificar a estrutura e a lógica do código.

Definição do time

É uma boa prática seguir o que for decidido pelo time, mesmo se não for a sua preferência pessoal. Algumas vezes já aderi à formatações específicas de um framework, mesmo preferindo outro tipo de formatação.

Dentro de um time, em ambiente de trabalho, não é diferente. Por isso, é importante que o time faça uma definição de formatação que faça sentido para os projetos em que estiverem trabalhando. Todos do time devem seguir esse padrão definido.

Benefícios

"E pra que eu vou usar Clean Code no dia a dia, Hosana?" Se você não quiser ter facilidade na manutenção do seu código, melhorar a legibilidade dele, previnir erros, aumentar sua produtividade, facilitar os testes e aumentar a qualidade, nem precisa usar mesmo. :D

Dicas adicionais

Revise seu próprio código antes de entregar a tarefa, torne isso um hábito como parte do esforço que você vai ter nela.
Pense antes de nomear e exerça a habilidade de descrição. Como você explicaria o que está acontecendo no código para outra pessoa?
Faça o uso de ferramentas que facilitam a padronização, como: ESLint e Prettier.
Exerça refatoração. Deixe o código sempre mais limpo do que quando encontrou, sempre que possível.
Livro sobre Clean Code em português disponível para compra na Amazon.

Curtiu? Se conecte comigo onde preferir acessando minhas redes em: https://www.hosana.me.

Como rodar seu projeto Nuxt em um container Docker? 🐳

Hosana Barcelos — Sat, 31 Aug 2024 16:09:00 +0000

Oi! Nesse guia, vou te mostrar como é bem simples e rápido dockerizar uma aplicação Nuxt. Bora lá?

Nuxt

O objetivo e foco desse guia é entender como podemos adicionar um projeto Nuxt dentro de um container Docker. Inicialmente, para criar e rodar o seu projeto Nuxt, consulte a documentação oficial do Nuxt.

Docker

O arquivo YAML

Na raiz do seu projeto Nuxt, precisamos criar um arquivo YAML chamado docker-compose.yml.

Dentro desse arquivo, iremos adicionar nossa configuração para dockerizar a nossa aplicação. Abaixo, você consegue visualizar como ficou o meu arquivo de configuração:

version: '3'

services:
  app:
    image: node:14.18.2-buster-slim
    container_name: docnux
    volumes:
      - .:/var/www/html
    working_dir: /var/www/html
    stdin_open: true
    tty: true
    ports:
      - 3007:3000

Você pode usar essa configuração para o seu projeto também, mas é importante entender o que cada carinha presente nesse arquivo faz:

version→ Versão do docker-compose que você quer utilizar;

services→ Instanciar os serviços (containers) que você quer subir;

app→ Nome do serviço;

image→ Declara a imagem que vai ser utilizada para subir o container em questão (é possível pegar essa imagem em https://hub.docker.com/search?image_filter=official&type=image&q=);

container_name → Declara o nome do container (para não gerar um aleatório);

volumes → Atrelar diretórios de fora do container (ou seja, na sua máquina) para algum diretório dentro do container (diretório de fora : diretório de dentro)

working_dir → Diretório de entrada a partir do momento em que o container é inicializado;

stdin_open → Quando true, permite que a entrada padrão de dados (standard input ou stdin) esteja "aberta". Isso serve para poder rodar o container interativo, ou seja, você poderá acessar o seu shell, executar comandos e etc;

tty → (TeleTypeWriter);

ports → Expor portas para uso posterior. Nesse contexto, podemos atrelar portas de fora do container à portas de dentro do container (porta de fora : porta de dentro).

Subindo nosso container Docker

Após definir as configurações do seu container, basta executar o seguinte comando:

docker-compose up -d

Se a mensagem no terminal retornar …done significa que seu container foi upado e está pronto!

Usando nosso projeto Nuxt com Docker

Agora, para rodar comandos dentro do container, é necessário seguir o padrão de comando:

docker-compose exec <nome do serviço> <comando>

Para a nossa aplicação Nuxt, podemos rodar dois comandos iniciais:

docker-compose exec app npm i

docker-compose exec app npm run dev

Repare, o docker-compose executa os comandos do Nuxt dentro do meu serviço nomeado como app, assim como vimos na criação do YAML.

Pronto! Você pode visualizar a aplicação no navegador em http://localhost:3007 e agora seu projeto Nuxt está dockerizado. Massa, né? 🚀

Lembre-se: Esse guia é produzido de maneira rápida e objetiva. Para saber mais sobre imagens e qual escolher ou usar no seu container, consulte a documentação oficial do Docker Hub.

Curtiu? Se conecte comigo onde preferir acessando minhas redes em: https://www.hosana.me.