Do not speak Portuguese? Translate this site with Google or Bing Translator
Como configurar o Laravel 8 ou 9 com Angular

Posted on: May 25, 2022 11:07 AM

Posted by: Renato

Views: 1013

Como configurar o Laravel com Angular (ou qualquer framework Javascript)

Este método permitirá que você adicione qualquer (e vários) frameworks javascript frontend ao Laravel. Para os propósitos deste artigo e tutorial, focaremos no Angular, no entanto, outros frameworks como React ou Vue.js podem ser usados ​​(simultaneamente) de forma semelhante.

Você deseja servir o frontend no mesmo repositório que seu projeto Laravel? Você tem um projeto Laravel existente com uma API e agora deseja incorporar um frontend diferente? Você escolheu o Laravel como seu back-end de escolha para entregar uma API RESTful, mas quer experimentar vários frameworks javascript? Se você respondeu sim a qualquer uma das perguntas a seguir, esse método é para você.

A maioria dos projetos que separam o backend do frontend ficará em repositórios diferentes. Se você não quer que nenhum projeto viva em (sub)domínios diferentes ou deseja mantê-los no mesmo repositório, então você pode usar este método. Você sempre pode separar os dois projetos no futuro em repositórios diferentes. É discreto para projetos existentes e você pode reverter facilmente todas as alterações.

Assista a este tutorial no YouTube.

Visão geral

  • estamos usando o framework javascript (Angular neste caso) para publicar a distribuição ou construir arquivos e ativos na publicpasta do Laravel
  • quando construirmos os arquivos, copiaremos automaticamente o index.htmlarquivo para um blade Laravel
  • vamos criar uma rota no routes/web.phparquivo e um controller para servir o app
  • este método não é intrusivo e permite implementá-lo em um projeto Laravel existente sem consequências indesejadas, tornando-o reversível
  • a base de código para este artigo pode ser vista no Gitlab: https://gitlab.com/cpdrenato/laravel-com-angular
  • você pode assistir a uma versão do YouTube deste tutorial em ação

Começando

Para os propósitos deste artigo, iniciaremos um novo projeto Laravel, mas se você tiver um projeto existente, pode pular adiante. Já baixei o instalador do Laravel via Composer para poder simplesmente usar o laravelcomando:

laravel novo laravel-angular

Nota: no momento da escrita, o Laravel atual está na versão 8.x. Atualizei o instalador do Laravel via Composer, porém, resultou em um erro 522 Origin Connection Time-outquando executei o comando acima. A solução é primeiro remover o instalador via compositor e depois instalá-lo novamente.

composer global remove laravel/installer 
composer global requer laravel/installer

Se você teve problemas como eu, agora você pode executar o laravel new laravel-angularcomando.

Instalar Angular

Crie uma pasta “frontend” dentro da pasta “resources” do Laravel
Crie uma pasta “frontend” dentro da pasta “resources” do Laravel

Se você já possui um projeto Angular ou um modelo que deseja usar, pode colocá-lo nesta pasta separada. Caso contrário, vamos criar um novo projeto Angular aqui.

Como você pode ver na captura de tela, criei uma resources/frontendpasta que é onde vamos colocar a pasta do projeto angular. Novamente, é aqui que você pode colocar vários frameworks se quiser experimentar soluções diferentes para seu projeto. Na captura de tela, você verá um projeto Vue.js e React para demonstrar essa possibilidade.

Se você estiver em um terminal neste projeto, poderá
cd resources/frontend
executar o ngcomando de lá para gerar um novo aplicativo Angular. Neste caso, vou simplesmente chamá-lo de angularSe não estiver familiarizado, você pode usar o guia de configuração do Angular para implantar um novo projeto.

cd resources/frontend 
npm install -g @angular/cli 
ng new angular

Editar angular.json

Existem algumas coisas que precisam ser alteradas no angular.jsonarquivo para que ele sirva nosso aplicativo Laravel corretamente. Isso ajudará quando você estiver servindo o projeto Angular localmente e quando criar os arquivos de distribuição e ativos para produção.

Para produção: precisamos publicar os arquivos de distribuição e ativos na public/pasta do Laravel. Em uma tentativa de manter tudo separado e organizado para que seu aplicativo esteja preparado para o futuro, podemos publicar os arquivos na public/assets/angularpasta. Para roteamento, o Angular precisará saber onde esses arquivos estão localizados em relação à sua localização, portanto, também precisaremos adicionar uma deployUrlopção à configuração de produção.

