Ember-cli ProxyPass - ember.js

I'm developing an app using ember-cli and it need to send http request to a server using a ProxyPass.
My server looks like this : subdomain.domain.com/api/clients/users and Ember-cli create by default http://localhost:4200/
I tried to do this in my http.conf :
ProxyPass /api/clients http://subdomain.domain.com/api/clients
This is working fine for http://localhost/api/clients, but I don't know how to make it works with a non standard port such as 4200.
I also try to create a virtualHost but it's the same :
<VirtualHost *:4200>
ProxyPass /api/clients http://subdomain.domain.com/api/clients
</VirtualHost>
How can I do that ?
[EDIT]:
I set my RESTAdapter like this :
var ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api/clients'
});

During development, you should use an http-proxy generator to create a path to your API. ember help generate lists the syntax:
http-proxy <local-path> <remote-url>
Generates a relative proxy to another server.
This generates a proxy that only exists during development (in /server/proxies/), and is not compiled in a production build. This is likely what you're looking for, based on what you've provided above:
ember generate http-proxy api http://subdomain.domain.com
Ember uses node-http-proxy to create the proxy, so you can customize it more using that documentation if necessary.

Related

Browserify + WebStorm debug breaks routing in React-Router v4 BrowserRouter

I am writing a single page app with React for educational purposes. My React-Router v4 BrowserRouter handles client side routing correctly on CodeSandbox but not locally. In this case, the local server is the webstorm built-in devserver. HashRouter works locally but BrowserRouter does not.
Functioning properly: https://codesandbox.io/s/j71nwp9469
You are likely serving your app on the built-in webserver (localhost:63342), right? Internal web server returns 404 when using 'absolute' URLs (the ones starting with slash) as it serves files from localhost:port/project_name and not from localhost:port. That's why you have to make sure to change all URLs from absolute to the relative ones.
There is no way to set up the internal webserver to use project root as server document root. But you can configure it to use URLs like http://<host name>:<port> where the 'host name' is a name specified in hosts file, like 127.0.0.1 myhostName. See https://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559.
The solution was to understand how push state routing and the history API works. It is necessary to proxy requests through the index page when serving Single Page Applications that utilize the HTML5 History API.
The Webstorm dev server is not expected to include this feature, therefore the mention of Webstorm in this thread was a mistake.
There are multiple libraries of < 20 lines which do this for us, or it can easily be hand coded.

How to get subdomainName in Ember-cli (2.3)

I have an ember-cli project using ember2.3 that is proxying to a server api. Right now, for my development environment, for example, I use this to proxy to the node server at :3000.
ember serve --proxy http://localhost:3000/
Part of my server side code needs the subdomain of the url to fetch data. Before, in Ember1.7, because I was not using ember-cli and not proxying, the subdomainName could be gotten via req.subdomains. But now, i need to make sure that the subdomain is being sent in the request's headers via the RESTAdapter.
Therefore, I need a way to get the current url and subsequently the subdomain of the url that the application is at.
For example, if I were current at the path:
http://dev.localhost:4200/users
I would need to parse out "dev" and send it in the request headers. How would I get that subdomain and/or the url.
First get hostname and then subdomain
let hostname = window.location.hostname; // `dev.localhost` for you
let [subdomain] = hostname.split('.'); // `dev`

WSO2 Identity Server dashboard behind reverse proxy redirects to wrong port on login

