I have built an ember application which has two routes say route1 and route2.
I got the compiled files from dist folder. I put those files in a tomcat server.
When i try to access that file through index.html, it works fine. But how can i navigate to a route in that compiled application?
Normally in ember-cli development environment, we navigation to a route using server:port/route_name
How can i perform the same operation in index.html without using any hyperlinks for routes?
Edit:
Got the answer. Setting ENV.locationType = 'hash' solved the navigation problem. I was able to access the route using index.html#/route_name
But I am still stuck with how to integrate ember app into a non-ember app.
Got the answer.
Setting ENV.locationType = 'hash' solved the navigation problem. I was able to access the route using index.html#/route_name
Setting ENV.APP.rootElement = '#ember-testing' solved inserting ember app into non-ember app. Create a div with the rootElement ID and then ember will automatically place the app inside the div.
Related
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...
once building the ember app using ember build -prod, and viewing the app, I only get the index and whenever I try to access another route for example /about I get a 404, same with all of the other routes. All routes work when you serve with the cli.
Below is the current source
https://gitlab.com/remon/ember/tree/master
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
I'm using Ember-CLI for an app that is embedded in a larger Java application:
The idea is having the ember-cli build triggered by the main app and then the resources in dist are copied over the main one where it will be served from the server as static resources.
The problem I have is that Ember-CLI injects the configuration defined in environment.js as a tag in the generated index.html like this:
<meta name="user/config/environment" content="%7B%22modulePre.your.config">
I'm not using the index.html, but a jsp with more data from the main application and the Ember rootElement tag.
This makes the process quite cumbersome because every time the environment.js is changed we have to manually copy the generated meta tag with the new config and put in the jsp.
I was thinking about copying manually the environment.js from the source code in the build project and import it, but was wondering if there is a better alternative to make the configuration available without the html injection?
Seems like I missed this in the documentation:
new EmberApp({
storeConfigInMeta: false
});
With this parameter the environment.js properties are merged into the final js compiled in production. Duh!
What is the best approach to use EAK and ember-data-tastypie-adapter?
I am currently trying the following:
Django running on localhost:7000
EAK running on localhost:8000
Added ember-data-tastypie-adapter to bower.json
Added both JS files to index.html
<script src="/vendor/ember-data-tastypie-adapter/packages/ember-data-tastypie-adapter/lib/tastypie_adapter.js"></script>
<script src="/vendor/ember-data-tastypie-adapter/packages/ember-data-tastypie-adapter/lib/tastypie_serializer.js"></script>
Created everything needed on Django side
I figured that I had to create serializers/application.js and put in it:
export default DS.DjangoTastypieSerializer.extend();
Also adapters/application.js needed adjustments:
export default DS.DjangoTastypieAdapter.extend({
serverDomain: 'http://localhost:7000',
});
Requests go to Django and responses are sent.
However in EAK this gives "Sorry, something went wrong" message without any further information (empty error message box). No errors in console either.
If I remove serializers/application.js I get similar message, in this case with information about the error:
Assertion Failed: Nested controllers need be referenced as [/django/tastypie],
instead of [_djangoTastypie].
Refer documentation: http://iamstef.net/ember-app-kit/guides/naming-conventions.html
Do I have to define defaultSerializer in adapters/application.js? If so, what is it, /django/tastypie or something else?
What am I missing to integrate ember-data-tastypie-adapter in EAK? Trouble is, I have not seen any example where EAK and tastypie would be working together.
Of course this two local server system is development environment. Production is planned like here, both API and JS is served by one Django instance.
UPDATE:
Creating deployment code by grunt dist and serving it using Django works.
I suspect that problem lies with different JSON origin.
Turns out, that EAK has API proxy option.
Updated package.json to my API settings:
"proxyURL": "http://localhost:7000",
"proxyPath": "/api/v1",
Removed custom settings from adapters/application.js.
Now running grunt server:proxy gets data from Django. And ember.js app works without errors, not being same origin was most likely the problem.