jacobs99
asked on
Separate AngularJS Frontend from SlimPHP Backend
Hi, I have the following sample webapp angularjs/slim which works fine on Linux Server (A)
I need to separate backend slim php api and frontend angularjs app into two different webservers.
How do I adjust which files to accomplish this? It should look like this on the application server (B)
(donwload link for entire app: http://www.angularcode.com/download-link/?url=https://app.box.com/s/pqr0wo3osvoahyh7qtsa)
************************** ********** *
.htaccess
************************** ********** *
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ %{ENV:BASE}index.php [QSA,L]
************************** ********** *
data.js
************************** ********** *
app.factory("Data", ['$http', '$location',
function ($http, $q, $location) {
var serviceBase = 'api/v1/';
var obj = {};
obj.get = function (q) {
return $http.get(serviceBase + q).then(function (results) {
return results.data;
});
};
obj.post = function (q, object) {
return $http.post(serviceBase + q, object).then(function (results) {
return results.data;
});
};
obj.put = function (q, object) {
return $http.put(serviceBase + q, object).then(function (results) {
return results.data;
});
};
obj.delete = function (q) {
return $http.delete(serviceBase + q).then(function (results) {
return results.data;
});
};
return obj;
}]);
************************** ********** *
New frontend dev03.photomonkey.ch (B)
************************** ********** *
webroot of dev03.photomonkey.ch
| index.html
+---app
| app.js
| data.js
| directives.js
| productsCtrl.js
|
+---css
+---fonts
+---js
\---partials
************************** ********** *
Entire APP on dev02.photomonkey.ch
Use this only as the backend! (A)
************************** ********** *
webroot of dev02.photomonkey.ch
| index.html
|
+---api
| +---libs
| | \---Slim
| | | Environment.php
| | | etc
| | |
| | +---Exception
| | +---Helper
| | +---Http
| | \---Middleware
| \---v1
| .htaccess
| config.php
| dbHelper.php
| index.php
|
+---app
| app.js
| data.js
| directives.js
| productsCtrl.js
|
+---css
+---fonts
+---js
\---partials
I need to separate backend slim php api and frontend angularjs app into two different webservers.
How do I adjust which files to accomplish this? It should look like this on the application server (B)
(donwload link for entire app: http://www.angularcode.com/download-link/?url=https://app.box.com/s/pqr0wo3osvoahyh7qtsa)
**************************
.htaccess
**************************
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ %{ENV:BASE}index.php [QSA,L]
**************************
data.js
**************************
app.factory("Data", ['$http', '$location',
function ($http, $q, $location) {
var serviceBase = 'api/v1/';
var obj = {};
obj.get = function (q) {
return $http.get(serviceBase + q).then(function (results) {
return results.data;
});
};
obj.post = function (q, object) {
return $http.post(serviceBase + q, object).then(function (results) {
return results.data;
});
};
obj.put = function (q, object) {
return $http.put(serviceBase + q, object).then(function (results) {
return results.data;
});
};
obj.delete = function (q) {
return $http.delete(serviceBase + q).then(function (results) {
return results.data;
});
};
return obj;
}]);
**************************
New frontend dev03.photomonkey.ch (B)
**************************
webroot of dev03.photomonkey.ch
| index.html
+---app
| app.js
| data.js
| directives.js
| productsCtrl.js
|
+---css
+---fonts
+---js
\---partials
**************************
Entire APP on dev02.photomonkey.ch
Use this only as the backend! (A)
**************************
webroot of dev02.photomonkey.ch
| index.html
|
+---api
| +---libs
| | \---Slim
| | | Environment.php
| | | etc
| | |
| | +---Exception
| | +---Helper
| | +---Http
| | \---Middleware
| \---v1
| .htaccess
| config.php
| dbHelper.php
| index.php
|
+---app
| app.js
| data.js
| directives.js
| productsCtrl.js
|
+---css
+---fonts
+---js
\---partials
ASKER
Hi, I thought so, too. Did not work, I tried:
var serviceBase = 'http://dev02.photomonkey.ch/api/v1/';
and all the variations with IP and Port (80).
var serviceBase = 'http://dev02.photomonkey.ch/api/v1/';
and all the variations with IP and Port (80).
because you placed it wrongly.
var serviceBase = 'http://80.74.136.2]:80/api/v1/';
']' can't be there
just try:
var serviceBase = 'http://dev02.photomonkey.ch/api/v1/';
when I ran GET on 'http://dev02.photomonkey.ch/api/v1/products' I received a list of products. so the URL must be valid
btw. you need to secure your files on the server because it is not right that I can sniff your javascript files without any limits.
var serviceBase = 'http://80.74.136.2]:80/api/v1/';
']' can't be there
just try:
var serviceBase = 'http://dev02.photomonkey.ch/api/v1/';
when I ran GET on 'http://dev02.photomonkey.ch/api/v1/products' I received a list of products. so the URL must be valid
btw. you need to secure your files on the server because it is not right that I can sniff your javascript files without any limits.
ASKER
Hi Radek,
thanks again for your comments.
1. I had already tried
var serviceBase = 'http://dev02.photomonkey.ch/api/v1/';
and var serviceBase = 'http://80.74.136.2:80/api/v1/';
and unfortunately it does not work. If you can suggest something else that would be great.
2. thank you for veryfying the RESTFul API! How did you do that? What is an easy way to do this with Chrome?
3. I agree about security, though not prio now, however.. Is there an easy way to do it while still keeping the folders below the public route? Which permission do I give?
Thank you!
PS I can open up the other questions seperately. Right now I really need the answer for #1.
thanks again for your comments.
1. I had already tried
var serviceBase = 'http://dev02.photomonkey.ch/api/v1/';
and var serviceBase = 'http://80.74.136.2:80/api/v1/';
and unfortunately it does not work. If you can suggest something else that would be great.
2. thank you for veryfying the RESTFul API! How did you do that? What is an easy way to do this with Chrome?
3. I agree about security, though not prio now, however.. Is there an easy way to do it while still keeping the folders below the public route? Which permission do I give?
Thank you!
PS I can open up the other questions seperately. Right now I really need the answer for #1.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Radek, before asking further on the Web App side, I will put this question to my provider.
Thank you very much for your help! I really appreciate the quick response,
Best
Peter
Thank you very much for your help! I really appreciate the quick response,
Best
Peter
yes, you would need to investigate if requests from dev03 are put through to dev02's port 80.
although I can access it freely from over here so there should be noe issue here...I suppose.
yeah, this seems to be CORS problem:
http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource
so you would need to alter code on dev02 to allow for CORS, probably by adding somewhere declaration similar to:
good luck
although I can access it freely from over here so there should be noe issue here...I suppose.
yeah, this seems to be CORS problem:
http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource
so you would need to alter code on dev02 to allow for CORS, probably by adding somewhere declaration similar to:
res.setHeader('Access-Control-Allow-Origin','*');
good luck
var serviceBase = 'http://<host_address_or_name>:<w
where in place of <..> you put appropriate values