Recently I decided to create a laravel-angular application or pet project. The reason being that I have been writing applications in laravel since laravel 5.5, yeah, not so long. But in that time I’ve written multiple applications and learned a lot in laravel. I don’t have as much experience in angular, but I have spent quite a chunk of time learning it and creating simple applications that where mainly for the purpose of practicing in that platform. I have experience vuejs, more than Angular, but it is that experience that made me gravitate towards angular.
1. The structure
I wanted to create one server side application, that would handle the front end. And the front end would have one angular application that would have multiple projects inside, these projects would each contain various modules. My decision was to use one angular application and one laravel application as this would make my coding life easier. Instead of having to maintain multiple repositories I would be responsible for only two. Further more I required that the angular projects would be loaded as part of laravel blade file.
2. Serving Angular Projects
The second challenge was, how would the angular application access the laravel application? should laravel be served like say “api.myapp.com” and the angular application would be served directly form “myapp.com”. This approach posed one problem, I couldn’t have laravel pages since it would only be for api, meaning all my pages would be through the angular app, and I don’t want this, my purpose of having multiple modular angular projects would be defied. So I chose to serve each angular project through a normal laravel blade view. And the server would only serve the laravel application.
The fun part, code setup. Start with creating the two projects, assuming you have installed composer, and angular/cli
mkdir lara-ang && cd lara-ang
Create new laravel app, call it server
composer create-project — prefer-dist ‘laravel/laravel’ server
Then create the angular application, I call it apps, without a default project, will create an empty application. If you don’t want to create multiple projects remove the flag create application.
ng new apps — createApplication=false — style=scss && cd apps
Then create the first project with routing
ng generate application test-app — routing=true
This will create an app1 project with app-routing module that will be used for routing your components. Now back in laravel in app/Providers/RouteServiceProvider.php modify and add a method
Your controllers will be inside the folder TestApp, which also be the namespace for all the controllers referenced inside test-app.php by default. Then also call this method in the map method
Create a file test-app.php inside the routes folder, here all your routes for the test-app will be served. Define a route to a view that would be serving the angular project. This route should be last in the routes, otherwise all the routes will be captured by this definition.
Now create test-app folder inside views folder and create the view index.blade.php, this is where the angular app will start from. The contents will be almost similar from the one out of the index.html file built from angular. Now its about time, building the angular app. In package.json scripts add “test-test-app”
ng build — aot=false — project=test-app — sourceMap=false — output-path ../server/public/dist-test-app — deploy-url=dist-test-app/ — outputHashing=none — watch
This will build the files to the public folder dist-test-app and then watch for any changes. Copy the contents of the index.html to view/test-app/index.blade.php. Now when you serve the laravel app and go to localhost:8000/test-app your angular app will load up. And each time you make the changes you will be able to see the changes when you reload the browser. For building use the command..
ng build — project=test-app — sourceMap=false — output-path ../server/public/dist-test-app — deploy-url=dist-test-app/ — outputHashing=none
There is more we can do to improve, example create a script to copy files from index.html to your index.blade.php also we can alias the build scripts in the package. json to make them shorter. Also you can add however many angular projects and just change the blade file, the deploy url, and the output path to accomodate your needs.