RESTAdapter with Homestead Vagrant

1

OMG IM ABOUT TO THROW EMBER IN THE FN TRASHCAN AND MOVE ON WITH MY LIFE…

I am using Homestead Vagrant box with the url http://super1.local:8000 I have Ember CLi setup (probably not anymore) so when I would $ ember serve it would load my ember app on my URL http://super1.local:8000/question. Everything was working fine, live reloading worked. I even got my Laravel App to work and tested with Postman. Now nothing is working at all…

I can $ember server after loading up my vagrant box but I cant get any data from my models. I have fooled with the ApplicationAdapter and the config/environmen.js for hours to no avail. SO here is my code right now - and errors

First the errors I get run ember server…

Content Security Policy violation: {“csp-report”:{“document-uri”:“http://super1.local:8000/question",“referrer”:“http://super1.local:8000/question”,“violated-directive”:"script-src ‘self’ localhost:39529 0.0.0.0:39529”,“effective-directive”:“script-src”,“original-policy”:"default-src ‘none’; script-src ‘self’ localhost:39529 0.0.0.0:39529; font-src ‘self’ http://

Now the /adapters/applications.js

import DS from 'ember-data';

//Access configurable values in emberjs ember-cli · GitHub

export default DS.RESTAdapter.extend({
  // host: config.apiUrl,
  //192.168.10.10
//  host: 'localhost',
  namespace: 'api/v1'
});

and now for the /config/environment.js (the parts I have been tampering with)

module.exports = function(environment) {
    var ENV = {
    modulePrefix: 'cherry',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
       // Here you can enable experimental features on an ember canary build
       // e.g. 'with-controller': true
     }
    },

     APP: {
       // Here you can pass flags/options to your application instance
       // when it is created
    }
  };

   ENV.contentSecurityPolicy = {
     'default-src': "'none'",
     'script-src': "'self'",
     'font-src': "'self' http://fonts.gstatic.com",
     'connect-src': "'self' 127.0.0.1", // Allow data (ajax/websocket) from api.mixpanel.com and custom-api.local
     'img-src': "'self'",
     'style-src': "'self' 'unsafe-inline'",
     'media-src': "'self'"
   }

   if (environment === 'development') {
  //  ENV.APP.LOG_RESOLVER = true;
     ENV.APP.LOG_ACTIVE_GENERATION = true;
   //  ENV.APP.LOG_TRANSITIONS = true;
 //    ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
     ENV.APP.LOG_VIEW_LOOKUPS = true;
     ENV.constentSecurityPolicy = {
       'connect-src' : "'self' localhost:8000",
     }
   }

I created a model /models/questions.js import DS from ‘ember-data’;

export default DS.Model.extend({
  title: DS.attr('string'),
  question: DS.attr('string'),
  date: DS.attr('date'),
  author: DS.attr('string')
});

This is my route /routes/questions.js import Ember from ‘ember’;

export default Ember.Route.extend({
  model: function(params) {

 return this.store.find('question', params.question_id);
  }
});

and my template /templates/questions.js

{{#each question as |que|}}

Author: {{que.author}}

The Question: {{que.title}}

{{/each}}

Will someone please help me out on this…I would pay money for help on this, seriously. I am so close to moving onto other routes. I love Ember, it just makes sense to me more than other frameworks, but this configuration for the RestAdapter is killing my excitement. Anyone with Laravel experience would be nice because I would really like to know the de-facto standard for outputting json, right now Im using response->json() and it has been working fine. Im just trying to think of all avenues of why its not working. I can post more code if needed. Please Please Help Me.

2

What does the JSON response from your API look like? Per the guides, it should look like this:

{
  "person": {
    "firstName": "Jeff",
    "lastName": "Atwood"
  }
}

Usually, if you use a toJSON() or similar method on a raw object, your response will come out like this:

{
    "firstName": "Jeff",
    "lastName": "Atwood"
}

I’ve never used Laravel, but (forgive me if my PHP is a little rusty) I would imagine what you want to do is something like:

$response = new stdClass();
$response->$modelName = $data;
$response->json();
3

Remove ember-cli-content-security-policy from package.json. You can always add it back and configure your contentSecurityPolicy to add super1.local to script-src options once you get over your other hurdles.

As for your JSON structure. If you’re not able to mutate your JSON in a structure that is compliant for the jsonapi spec, then you should become familiar with normalizePayload (deprecated in favor of normalizeResponse) on the DS.RESTSerializer. This is where you’ll be able to transform your response object to align with JSON API.

1 Like
4

First I want to say thank you for replyng. I just started a new job and a car wreck and a sprained ankle from skateboarding so I haven’t had time to really get back to you on this, Anyway, I will have to check my local server and see what the I honestly can’t remember the format I got on Postman but I will check here in a couple hours and update you with what I have.

5

Love it, I forgot all about being able to take out packages from packages.json. Very nice. That will help. I will post results. THANK YOU!!!

6

Alright so I switched some routing around and this is the format I am getting from my Laravel API on Postman

711×605 112 KB

I haven’t got to test it out on my Ember App to see if it works or not, and I have;t had a chance to uninstall the content-security-policy package. Update after work.

7

could you expand on that last partly?

$response = new stdClass();
$response->$modelName = $data;
$response->json();
8 
$response = new stdClass(); // Make a blank object
$response->$modelName = $data; // Make a property on the object with your model name, and set your payload to it
$response->json(); // Convert the object to JSON, however Laravel does that

There may be a more efficient way to do that (like making a model class for each model), but those are the steps you would follow in most frameworks.

9

Yup, that format isn’t gonna work (or rather, isn’t going to work without customizing the serializer). If you’re using the RESTAdapter / RESTSerializer, the format it’s expecting is this:

{
    "photos": [{
        "id": 1,
        "otherData": "Here"
    },{
        "id": 2,
        "otherData": "Here"
    }]
}

Note in particular where objects are used vs. arrays, and what does/doesn’t have named keys.