Desenvolvimento Web com Laravel, Breeze, Fortify e Tailwind — Parte 2: Criando o Projeto e Instalando o Laravel Breeze

Por

Projeto Laravel com Breeze: Dando sequência à nossa série sobre desenvolvimento web com Laravel 12 + Breeze + Fortify + Tailwind CSS + Alpine.js + Vite, neste segundo artigo vamos colocar a mão na massa.

Aqui você aprenderá como:

  • Iniciar o Laragon corretamente
  • Entender a organização da pasta de projetos do Laragon
  • Criar o projeto Laravel
  • Instalar e configurar o Laravel Breeze, que nos fornecerá a autenticação inicial do sistema

⚠️ Lembrete: Este artigo assume que seu ambiente de desenvolvimento já está operacional, conforme detalhamos na Parte 1.

🖥️ Como Iniciar o Laragon (Se Não Está Configurado para Abrir Automaticamente)

Se, durante a instalação, você não habilitou a opção de iniciar o Laragon junto com o Windows, não se preocupe — é bem simples fazer manualmente:

  1. Acesse o atalho do Laragon na sua área de trabalho ou menu iniciar.
  2. Clique duas vezes para abrir.
  3. Na interface do Laragon, clique em “Start All” ou “Iniciar Tudo”, que ativará todos os serviços necessários (Apache/Nginx, MySQL, etc.).

✅ Dica: Para não precisar fazer isso toda vez, você pode marcar a opção ‘Iniciar todos os serviços na inicialização do Windows‘ no menu ‘Menu → Preferências → Geral‘.

Projeto Laravel com Breeze: Laragon - Painel de Controle

📂 Entendendo o Root do Laragon: C:\laragon\www

Por padrão, o Laragon define a pasta C:\laragon\www como o root dos projetos. Isso significa que:

  • Sempre que você criar uma nova pasta dentro desse diretório, o Laragon reconhecerá como um site local automaticamente.
  • Se você criar, por exemplo, a pasta “taskmanager” dentro de C:\laragon\www, ela será acessível no navegador como: http://taskmanager.test

Esse recurso é possível graças ao Auto Virtual Host do Laragon, que gera automaticamente domínios locais para cada projeto. (Leia: Auto Virtual Host no Laragon: O Que É, Como Funciona e Por Que Usar no Desenvolvimento Web)

🚀 🏗️ Passo 1: Criar o Projeto Laravel

Com o Laragon iniciado e funcional, abra o terminal:

  • Você pode usar o terminal integrado do Laragon (Menu → Terminal)
  • Ou qualquer terminal do Windows (CMD, PowerShell, Windows Terminal) – desde que configurado o PATH do Windows.

Execute o comando abaixo dentro da pasta C:\laragon\www (ou certifique-se de que o terminal esteja aberto nessa pasta):

composer create-project laravel/laravel taskmanager

Este comando criará uma nova pasta chamada “taskmanager” com toda a estrutura do Laravel.

Terminal Laragon - Iniciando o Projeto

Entre no diretório do projeto:

cd taskmanager

Atualize o .env com o nome e a URL da aplicação:

APP_NAME=TaskManager
...
...
APP_URL=http://taskmanager.test

🎨 Passo 2: Instalar o Laravel Breeze

O Breeze é um pacote oficial do Laravel que fornece um sistema de autenticação básico, incluindo:

  • Login
  • Registro
  • Esqueci minha senha
  • Verificação de e-mail
  • Perfil (Profile)

🔸 Instalar o Pacote Breeze:

Execute (na pasta de seu projeto):

composer require laravel/breeze

Esse comando, apenas instala o pacote Breeze no seu projeto, ou seja, ele adiciona o código fonte do Breeze na pasta: “vendor/laravel/breeze”.

Terminal Laragon - Instalando o Breeze

🔸 Instalar o Blade (Interface Padrão do Laravel):

Depois de instalar o Breeze, o próximo passo é gerar a estrutura básica de autenticação do projeto.

Isso é feito com o comando:

php artisan breeze:install blade

✅ Esse comando faz com que o Laravel crie, de forma automática, as telas, rotas e arquivos necessários para o sistema de autenticação, como:

  • Login
  • Cadastro
  • Recuperação de senha
  • Verificação de e-mail

Além disso, ao escolher a opção Blade, você está definindo que o Laravel irá usar seu sistema nativo de templates para montar a interface do sistema.

Terminal Laragon - Instalando o Blade

➡️ Isso deixa o frontend mais simples, leve e fácil de trabalhar, sem precisar usar frameworks de JavaScript como React ou Vue.

🗄️ Passo 3: Rodar as Migrations (Banco de Dados)

Agora, configure seu banco de dados no arquivo .env, normalmente assim:

Entende-se aqui que você já tem o banco de dados “taskmanager” criado no Laragon. Para detalhes, veja a nota desse artigo “Como criar um banco de dados no Laragon via HeidiSQL“.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=meusistema
DB_USERNAME=root
DB_PASSWORD=

🔸 O usuário padrão do Laragon é root e a senha normalmente fica em branco.

Depois execute:

php artisan migrate

Isso irá criar todas as tabelas básicas necessárias, incluindo:

  • users
  • password_resets
  • failed_jobs
  • migrations
  • personal_access_tokens

