Combining a PHP Framework with Ember

1

Hell Everyone,

This is my first post on this forum. I have read your guy's brilliance for close to a year now. My name is TJ and I have been tinkering with Ember for a couple months off an on. I am now at the point where I only care about Ember and giving up on Angular completely. I can get my homemade PHP API and Laravel to work with Angular reasonably well. But I love Ember so much and I want to use it instead of Angular for my API's.

 I have read different techniques to combine the two and right now the easiest and quickest way to get Ember working with Laravel is by using the app starter kit. Ideally I would like to use Ember-CLI so that opens a whole new set of issues when combining the two. I have a couple build scripts that build ember and place those files into the public/assets folder in Laravel. What I don't get is the rest. I am so confused after this point.

Maybe combining both Ember and Laravel inside the same directory is not what I need at all. Maybe I need to build out my API and other things with Laravel and then install Ember CLI on another directory just using the api calls. This method also confuses me because of CORS. How would I get around the CORS issues with Ember?  I'm guessing that I need to start my vagrant server for the Laravel API and the start the Ember server to get them to work together. I also need to use --proxy when using ember server

So, right now I can work with Ember and Laravel but only with the Ember App Kit which I want to use Ember CLI. Could anyone here please help me to get a method or technique that gets Laravel and Ember CLI working. Any feedback would be greatly appreciated.
2

Congrats on your first post!

What you probably want to do is use Laravel to build out your API, and just use Ember Data to access it. XSS is indeed an issue, but that just means you need to enable CORS on your Laravel app. Try adding this CORS package. I noticed that it also handles “pre-flight” requests, which is necessary for Ember Data. In your “allowedOrigins” parameter, set it to “*” for development, and whatever is hosting your Ember app for production.

3

I highly recommend using Laravel 5.1 with Ember, keeping them in separate repos. Use the CORS package @kylecoberly mentioned. Works a charm.

4

Thanks for the quick responses, wow.

Can you explain in detail that last sentence Kyle?

So after I get this package installed what are my next steps? Obviously I have built out the api, do I need to start my vm the laravel is in and run ember server --proxy http://198.22.1.0 or whatever. Like I said I am new to getting ember and laravel to work together and I have a ton of questions right now. It looks like I am in for a late night.

5

You might also find https://github.com/thephpleague/fractal really handy.

It’s like ActiveModelSerializers for Laravel

6

In development, while you’re running the server on your own computer, you just set the allowedOrigins parameter to allow a cross-origin request from any site (the wildcard, *). That’s because your requests will be coming from localhost:4200- if you set that on a production server, anyone could hit your server from their home computer on that port, so it’s essentially the same as allowing everything. In production, it should be a whitelist of sites that are allowed to query your API, or a wildcard if it’s a public API.

7

yep, I found that last night! Are there any example on how to integrate it?

8

As an update I have installed the core package last night and have been looking at implementations of fractal or just using my own transformers.

Kyle…Where do I set allowedOrigins parameter? Do you have any info on making a whitelist also?

I am very excited about eventually learning this. It is top priority right now. Thanks again for your help! I can’t say that enough!

9

The details are in the “Configuration” section of that CORS plugin’s Github readme. The whitelist will probably look something like [" http://www.mydomain.com", “http://www.myotherdomain.com”].

1 Like
10

I don’t know about your use case but we needed just a simple CMS and used a PHP framework called WordPress for this. We just let WordPress templates create json for Ember-Data and let Ember do the rendering.

Example: http://www.kerstenconstructie.com/

11

I’ve recently created StackCombinator using Ember CLI and Laravel. They work great together. I guess you can solve CORS issue using cURL and JSONP like I did in StackCombinator.

But I’ve not used Ember Data. I’ve used only Apache server.

12

Just in case there’s any confusion, all Ember Data does is format requests and responses, gives your application a common interface for requesting records, and handles application caching. It does not care what your server or API situation is at all.

13

I’m currently using Symfony2 with FOSUserBundle (user management), FOSOauthBundle (authentication), NelmioCorsBundle (CORS) and FOSRestBundle (REST API) and JMS SerializedBundle (serialization from/to JSON).

I have REST JSON API for my Ember app and something like simple CMS, mainly for testing. In browser I see HTML and standard forms, list, links and tables. I authenticate via login and password. Ember of course sees data in JSON and authenticates via OAuth2. It all depends of “Accept” HTTP header.

I must say that it works quite well. :slight_smile:

14

I got the package working! Thanks for all your help and for suggesting it #kylecoberly and #toddsmithsmalter

oh, and are there any other packages you can que me in on?

1 Like
15

Full stack for PHP + Ember with JSON API Ember + PHP with JSON API

1 Like