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

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

Laravel Programação
Inklys
11 de setembro de 2023
1252

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)
Inklys Araújo

Inklys Araújo

Técnico em Informática efetivo no município de Itaporanga PB, cedido ao Cartório Eleitoral de Itaporanga PB, graduado em Licenciatura em Computação, Pós Graduado em Ensino de Informática.

You May Also Like!

Deixe um comentário

O seu endereço de e-mail não será publicado.