No angular.jsonarquivo, você precisará encontrar a project.architect.build.configurations.productionseção e adicionar uma opção outputPathdeployUrl:

"outputPath": "../../../public/assets/angular", 
"deployUrl": "/assets/angular/",
Adicionar e outputPath e opção deployUrl
adicione uma opção outputPathedeployUrl

Para dev: e implantação local, precisamos adicionar uma configuração separada. Assim como productionvamos criar uma project.architect.build.configurations.devseção. Esta seção terá outputPathbaseHrefopções.

"dev": { 
    "outputPath": "dist/assets/angular", 
    "baseHref": "/assets/angular/" 
}
adicione uma configuração dev com as opções outputPath e baseHref
adicione uma configuração dev com as opções outputPath e baseHref

Além disso, precisaremos ter uma browserTargetopção para a devconfiguração na project.architect.serve.configurationseção.

"dev": { 
    "browserTarget": "angular:build:dev" 
}
adicione uma opção browserTarget para a configuração do dev
adicione uma opção browserTarget para a configuração do dev

Editar pacote.json

Para isso, basta alterar 1 linha e adicionar uma linha adicional. Na scriptsseção vamos editar a startopção que irá construir e servir nosso projeto localmente. Altere isso para:

"start": "ng serve --configuration=dev -o",

Isso servirá o aplicativo Angular com a configuração dev que criamos acima no angular.jsonarquivo. -oopção é opcional e baseada em minhas preferências para abri-lo automaticamente em seu navegador assim que ele for criado.

Agora vamos adicionar uma build:prodopção para quando estivermos prontos para construir os arquivos de distribuição e colocá-los na public/pasta do Laravel. Lembre-se, alteramos a outputPathopção angular.jsonpara colocá-los lá. Adicione esta linha:

"build:prod": "ng build --prod && cp ../../../public/assets/angular/index.html ../../views/angular.blade.php",
edite o script de início e crie um script build:prod

Como você pode ver, estamos copiando o conteúdo do index.htmlarquivo do Angular e colocando-o em um blade Laravel. Vamos em frente e fazer esta vista agora.

Criar Laravel View para Angular

Na resources/viewspasta crie um angular.blade.phparquivo. Novamente, você pode nomear isso como quiser, mas para simplicidade e compreensão, esse nome é usado para referência. Tudo bem se este arquivo estiver em branco, porque o build:prodscript acima copia o conteúdo do index.htmlarquivo do Angular para este. Os dois nomes devem corresponder.

Criar AngularController

Agora precisamos criar um controller para retornar a view que acabamos de criar. Você pode nomear esse controlador como quiser, FrontendControllerpor exemplo, se isso fizer mais sentido para você, mas vou chamar esse controlador AngularController.

php artesão make:controller AngularController

Dentro da AngularControllerclasse, crie uma indexfunção que retorne a vista angular.

<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;class AngularController extends Controller 
{ 
    public function index() 
    { 
        return view('angular'); 
    } 
}
AngularController.php
AngularController.php

Criar rota da web

Um dos maiores problemas é resolver para roteamento. Como usamos o roteamento do Angular para nosso aplicativo enquanto ainda usamos os endpoints da API do Laravel que criamos para nosso projeto?

Fácil.

Permitimos que qualquer endpoint passe para o aplicativo Angular, exceto quando ele começa com /apiEm seu routes/web.phparquivo adicione a linha,

Route::any('/{any}', [AngularController::class, 'index'])->where('any', '^(?!api).*$');
rotas/web.php
rotas/web.php

Executando e construindo o projeto

Agora que todas as peças estão juntas, como executamos essa coisa e nos certificamos de que funciona?

Eu pessoalmente gosto de usar o Laravel Valet para executar meus projetos localmente. Se o Linux é o seu método de desenvolvimento preferido, também existe uma versão Laravel Valet para Linux .

Desenvolvendo o Angular localmente: se você estiver em um terminal, você pode cdentrar na pasta do projeto angular e executar:

cd resources/frontend/angular 
npm start

Para construir o projeto para produção: se você estiver em um terminal, você pode cdentrar na pasta do projeto angular e executar:

cd resources/frontend/angular 
npm run build:prod

