Solved

Separate AngularJS Frontend from SlimPHP Backend

Posted on 2015-02-19
7
285 Views
Last Modified: 2015-02-19
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
0
Comment
Question by:jacobs99
  • 4
  • 3
7 Comments
 
LVL 11

Expert Comment

by:Radek Baranowski
ID: 40618722
I suppose you need to add ip of the php server in serviceBase variable, so it looks like:

 var serviceBase = 'http://<host_address_or_name>:<webserverport>api/v1/';

where in place of <..> you put appropriate values
0
 

Author Comment

by:jacobs99
ID: 40618738
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).
0
 
LVL 11

Expert Comment

by:Radek Baranowski
ID: 40618805
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.
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

Author Comment

by:jacobs99
ID: 40618828
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.
0
 
LVL 11

Accepted Solution

by:
Radek Baranowski earned 500 total points
ID: 40618836
pt1. the only idea now is connectivity/firewall setup
pt2. get Postman extension for Chrome: https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm
pt3. whole different story about using .htaccess...but a sample one very simple disallowing anything apart from .html from the outside might be:

Order allow,deny

Deny from all

<FilesMatch .js|.css>
     Allow from 127.0.0.1
</FilesMatch>

<FilesMatch .html>
        Allow from all
</FilesMatch>

Open in new window

0
 

Author Comment

by:jacobs99
ID: 40618859
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
0
 
LVL 11

Expert Comment

by:Radek Baranowski
ID: 40618969
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:

res.setHeader('Access-Control-Allow-Origin','*');

Open in new window


good luck
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

It is possible to boost certain documents at query time in Solr. Query time boosting can be a powerful resource for finding the most relevant and "best" content. Of course the more information you index, the more fields you will be able to use for y…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now