Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I love the great educational resources we have available on laracasts. One thing I've seen many people comment about and that I feel I'd love to know better myself is how to make a real world app using Laravel as backend and some js framework for SPA (e.g. Vue, Angular or React).
Even though we have bits and pieces of various parts of the concepts, it can be hard to manage to make it work for many of us. One example would be making a API from Laravel and interacting with it dynamically with an SPA.
This is the way to go. You can set this however you want. You can make a SPA, half-SPA like facebook for example (some modules are dynamic, some not) or normal application with server-side rendering. I have spent last 2 weeks setting up my application so I have live reload (ReactJS), xhr login and stuff. I will provide you with a github link containing my webpack / elixir configuration if you are interested :)
I will post this here as soon as I get home.
@Desu I'm interested too
@Desu I would love to see it, could you post it please? :)
Yeah a real world SPA example with Laravel as Backend with Vue.js & JTW Auth and the vue-router would be just awesome. I would pay extra $ for this stuff :)
There is very nice example for complete SPA, which was posted some time ago in VueJS forums: http://forum.vuejs.org/topic/39/starter-application-with-jwt-auth-sample-backend-api
It is worth to check it out.
@Augustus here is the github link: https://github.com/3amprogrammer/SimpleCRM It is only a basic sketch. I don't have much time now to create a new clean install with this but you can try this on your own.
The important path is setting proxy in webpack.development.config.js so every calls are redirected to your backed. Adjust this to your needs. Run npm start to run weback dev server (you must also have your homstead up!)
Before start gulp will be triggered to convert index.blade.php to index.html (webpack needs static content, and we are lazy, so it lets us modify only one file)
Basic auth is already set (remove garbage from resources/assets/js/index.js so it compiles). Just read through AuthController. You may also read very good replay on https://github.com/tymondesigns/jwt-auth/issues/513 by mtpultz. He explains everything quite well :)
So the flow is like this: user posts the credentials and he gets back a jwt token. From now on you just attach this token to every request. Quite simple. You can also read through te jwt code itself it is very simple to understand and clarifies many things.
Sorry my response is a little bit chaotic but I am very busy right now. If you have any questions feel free to ask.
I've been working on something like this as well. It's not a SPA, some pages are fully blade, some are blade with a bunch of VUE on top. no jwt or anything like that, all normal auth. But I've got some fairly complex vue components that are nested several layers deep.
This is replacing a SPA built with node & angular. It's far more maintainable, and there is no comparison speed-wise ... the new version wins, by miles and miles... of course that's not a fair comparison as the new version syncs third party data in the background, the old version pulled from the third party api in realtime.
I wish I could show it off, unfortunately it's all internal company financial data, so I'd never be given permission to show it to anyone.. :(
Built this kind of thing recently (I am using basic authentication though, no JWT yet): https://liftmap.com
Please or to participate in this conversation.