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 /front-end/dist
  • All requests prefixed /api directed to /back-end/public


Development of the AngularJS front-end is easy with LinemanJS. I simply run lineman run and go to http://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 http://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.



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.


This concept allows the front-end to be separated from the back-end and thus if we decide to switch the back-end someday to say node.js instead of Laravel it will be a lot easier. Keen to hear you comments on it.

Sam is a passionate web developer from England. In his spare time he enjoys coding, playing chess, reading and investing.

12 thoughts on “Laravel 4 with AngularJS Architecture Solution

  1. Hi, i would like to ask what do you mean ‘app/< (Angular front-end files production build)' in the "Having everything in the root directory" section.
    Is it the same as /dist in an angular's folder?

    1. So the structure would be something like:


      How would that affect this tutorial? Also how would that change the .htaccess routing? Thank you very much for an awesome tut 😀

      1. Hi Etienne, with a separate ng app for the admin area this would be easy, just a rule in your htaccess to direct requests for everything prefixed admin/* something like this:

        # Redirect Admin requests
        RewriteCond %{REQUEST_URI} ^/admin/(.*)$
        RewriteRule ^admin/(.*)$ /admin/dist/%{REQUEST_URI} [L]

  2. Hi. Thanks for sharing this.

    I’m really interested on the workflow on deploying this project to production environment using git. Especially for the front end files, I assume not all the files in this project are pushed to the production. (example, only /dist for front-end). Can this be done thru git-subtree?

    1. I’ve not gone into much detail about deployment, this is something I will touch on later once I have found a solid approach. My target is a git commit auto deploy with something like Travis running the testing on the commit. Job done.

  3. Hi, thank you for this post!

    Homestead for instance is using nginx and the htaccess solution might not work.

    I added the following lines in /etc/nginx/sites-available/

    # production usage
    location ~ .(scripts|image|styles)/(.*)$ {
    try_files $uri $uri/ /dist/$1/$2;

    Then you have to “sudo service nginx restart”. This works if you have the following directory structure:

    — dist
    —- index.php # angular index file
    —- scripts
    —- images
    —- styles
    — index.php # laravel autoload


  4. Hi! Thanks for the article.

    I’ve followed all the steps, but unfortunately doesn’t work.
    My folder structures was:
    —back-end/ (all laravel files)
    —front-end/ (all angular files)
    ——-app/ (dist of angular)
    ——-index.php (same file as /back-end/public/index.php)

    And this is my .htaccess.

    Options -MultiViews

    RewriteEngine On

    # Redirect root requests

    RewriteCond %{REQUEST_URI} ^/$

    RewriteRule !^/ /root%{REQUEST_URI} [L]

    # Redirect API requests

    RewriteCond %{REQUEST_URI} ^/api/(.*)$

    RewriteRule ^api/(.*)$ /root/%{REQUEST_URI} [L]

    # Redirect all other requests

    RewriteRule (.*).(gif|jpg|jpeg|png|ico|css|js|woff|ttf|svg|eot|otf|json|html|pdf|swf)$ /root/app/$1.$2 [R,L]

    #RewriteRule ^ /root/app/$1 [R=301,NC,L]

    # html5 pushstate (history) support

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteCond %{REQUEST_URI} !index

    RewriteRule (.*) index.html [L]

    Is there any error? Because doesn’t work and i get a loop of redirects.


Leave a Reply

Your email address will not be published. Required fields are marked *