EmberJS Nested routes pictures doesn't load - ember.js

I have ember.js application.
root
/app
/components
/templates
/gallery
application.hbs
gallery.hbs
index.hbs
app.js
index.html
router.js
/public
/assets
--folders with pictures inside which contains pictures
I have 4200/gallery
Which load up pictures without ANY problems.
But in 4200/gallery/nested
It gives me:
GET http://localhost:4200/assets/bb/1.jpg 404 (Not Found)
Where is the problem please ? What do I do wrong it's frustrating that it does load without a problem on gallery page but it doesn't laod up on nested route.
It keeps me away from finishing this project.
Thank you for any answers.

Related

How to use Marzipano 360 media viewer in Django project?

I've got a Marzipano sample with all the necessary files and folders. When I open index.html a 360 viewer runs in the browser and everything works fine.
Now I want to get the same thing working inside of Django project.
The directory structure for Marzipano sample looks this:
vendor/
tiles/
img/
data.js
index.html
index.js
styles.css
The only folder I care is tiles, which has many folders with images.
To get this working in Django I have to put those images in the right place in the static folder of Django project.
I tried to figure out where exactly inside of JavaScript files the image paths are set, but unfortunately I have very poor knowledge of JavaScript.
I would be grateful for any advice.
If anyone ever comes across this problem, one way to solve it is through web server configuration. I am working with nginx and I could open a 360 viewer at desired URL by using 'location' directive:
location /gallery-360/ {
root home/user/project;
}
This way there is no need to deal with Django urls, views and static files issues.

Generating Production Build index.html With Server Side App

I want to do something very simple that I am a little surprised people are not talking about more. I would like to generate on my server my own index.html from the files that are created from building ember for production. I use ember for part of my application and so when a certain URL is hit, I would then like my ember app to take over. I have tried generating my own index.html by changing the flag storeConfigInMeta in ember-cli-build.js.
storeConfigInMeta: false
This gets rid of the ember app having its configuration stored in a meta tag but the app still does not work and gives the error,
Uncaught ReferenceError: define is not defined
I have the latest version of ember and I am building ember with the command,
ember build --env production
My server generated index.html looks identical accept for the integrity attributes set on the include js and css scripts. Is their anything I am missing about approaching ember this way? Should I not be trying to do this?
when a certain URL is hit, I would then like my ember app to take
over.
You need to configure app server to return index.html file for the certain URL.
Generally, it's not required you to create your own index.html.
May be you can check ember-islands addon to include Ember components anywhere on a server-rendered page.
I made a mistake. I was grabbing the production assets with a regular expression with my server and generating my index.html file with these assets in the wrong order. To anyone looking to do this, it is very possible and is more preferable in my opinion to using the generated index.html unless you are using ember for your entire site's routing. However do use the setting in ember-cli-build.js,
storeConfigInMeta: false
This will make it so your ember app stores it's settings in javascript instead of in a tag. This is required for generating your own index.html file.

Ember routing non-root domain

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
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.
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...

how to deploy ember-cli + rails app on heroku

I am trying to deploy an Ember-cli app by copying the files generated by ember build into the rails public folder following the approach shown in:
http://blog.abuiles.com/blog/2014/05/21/deploying-ember-cli-and-rails-to-heroku/
https://github.com/dockyard/ember-cli-plus-backend/tree/rails-served-html/frontend/app
But it doesn't seem to work as shown in the app on heroku, rather than display the content, it displays raw json on the web page which suggests the emberjs route model hook is not being called when you enter the app via url. The JSON it displays is something like this:
[{"id":1,"name":"james","presentation_ids":[1,2]},{"id":2,"name":"charle","presentation_ids":[3]}]}
However, if I leave the index.html file generated by ember-build in the rails app/public folder instead of copying the content of the index.html to rails layout/application.html.erb, the content of the ember-cli app's application.hbs will display correctly but if I directly load any route in the browser, it will again return a raw json rather than display the content.
You're routing root requests to speaker#index, which is why you're getting the json response when visiting /.
You want your rails app to serve up index.html on all requests other than /api, something like
get '*path', to: 'index#show'
That action should just serve up your Ember CLI project's static index.html file.
I'd also suggest getting this working locally before messing with Heroku.

Creating an ember application off a path

I've been working with Ember (RC1) a bit - and I can create apps that load from the root of a website (foo.com/), but now I'm trying to delay loading an app until I hit a given path within my website (foo.com/app), as opposed to loading it at the root.
That "app" page is served up from the server with a div that ties to my router's root element. The root of my app should display my applicationView and related template.
I think I'm doing everything correctly, and am not getting errors, but the only thing I see within the div where I expect my app to show is:
<div id="ember247" class="ember-view"></div>
At this point, my template should only show some raw html, but i'm getting nothing! Anyone have any ideas?