Laravel 4 with AngularJS Architecture Solution

Laravel 4 with AngularJS Architecture Solution

This is the overview of solution to developing a web application using AngularJS and Laravel. My aim is to keep the front-end and back-end as separate as possible. I have envisaged a setup which has a somewhat decoupled architecture where the static front-end AngularJS application is completely separate from the resourceful API back-end Laravel application. It’s worth noting I’m using LinemanJS for my front-end development Workflow but this concept could be applied with your own workflow.

This post also addresses problems when trying to inject the CSRF Token without using a HTTP request and SPA HTML5 push state. So hopefully this saves you some head banging.

Folder Structure

After considering different folder structure options I have chosen this one as it keeps the folders completely separated. This is what the folder structure looks like:

  • .htaccess redirects requests from project root.
  • All static asset requests directed to
    /frontend/dist
  • All requests prefixed
    /api directed to
    /backend/public

Developing

Development of the AngularJS front-end is easy with LinemanJS. I simply run
lineman run and go to
https://localhost:9000. The Laravel back-end is running on Apache and Lineman connects to it through Lineman’s apiProxy.

Testing Production Builds

Production builds of the AngularJS front-end is easy with LinemanJS. I run
lineman build and go to
https://localhost. This is still local but allows testing of the production build to test it’s all working before committing changes and pushing up to staging/production.

CSRF Token

Don’t forget we need to constantly think about security. So it’s a good start to get the CSRF Token from Laravel into our Angular app. In development we can use Lineman as normal and the CSRF Token is injected using a HTTP request. In production the CSRF is included in a META Tag and loaded that way avoiding the request.

.htaccess to direct requests

This is an example .htaccess file which goes into your project root directory and redirects requests to front-end and back-end. See project/front-end/app/static/.htaccess for example htaccess.

Fixing HTML5 Push State using index.php

HTML5 Push state is easily broken by this setup but I’ve found a way to fix it. I’ve included a “catch any” route in my Laravel router so any requests not matching the back-end router get caught and load the index.php (which works as we are using AngularJS SPA). Also, in the .htaccess the
/api/* rules are no longer needed as these are handled before the “catch all” in the Laravel router. This works well.

project/backend/app/routes.php

project/frontend/app/static/.htaccess

Having everything in the root directory

As good practice, I like to keep everything OUT of the root directory unless it needs to be there and served out. So the file structure I’ve mentioned above should be modified so that only these folders are located in the root directory, thus making it more secure. If someone’s going to hack you there is not much you can do about it BUT you can make it harder and deter them. Moving all server code out of the document root and serving over HTTPS is a good start.

This is what your directory might look like after moving everything out:

And your app run path will change to this:

Adding an Admin back-end

It’s advantageous to have a UI back-end which can help manage your web app. It could be just to show your app stats or manage users etc… It’s useful. Using my solution above you can easily add an admin area using Laravel blade templates. Everything under
/admin/* is directed to the back-end, from there you can add admin routes and controllers and use blade templates to provide the interface. Simple as that.

Conclusion

So these are the Angularjs quick filter sort an array by strings.If you like this tutorial script then share it with your community. If you have any suggestion Feel free to comment below.If you want to learn more about PHPCodeIgniterAngularJSLaraveljQuery  Web Development then daily visit PHPCodify. Sharing is Caring.

Laravel 4 with AngularJS Architecture Solution

Read previous post:
PHP Registration Login CRUD App with Admin Panel MySQL Bootstrap

PHP Registration Login CRUD App with Admin Panel MySQL Bootstrap Today in this article I will show you PHP Registration...

Close