I have a WSO2 Identity Server behind a reverse apache proxy. The proxy listens on port 443 and the IS on port 9443.
I can see the dashboard (https://myhost/dashboard/) but as soon as I click 'Login' I am redirected to the wrong port (https://myhost:9443/samlsso )
I followed all the relevant instructions about putting the IS behind a proxy but it does not work.
In my apache config I have:
ProxyPass / https://localhost:9443/
ProxyPassReverse / https://localhost:9443/
SSLProxyEngine on
In my repository/conf/carbon.xml I have set <HostName> and <MgtHostName> to the name of the proxy.
In repository/conf/tomcat/catalina-server.xml I've added proxyPort and proxyName to the Connector.
Is there something else which needs to be configured?
Update:
I grepped for 9443/samlsso and changed those occurrences in the configuration files but it did not solve my problem. I am still redirected to port 9443.
Then I grepped for 9443 and found ~80 occurrences in the configuration files. I find it hard to believe the proper way of configuring a simple port change is to change all those 80 occurrences.
Since people are still interested in this I dug up my notes on this and share the solution we had. It kind-of worked but I'm not sure if it is the proper solution and its not perfect but should get you started.
(We gave up on WSO2 stuff because of these and other problems)
So what we did for version 5.0.0 was:
change {{ site }} into localhost:9443 in :
identity.xml
security/authenticators.xml
security/sso-idp-config.xml
(and probably also in account-recovery-gadget.xml and dashboard-index.jag)
add the property proxyPort="443" to the connector for port 9443 in tomcat/catalina-server.xml
change the function getServerUrl() in deployment/server/jagerryapps/dashboard/util/utility.jag into return "https://localhost:9443/services";
change var postUrl = ... into var postUrl = 'https://{{ site }}/samlsso'; in samlsso.jag

Setting host on DS.RESTAdapter removing ember-simple-auth headers

I'm using the ember-cli-simple-auth with ember-cli and everything it working great, until I try and set a new host on DS.RESTAdapter application wide.
As soon as I set
// adapters/application.js
exports default DS.RESTAdapter.extend({
host: 'https://api.example.com'
});
or even using reopen() it clears all the headers set by ember-simple-auth.
Am I not setting this up right in ember-cli?
If you're using a different domain for the REST API you need to configure that for OAuth 2.0 authenticator (assuming you're using that) and also make sure you have CORS enabled on the server side. You can find a tutorial here: http://log.simplabs.com/post/90339547725/using-ember-simple-auth-with-ember-cli.

How to setup development environment for Ember.js + Express

I'm in the process of splitting into two different projects an Ember.js app and its Express REST API counterpart. I assumed that things would be cleaner this way.
Until then, my Express app was both serving REST endpoints and all static files like index.html and app.js. But now, ember-cli is in charge of serving the static files and the Express app handles authentication + REST.
The last issue I'm having is that I now have two different ports: ember-cli uses http://localhost:4200 and express uses http://localhost:3333. When I get the session cookie from Express upon authentication, it's never being sent on subsequent request because of same origin policy (see: How do I send an AJAX request on a different port with jQuery?).
Now if I understand correctly I have two solutions:
Setup Express to support JSONP and make sure Ember uses it too
Install a local Nginx or Apache and setup a proxy pass
The first solution is not ok because after deployment both apps will use the same domain/port. The second solution would probably work but it seems a bit ridiculous to ask developers to install a local web server to simply run an app.
I'm sure many of you have encountered that issue before. What would you suggest to make development easy?
Thanks!
Hmm. Seems like I found another solution:
Following instructions found there: http://discuss.emberjs.com/t/ember-data-and-cors/3690/2
export default DS.RESTAdapter.extend({
host: 'http://localhost:3333',
namespace: 'api',
ajax: function(url, method, hash) {
hash = hash || {}; // hash may be undefined
hash.crossDomain = true;
hash.xhrFields = { withCredentials: true };
return this._super(url, method, hash);
})
});
You will also need to add the following headers in the Express app:
// Add support for cross-origin resource sharing (localhost only)
app.all('*', function(req, res, next) {
if (app.get('env') === 'development') {
res.header('Access-Control-Allow-Origin', 'http://localhost:4200');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
}
next();
});
That's it! Last step is to make sure that Ember uses CORS only in the dev environment.
UPDATE
Ember-cli now has an integrated proxy feature that makes all the above obsolete.
From documentation: "Use --proxy flag to proxy all ajax requests to the given address. For example ember server --proxy http://127.0.0.1:8080 will proxy all your apps XHR to your server running at port 8080."