Esse comando irá construir os arquivos, colocá-los no public/assets/angulardiretório e copiar o conteúdo index.htmlpara o resources/views/angular.blade.phparquivo.

Você adicionou esse método a um projeto existente e agora deseja revertê-lo?

Sem problemas.

Como separamos tudo, é facilmente reversível ou não intrusivo com projetos existentes. A maior mudança é remover a linha no routes/web.phparquivo e seu aplicativo deve se comportar como pretendido mais uma vez. A partir daí você pode remover o AngularController.phparquivo que criamos junto com o resources/frontend/*diretório que criamos. Se você tiver ativos publicados, poderá removê-los da public/assets/angularpasta que foi criada.

Fonte: https://medium.com/swlh/how-to-setup-laravel-with-angular-d3de171afa03


3

Share
About Author

Renato

Developer

Add a Comment
Comments 0 Comments

No comments yet! Be the first to comment

Blog Search


Categories

OUTROS (12) Variados (109) PHP (111) Laravel (119) Black Hat (3) front-end (26) linux (95) postgresql (35) Docker (17) rest (4) soap (1) webservice (6) October (1) CMS (2) node (7) backend (11) ubuntu (48) devops (23) nodejs (5) npm (2) nvm (1) git (5) firefox (1) react (6) reactnative (5) collections (1) javascript (5) reactjs (7) yarn (0) adb (1) solid (0) blade (2) models (1) controllers (0) log (0) html (2) hardware (2) aws (14) Transcribe (2) transcription (1) google (3) ibm (1) nuance (1) PHP Swoole (4) mysql (23) macox (4) flutter (1) symfony (1) cor (1) colors (2) homeOffice (2) jobs (2) imagick (2) ec2 (1) sw (1) websocket (1) markdown (1) ckeditor (1) tecnologia (13) faceapp (1) eloquent (11) query (2) sql (35) ddd (3) nginx (6) apache (4) certbot (1) lets-encrypt (2) debian (10) liquid (1) magento (2) ruby (1) LETSENCRYPT (1) Fibonacci (1) wine (1) transaction (1) pendrive (1) boot (1) usb (1) prf (1) policia (2) federal (1) lucena (1) mongodb (4) paypal (1) payment (1) zend (1) vim (3) ciencia (6) js (1) nosql (1) java (1) JasperReports (1) phpjasper (1) covid19 (1) saude (1) athena (1) cinnamon (1) phpunit (1) binaural (1) mysqli (3) database (33) windows (4) vala (1) json (2) oracle (1) mariadb (2) dev (12) webdev (24) s3 (4) storage (1) kitematic (1) gnome (2) web (2) intel (3) piada (1) cron (2) dba (13) lumen (1) ffmpeg (2) android (2) aplicativo (1) fedora (2) shell (3) bash (2) script (3) lider (1) htm (1) csv (1) dropbox (1) db (3) combustivel (2) haru (1) presenter (1) gasolina (1) MeioAmbiente (1) Grunt (0) biologia (1) programming (20) performance (2) brain (1) smartphones (1) telefonia (1) privacidade (1) opensource (3) microg (1) iode (1) ssh (1) zsh (1) terminal (1) dracula (1) spaceship (1) mac (2) idiomas (1) laptop (2) developer (27) api (1) data (1) matematica (1) seguranca (2) 100DaysOfCode (6) hotfix (1) documentation (1) laravel (2) RabbitMQ (1) Elasticsearch (1) redis (2) Raspberry (3) Padrao de design (4) JQuery (1) angularjs (3) Dicas (15) kubenetes (1) vscode (1) backup (1) angular (2) servers (2) pipelines (1) AppSec (1) DevSecOps (2) rust (1) RustLang (1) Mozilla (1) algoritimo (1) sqlite (1) Passport (1) jwt (2) security (1) translate (1) kube (1) iot (1) politica (2) bolsonaro (1) flow (1) podcast (1) Brasil (1) containers (2) traefik (1) networking (1) host (1) POO (1) microservices (1) bug (1) cqrs (1) arquitetura (1) Architecture (1) sail (1) militar (1) artigo (1) economia (1) forcas armadas (1) ffaa (1) autenticacao (1) autorizacao (1) authentication (1) authorization (1) NoCookies (1) wsl (1) memcached (1) macos (2) unix (1) kali-linux (1) linux-tools (1) apple (1) noticias (2)

New Articles



Get Latest Updates by Email