ember demo ember-cli-mirage doesn't work on server without backend

Question

I'm preparing a demo of my new ember app, temporarily deploying it to a static http server, without a proper backend.

I've configured the project to fetch its data from mirage, and it works nicely locally.

The problem is that when I upload it to my http server, the mirage doesn't seem to be working, and the demo raises:

vendor-1bce2a3….js:11 Error while processing route: activities Ember Data Request GET /activities returned a 404
Payload (text/html)
[Omitted Lengthy HTML] Error: Ember Data Request GET /activities returned a 404
Payload (text/html)
[Omitted Lengthy HTML]
    at new Error (native)
    at Error.r (http://www.my-domain.com/myproject/assets/vendor-1bce2a36ef171f16e76daffe157c9b37.js:8:14790)
    at Error.n (http://www.my-domain.com/myproject/assets/vendor-1bce2a36ef171f16e76daffe157c9b37.js:19:25963)
    at e.default.r.default.extend.handleResponse (http://www.my-domain.com/myproject/assets/vendor-1bce2a36ef171f16e76daffe157c9b37.js:22:29329)
    at c.error (http://www.my-domain.com/myproject/assets/vendor-1bce2a36ef171f16e76daffe157c9b37.js:22:29898)
    at u (http://www.my-domain.com/myproject/assets/vendor-1bce2a36ef171f16e76daffe157c9b37.js:2:9669)
    at Object.c.fireWith (http://www.my-domain.com/myproject/assets/vendor-1bce2a36ef171f16e76daffe157c9b37.js:2:10437)
    at n (http://www.my-domain.com/myproject/assets/vendor-1bce2a36ef171f16e76daffe157c9b37.js:3:13352)
    at XMLHttpRequest.<anonymous> (http://www.my-domain.com/myproject/assets/vendor-1bce2a36ef171f16e76daffe157c9b37.js:3:19180)

this is my configuration of mirage:

// app/mirage/config.js
export default function() {

  this.get('/activities', function(db, request) {
    return { 'activity': db.activity };
  });

  this.get('/activities/:id', function(db, request) {
    var id = request.params.id;
    return { 'activity': db.activity.find(id) };
  });
}

it works find on my local machine, but it won't work on the http server, any ideas on how to get the demo to work?

Thanks,

Is the server you're trying to get things working on Apache? Nginx? IIS? — chrixian, Mar 19 '16 at 14:25
I think it's an Apache it's one of these web hosts where you can publish PHP websites, I have a wordpress app in the root, and created a directory in it and try to access it via: `http://www.my-domain.com/myproject/` — Don Giulio, Mar 19 '16 at 15:02

Sam Selikoff · Accepted Answer · 2016-03-19T15:03:07.880

2

By default, Mirage is disabled in production builds. You can enable it with the ENV option:

// app/config/environment.js
...
if (environment === 'production') {
  ENV['ember-cli-mirage'] = {
    enabled: true
  }
}

See the docs for more info: http://www.ember-cli-mirage.com/docs/v0.1.x/server-configuration/#enabled

edited Mar 19 '16 at 15:03

answered Mar 19 '16 at 14:24

Sam Selikoff

12,366
13
58
104

thanks for this, I'm getting the following errors though: `mirage/config.js: line 3, col 7, 'environment' is not defined.` and `mirage/config.js: line 4, col 5, 'ENV' is not defined.` any ideas? – Don Giulio Mar 19 '16 at 15:00
thanks, actually the file to change was `config/environment.js` as mentioned here: `http://www.ember-cli-mirage.com/docs/v0.1.x/server-configuration/` thanks for giving me the hint. – Don Giulio Mar 19 '16 at 15:11
actually still doesn't work, I think it's because my app on the server is in a subdirectory, of the domain, so mirage won't find it, how can I configure a namespace in mirage if the environment is production? – Don Giulio Mar 19 '16 at 15:22
1

Mirage runs all in the browser, it will never hit your actual server. But if you've configured your Ember app to make XHR requests to a different domain/namespace in production, you'll need to tell Mirage about it. Import your app's config into `mirage/config.js` and set `namespace` based on its `environment` – Sam Selikoff Mar 20 '16 at 12:40
Thanks, I configured that, but still having a problem, I opened this other question with the details. http://stackoverflow.com/questions/36113930/uncaught-error-could-not-find-module-private-system-references-record-import – Don Giulio Mar 20 '16 at 13:00

score 0 · Answer 2 · answered Mar 19 '16 at 18:56

Since you said you can use PHP you're likely using Apache and will need to change how it handles requests to work with html5 pushState ... If you don't already have an .htaccess file in your /myproject directory, create it and have it contain:

FallbackResource /myproject/index.html

This will have Apache pass along any requests for things that don't exist (and normally would result in a 404) to the path specified ...

ember demo ember-cli-mirage doesn't work on server without backend

2 Answers2