Você deverá obter como resultado, algo como:

Terminal Laragon - Migrations

Importante: Após criar um novo projeto no Laragon, reinicie o Apache para que o Laragon reconheça corretamente o domínio local (ex.: http://taskmanager.test) e aponte diretamente para a pasta /public do Laravel, evitando problemas de carregamento ou exibição do índice de arquivos no navegador.

🏗️ Passo 4: Instalar Dependências de Frontend

O Laravel Breeze, assim como outras soluções modernas, utiliza o Vite como ferramenta para processar os arquivos de CSS e JavaScript, além de fornecer recursos como hot reload durante o desenvolvimento e otimização dos arquivos para produção.

Por isso, é necessário instalar as dependências do frontend que incluem:

  • Vite: responsável pelo empacotamento e desenvolvimento dos assets.
  • Tailwind CSS: framework CSS utilitário usado na construção da interface.
  • Alpine.js: biblioteca JavaScript leve para interatividade no frontend.
  • E outras dependências necessárias para o funcionamento do ambiente frontend.

Execute no terminal (na pasta de seu projeto):

npm install

Esse comando cria a pasta node_modules/ e baixa todas as dependências definidas no arquivo package.json, preparando seu ambiente para rodar o Vite e processar os arquivos CSS, JS, fontes e outros.

🔥 Passo 5: Rodar o Build de Desenvolvimento

Para processar os arquivos CSS, JS e fazer o hot reload durante o desenvolvimento, execute:

npm run dev

Nota: O Laravel funciona normalmente após npm install porque já vem com os arquivos de CSS e JS pré-compilados na pasta public/build. Por isso, não é obrigatório rodar npm run dev imediatamente. No entanto, sempre que você fizer alterações no CSS, JavaScript ou adicionar novas dependências no frontend, será necessário rodar npm run dev ou npm run build para gerar os arquivos atualizados.

✅ Este comando mantém o Vite rodando em modo de desenvolvimento. Toda vez que você alterar um arquivo CSS ou JS, ele será recompilado automaticamente.

Hot reload é um recurso que atualiza automaticamente o navegador sempre que você salva alterações nos arquivos de CSS, JavaScript ou frontend, eliminando a necessidade de recarregar a página manualmente durante o desenvolvimento.

✅ Resultado Até Aqui

Se você acessar http://taskmanager.test no navegador (com o Laragon rodando), verá sua aplicação Laravel já funcionando, com:

  • Página inicial padrão do Laravel
  • Sistema de autenticação básico pronto:
    • Tela de Login
    • Tela de Registro
    • Esqueci minha senha
    • Verificação de e-mail (ativada por padrão)
    • Perfil (Profile)
Tela padrão do Laravel após criar um novo projeto

Sua base está pronta para começarmos a construir as próximas funcionalidades, incluindo:

  • Autenticação avançada com 2FA (dois fatores)
  • Dashboard funcional
  • CRUD completo

🎯 Conclusão

Neste segundo artigo da série, configuramos com sucesso um projeto Laravel do zero, adicionamos autenticação básica via Breeze, preparamos o ambiente frontend com Vite, Tailwind CSS e Alpine.js, e conectamos ao banco MySQL para rodar as migrations.

🔗 Leitura recomendada: Desenvolvimento Web com Laravel, Breeze, Fortify e Tailwind — Parte 1: Ambiente de Desenvolvimento e Visão do Projeto.

No próximo artigo, vamos avançar na implementação da autenticação avançada, configurando o Laravel Fortify com 2FA, além de melhorias na gestão de perfil de usuário.

Notas:

✅ Como criar um banco de dados no Laragon via HeidiSQL

No Laragon, a forma mais prática de criar um banco de dados é utilizando o HeidiSQL, que já vem integrado e pré-configurado.

Embora também seja possível fazer isso via phpMyAdmin, é importante destacar que o phpMyAdmin não vem instalado por padrão no Laragon — ao tentar acessá-lo, o Laragon apenas redireciona para um post no fórum com instruções para instalação manual.

🏗️ Passo a passo para criar um banco de dados no Laragon usando HeidiSQL:

  1. No painel do Laragon, acesse:
    ➡️ Menu > MySQL > Criar banco de dados…
  2. Na janela que abrir:
    • Digite o nome do banco de dados.
    • Clique em OK.
  3. O banco será criado automaticamente na conexão padrão do HeidiSQL:
    ➡️ Laragon.MySQL
  4. Para visualizar e gerenciar esse banco:
    • Acesse: Menu > MySQL > HeidiSQL.
    • Será aberta a conexão padrão (Laragon.MySQL), onde você pode consultar:
      • Host: (geralmente 127.0.0.1)
      • Usuário: root
      • Senha: (normalmente vazia, a menos que tenha sido alterada)
      • Porta: (geralmente 3306)
  5. Na lista de bancos de dados que aparece no painel direito do HeidiSQL, você verá o banco recém-criado e poderá começar a criar tabelas, executar consultas SQL e gerenciar os dados.

ℹ️ Observação importante:

Embora exista a opção phpMyAdmin no menu do Laragon, ela não vem instalada por padrão. Ao selecioná-la, você será redirecionado para o fórum oficial do Laragon, onde estão as instruções para realizar a instalação manual do phpMyAdmin.