Angular as Frontend, Laravel as Backend

Asked by: BociucH

I'm mostly dealing with PHP. I've been creating apps using especially Laravel which takes resposibility for all the things like: CRUD operations, rendering views, checking users' sessions, etc. Now, I've started learning Angular 4 and I'd like to ask about combining them together.

This post is rather for asking a few general questions:

1. I want Laravel to work as a REST API, because it's going to be used by mobile apps as well. So the only thing I need to do is to return eg. data from DB as JSON, am I right?
2. If so, should I create two different apps (in two other directories), one for Angular (frontend) and another one for Laravel (backend), and let them work independently? Can I use the main domain for the frontend - www.example.com, and www.api.example.com for the backend?
3. What about stuff like checking if a user is logged in (sessions checking). Do I have to send a request to my Laravel API every time when a user interacts with various elements from my Angular-side app filling the request with eg. cache information or what's the proper method to check it?
4. Last but not least, what about using other public APIs, eg. Spotify API. Recently I was struggling with access-control-allow-origin, because it should be set on the server side, shouldn't it? But when I send a request to that API, I'll receive a callback to my Angular app, not Laravel, so it'll result in an error: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. How to resolve this issue?

Any help/hints will be highly appreciated, I'm extremly curious how it works IRL. I couldn't find a thoroughly explained example.

Answers

Answered by: James Meisler at 2017-07-10 10:22PM Accepted

1. It's up to you how you want to return that data, but JSON is the best answer. I've used this method with a few apps. If you don't need the additional functionality that Laravel provides and just need to abstract your data, Laravel also has a project called Lumen.

2. This is the way I've done it in the past. You could try to to customize either Angular's or Laravel's webpack settings and make a monolithic app, but decoupling is probably a better bet.

3. Look into JSON Web Tokens (JWTs). To implement them in Laravel is pretty easy with this package: https://github.com/tymondesigns/jwt-auth. On the Angular side, you'll need to create an auth service to get and store the token either in local storage or a cookie. There's a lot of debate about which storage method to use, but there are plenty of tutorials out there. Search for "Angular 2/4 JWT" This tutorial got me on the right path (http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial)

4. Your Laravel app will need to set Cross-Origin Resource Sharing (CORS) headers. This package will do that for you: https://github.com/barryvdh/laravel-cors

Hope that helps and good luck!

Source