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?
Related
I hosted a small django project on virtual machine on digital ocean. Before I started using digital ocean to serve static files everything worked fine. But immediately I created a storage space and push my static files there the static files are not being served on the webpage, including django admin page (the project pages are showing net::ERR_ABORTED 403 (Forbidden). I have already installed django_storages and boto3.
I got some hint as to the possible cause of the problem when I clicked on digital ocean aws bucket url that looks like https://django-space-storage.nyc3.digitaloceanspaces.com. When I cliked on it I got the following error:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
It seems the browser is rendering my django pages as xml instead of html. I might be wrong with this assumption because I'm finding a hard time trying to understand what is actually going on. My question is, how do I cause the browser to render my django pages as html instead of xml?
The django geoposition widget shows up in admin when I am testing everything on my laptop with the django test server. However, when I put everything onto my production server, there is no map showing up and no labels showing up for the latitude and longitude. Both setups are using django == 2.1.7 and geoposition == 0.3.0. The production server is being served with nginx and gunicorn.
I opened the browser inspection window and it turned out that the geoposition.js is being served by django before jQuery is being called. So I tried calling jQuery directly in the geoposition.js file, but there is still no widget. I then revert everything back to it's original stage and I am now including js = (setting.STATIC_URL + 'geoposition/geoposition.js") in a media class in admin.py. This is causing two maps to appear in my test server, but still no map in my production server. I added an if statement so that it doesn't run if jQuery is not loaded, so no jQuery errors on the first geoposition.js being served. I added some console.log() statements to the file so I can see where it is at and it is getting into the main function fine, but not getting into the $('.geopostion-widget').each(function() ...
When I look at the html, the map and latitude and longitude values are wrapped in a div of class = "geoposition-widget", but that there is no such div from my production server which makes sense as to why the '.geopostion-widget' function is not doing anything. It seems to be putting in that div automatically on my test server, which it is supposed to do, but not on my production server.
Any clue as to why this is happening? Do I just need to create a custom form for the admin on my production server and wrap the field in a div with class = '.geopostion-widget'? This just seems kind of janky since it is working fine on my test server. Or does it have something to do with the way it's being served with gunicorn and nginx?
Found the answer on github here - https://github.com/philippbosch/django-geoposition/issues/83.
imdario's answer at the bottom solved it. Upgraded geoposition package to imdario's geoposition pakcage with 'pip install django-geoposition-2' and voila - it works.
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.
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...
I developed my webapp using Ember CLI 0.1.15, with emberjs. 1.8.1
I built the app with this command: ember build --environment production , and then I made a WAR out of the files produced under the dist folder of my project, and then I drop the WAR on my tomcat's webapps folder.
So, when I open the app: http://mytomcat/myapp/ ... it went fine, I saw my login screen, I logged in, and navigate around in my app, everythings fine. I could also do the back/forward button, and ember handles the transition well.
But when I click the refresh button on my browser -- the address bar of the browser was showing http://mytomcat/myapp/inventory/ at that moment -- I got 404 reply, from the tomcat.
Then I figured out why it happened: the refresh button sends a request to the tomcat for the path /myapp/myinventory/ ... of course the path /myinventory does not exist on the server. All those routes we see on the browser -- except for the base url, http://mytomcat/myapp/ -- are generated on the client-side.
So, my question is: what's the right way (in ember) to deal with this situation? I need the refresh button to just works. Any way for ember to intercept the refresh button clicked event?
I guess this issues is related to this: https://github.com/stefanpenner/ember-app-kit/issues/486 , but it does not have the answer I need.
Thanks in advance,
Raka
--- UPDATE ---
Probably relevant: http://eviltrout.com/2014/04/10/the-refresh-test.html
Inside config/environment.js file, there is a property called locationType. Set its value to hash
Manually moving files from your /dist folder is time consuming and annoying. Instead, you can specify an output-path property in your .ember-cli with the location inside webapps you are trying to move the files to. Another option is to specify this option to ember server or ember build