Folder structure when Lumen With Angularjs?

Why dont you put all your angularJS stuff in public folder ?

Route pointing view files to resource folder. I dont know how change 'view path' to public folder

AngularJS files in your resources folder is fine, concatenate them and generate the all.js file in your public folder.

@Ruffles if I am not mistaken! Luman does not ship with Elixir, it needs to be setup, right?

Yeah, either elixir or gulp or even grunt. I don't know much about lumen but it's the same process with Laravel (the JS folder stucture).

If you're building an API back end to serve the Angular front end then build it completely separately and use CORS to connect to the API. Tightly integrating Lumen/Angular is unnecessary and adds difficulty in the vast majority of cases IMO.

@Ruffles right. anyways its as easy as copy paste the package.json, bower.json and gulpfile.js . I like gulp more thought, and the convenience of elixir while testing too!

@SP1966 I agree! unless @shihabudheen has a reason to decouple the API

I agree that the API and the JS should be 2 separate apps, but the only reason I keep them under one roof is for testing purposes on Heroku (you can't put pure JS apps there, I mean front end code only, nodejs doesn't count) until the app(s) hit production.

My set up is as follows:

Added the package.json from laravel which includes gulp and laravel-elixir

run npm install to install dependencies

Create your gulpfile.js and set up your tasks

Create your bower.json and add dependencies like angular, bootstrap..

Create your .bowerrc and set "directory": "vendor/bower_components" so all vendors are in the same place

In your gulpfile configure dev tasks to copy over the scripts you will need to public. Doing this so its easy to debug..

Set up a distribution/production task to concat your scripts to the public folder and processhtml to rewrite the multiple scripts to one file like app.js - the processhtml works by having a processhtml folder within resources/views/includes/processhtml/footer.blade.php and will change the src and copy the file over to resources/views/includes/footer.blade.php

e.g.

<!-- build:js {{$baseUrl}}/js/app.min.js -->
<script src="{{$baseUrl}}/vendors/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="{{$baseUrl}}/vendors/angular-loading-bar/loading-bar.js"></script>
<script src="{{$baseUrl}}/vendors/angular-chartist/chartist.js"></script>
<script src="{{$baseUrl}}/vendors/angular-chartist/angular-chartist.js"></script>
<script src="{{$baseUrl}}/js/app.js"></script>
<script src="{{$baseUrl}}/js/controller.js"></script>
<script src="{{$baseUrl}}/js/services.js"></script>
<script src="{{$baseUrl}}/js/categories/categoriesControllers.js"></script>
<script src="{{$baseUrl}}/js/categories/categoriesServices.js"></script>
<!-- /build -->```

Let me know if I must elaborate

Thank you all for replies,

At last I found view path settings in lumen at following location,

vendor/laravel/lumen-framework/config/view

And change settings from

'paths' => [ realpath(base_path('resources/views')) ],

To

'paths' => [ realpath(base_path('public/app')) ],

Now I put my angularjs application and all assets inside public/app

You don't have to change the path of the PHP views at all.