Como criar um ambiente de desenvolvimento Laravel + Vite + Tailwind + Alphine.js

Sabe-se que toda questão de automação é crucial para todo desenvolvedor, e se descolar de métodos ou ferramentas que aumentam sua produtividade é pedir para ficar de fora do grupo de profissionais qualificados para o mercado de programação. Pois bem, nessa postagem vou mostrar o passo a passo de como eu crio o meu ambiente de desenvolvimento Laravel.

Instalando o Laravel

Para instalar o framework use o código abaixo:

composer create-project laravel/laravel example-app

Instalando o Sail

Utilizaremos o Sail para gerenciar nossa aplicação, ele traz uma solução pré pronta para trabalhar-mos com Docker, PHP, MySql e etc, para instar o Sail utilize os códigos abaixo:

composer require laravel/sail --dev

php artisan sail:install

Para subir um container com Sail utilize o código abaixo:

./vendor/bin/sail up -d

Configurando apelido (alias) para o sail

Você precisa adicionar o alias ao seu arquivo .bashrc, para isso abra o terminal e digite o comando baixo:

gedit ~/.bashrc

Adicione a linha abaixo no final do arquivo:

# alias sail laravel
alias sail='bash vendor/bin/sail'

Salve o arquivo, e use o comando abaixo no seu terminal para fazer a atualização no arquivo .bashrc:

source ~/.bashrc

Instalando dependências

Para isso vamos precisar do Node.js versão 16, felizmente o Sail já traz essa dependência em sua configuração, para prosseguir execute o comando abaixo para instalar os pacotes do node_js:

./vendor/bin/sail npm install

Caso você esteja usando o Windows faça a alteração do arquivo vite.config.js para o conteúdo abaixo, caso esteja usando Linux esse passo é dispensável:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        hmr: {
            host: 'localhost',
        }
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Agora já podemos iniciar o nosso Vite para que ele escute as modificações da nossa aplicação, para isso utilizaremos o comando abaixo:

./vendor/bin/sail npm run dev

Instalando o Tailwind

Para instalação do nosso framework de font-end utilize o código abaixo:

./vendor/bin/sail npm install -D tailwindcss postcss autoprefixer

Para gerar o arquivo de configuração do Tailwind utilize o código abaixo:

./vendor/bin/sail npx tailwindcss init -p

Seu arquivo tailwind.conf.js deve ter esse conteúdo:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Para finalizar inclua as diretivas abaixo no arquivo ./ressources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Instalando o Alpine.js

O Alpine.js é um framework javascript, bastante simples de se utilizar e que pode ser um ótimo substituto do jquery, para instala-lo utilize o código abaixo:

./vendor/bin/sail npm install alpinejs

Agora é necessário importar o Alpine.js para que os arquivos sejam compilados, para isso, adicione as linhas abaixo no arquivo ./resources/js/app.js:

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

Com isso finalizamos nosso ambiente de desenvolvimento Laravel.

Problemas com permissões

Caso você esteja utilizando Linux e enfrentando problemas com permissões, você pode utilizar os dois códigos abaixo na raiz do seu projeto:

sudo chmod o+w $(pwd) -R

sudo chmod 777 -R $(pwd)