0

I am using the ember quick-start tutorial app. Everything works great locally, but when deployed to a test environment the app is 404ing on loading all resources.

I am deployed to a subfolder out somewhere and apparently ember is trying to find it against the root domain, instead of subfolder

Example: http://example.com/embertest/index.html The assets folder is obviously under http://example.com/embertest/assets/, but on load it's trying to grab it from http://example.com/assets/ which doesn't exist

How can I have ember use relative paths in this case?

Update 1

After some googling I tried editing the environment.js ENV.baseURL attribute In the if(environment === 'production') block I added ENV.baseURL = '/website/dist/';, obviously I am building with ember build --env production

I am getting same 404s when going directly to a route but now also getting an error on index.html, Uncaught UnrecognizedURLError: /index.html

I tried every combination of '/website/dist/', 'website/dist/', '/website/dist' as well

Update 2

I have now also tried manually editing the <base href="/website/dist/"> in my index.html after a prod build. Same errors as from update 1

2
  • How does your Router.map() look? Or is it just unmodified from the tutorial app (link?)
    – Thernys
    May 6, 2016 at 15:49
  • It was unmodified from 'ember new' and 'ember generate route'. Entire issue was resolved by changing ENV.locationType to hash per my answer below, everything working perfectly now, I just don't understand the why of it. May 6, 2016 at 16:14

2 Answers 2

1

You need to understand that you can't just put an ember application to a normal webserver folder. Ember uses the history API to change the URL when you do a route change but it can't control what your web server deploys when its directly fetched.

So you have your ember index.html on http://example.com/app/index.html your web server usually will only deploy this file when you open http://example.com/app/ or http://example.com/app/index.html. But for a route foo your url is http://example.com/app/foo and your web server is looking for a directly foo that does not exist. So you have to configure your web server so its always responding with your index.html if your not requesting another existing resource (like an image, js or css file)!

How to do this depends completely on your webserver.

You must also notice that you should enter your assets in a full root relative path and specify rootURL so your router knows which part of the URL is your path and where your routing begins.

You should not use baseURL because its an upcoming deprecation!

You really should read this really new blog post!

Use ENV.locationType = 'hash' to prevent the usage of the history API is still always an option, but definitly an ugly one.

2
  • Thanks for the detailed response @Lux; however... this is just hosted out in an azure blob with no interesting settings (or control thereof). Once I changed to locationType hash it all is working correctly. Are there downsides to this? It serves up index.html#/routeName and appears to be working just fine regarding browser history and direct navigation or bookmarking as well May 8, 2016 at 11:32
  • @JoshuaOhana I'm pretty sure you can control that somehow but if the hash works for you go for it! The biggest downside you may have is with SEO, but for SEO you need other optimation as well.
    – Lux
    May 9, 2016 at 10:32
0

Okay so I solved this by changing ENV.locationType = 'hash' in environment.js Would still love an explanation of what's going on as this feels a little bit hacky...

1
  • not really, this is from what I gather the standard for deploying a ember app.
    – Rakesh G R
    May 7, 2016 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.