Search code examples
angularlaravellaravel-5.5

How can I implement Laravel 5.5 and Angular 4 project intogether?


If I want to implement Angularjs 4 or 2 with Laravel 5.5 (angular will consume the API from laravel), what should be the best method? 1) Should I create two folders in xampp/htdocs like c:/xampp/htdocs/test-laravel55 and c:/xampp/htdocs/test-angular4 OR 2) Should I create a project of laravel 5.5 like c:/xampp/htdocs/test-laravel55 and put the angularjs4 (e2e, node_modules, src) files & folders into test-laravel55?

If method 1 is better, can you kindly recommend me some links/ videos to understand how will be the process like CRUD operations, Auth login, etc. Also, if method 2 is better, can you suggest me some links/ videos about the procedure / tutorials, CRUD operations, Auth login etc?

My main moto is "admin user" can login to the admin panel and create some CRUD operations like category creation, product creation etc.


Solution

  • my approach is to make 2 completely separate projects one for Laravel and you should put it in your localhost root
    and the other is for Angular and you can put it anywhere

    Laravel Project

    you will work only with routes and controllers no views required and for sure connecting to database, you can use Postman to test your REST APIs and functionality.

    Angular Project

    you will handle all front-end routes and views here you just call your back-end APIs (laravel project) to get and set data.

    when you build the Angular project via ng build it will create a folder called dist this folder is the client side for your project you should point to it with you domain name once you deploy your project on any hosting service provider and for the Laravel project you may point to it with a subdomain

    Example

    you created a laravel project and hosted it at app.yourwebsite.com you created an Angular project and build it then uploaded the dist folder to yourwebsite.com

    now when a user hits yourwebsite.com he will see the front-end of your angular app then in behind it calls app.yourwebsite.com via HTTP requests to get/set data

    you can find more useful info and examples here https://laravel-angular.io/

    Answering your questions

    1- dist folder is created via ng build
    2- you will upload the dist folder only as it contain all compiled angular app
    3- any hosting server will be accepted because you will host JS/HTML files only so you don't need any compilers or nodejs/npm environment