Implementing a separated front-end and back-end for an application

Question

Implementing a separated front-end and back-end for an application

My web app consists of two separate components:

An API built on the Place Framework that handles requests of type /api/* for any client.
A decoupled front end created with AngularJS using grunt build.

Currently, the front end communicates with the API. I want to deploy both units behind a proxy like nginx, which will route incoming requests to the appropriate component. For instance, all /web/* requests should be served from a web directory containing the client-side source files (js/html/etc.), while /api/* requests need to be proxied to my Play framework server (path information must be passed on to ensure correct responses). So, a request such as GET domain.com/api/users should internally map to GET 127.0.0.1:9000/api/users.

I've come across discussions online about this setup and would like to get your input on the best approach for deploying these components in this manner.

In the future, I envision moving towards a service-oriented architecture and further enhancing the decoupling of components.

angularjs nginx playframework proxy

Answer 1

Answer №1

Successfully implemented Play Framework + AngularJS applications and discovered the effectiveness of utilizing nginx in the process.

Nginx provides a flexible pathway for accommodating additional services as your app's architecture expands. For instance, you can designate a distinct service for /api/user/* while still maintaining the standard service for other /api/* routes.

While there may come a time when a commercial product is necessary, for my current and foreseeable requirements, nginx continues to be an exceptional solution.

The critical component of my nginx configuration is outlined below:

server {
    listen 80;

    # To prevent Play from serving assets from its bundled jar, which works but is unnecessary when nginx can handle these files directly.
    location /assets {
        alias /app/live/my-play-app-here/active/public;
    }

    location / {
        proxy_pass http://localhost:9000;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

The emphasis lies on the /assets URI-space. Your setup may differ if your AngularJS app is packaged independently. In my case, the angular app resides within the Play app's /app/assets/javascripts directory. While there are pros and cons to this approach, I find it advantageous to allow nginx to serve static content instead of Play.

This information may not apply to your situation, but for those with everything contained within Play, unpacking the public directory during deployment (such as after executing play dist) is crucial. Here's an excerpt from my deployment script illustrating this process:

unzip lib/$SERVICE_BASE_NAME.$SERVICE_BASE_NAME-$VERSION.jar "public/*"

For your specific needs, consider starting with a configuration similar to the following:

server {
    listen 80;

    location /api {
        proxy_pass http://localhost:9000;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        alias /app/live/my-angularjs-app-here/active/public;
    }
}

Answer 2

Successfully implemented Play Framework + AngularJS applications and discovered the effectiveness of utilizing nginx in the process.

Nginx provides a flexible pathway for accommodating additional services as your app's architecture expands. For instance, you can designate a distinct service for /api/user/* while still maintaining the standard service for other /api/* routes.

While there may come a time when a commercial product is necessary, for my current and foreseeable requirements, nginx continues to be an exceptional solution.

The critical component of my nginx configuration is outlined below:

server {
    listen 80;

    # To prevent Play from serving assets from its bundled jar, which works but is unnecessary when nginx can handle these files directly.
    location /assets {
        alias /app/live/my-play-app-here/active/public;
    }

    location / {
        proxy_pass http://localhost:9000;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

The emphasis lies on the /assets URI-space. Your setup may differ if your AngularJS app is packaged independently. In my case, the angular app resides within the Play app's /app/assets/javascripts directory. While there are pros and cons to this approach, I find it advantageous to allow nginx to serve static content instead of Play.

This information may not apply to your situation, but for those with everything contained within Play, unpacking the public directory during deployment (such as after executing play dist) is crucial. Here's an excerpt from my deployment script illustrating this process:

unzip lib/$SERVICE_BASE_NAME.$SERVICE_BASE_NAME-$VERSION.jar "public/*"

For your specific needs, consider starting with a configuration similar to the following:

server {
    listen 80;

    location /api {
        proxy_pass http://localhost:9000;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        alias /app/live/my-angularjs-app-here/active/public;
    }
}

Implementing a separated front-end and back-end for an application

Answer №1

Similar questions

Develop a custom directive that incorporates ng-model and features its own distinct scope

Encountering an issue with npm installation in the angular-phonecat tutorial: Module 'update-notifier' not found

Discovering the values within a separate JSON object

Creating a div element with a fixed size that remains the same regardless of its content

Setting up NGINX (Engintron) for Node.js on a particular port to switch from HTTPS to HTTP

Encountering a Post Error when Using MongoDB with Node.js

Accessing form objects in Typescript with AngularJS

Altering the background-color of the navigation bar based on the current

AngularJS fetching data with two separate AJAX requests for both HTML and JSON responses

Show the value in the input text field if the variable is present, or else show the placeholder text

Utilize AngularJS to loop through a list with ng-repeat

After configuring Python Selenium with a proxy, the message 'There are no active modal dialogs' is displayed

Utilize the ng-click feature for swiping interactions in Ionic v1

What steps do I need to take to build something similar to this using AngularJS?

The issue of passing a local object from ng-repeat into a directive controller remains unresolved

Steps to trigger an AngularJS modal window when the URL contains a query string

Why is my Angular promise unexpectedly landing in the error callback?

Utilizing a variable within an Angular filter: A step-by-step guide

The AngularJS functionality is failing to execute within the Dockerfile during the npm installation process. The issue

Relocating the Asp.Net WebAPI to its own domain apart from the Asp.Net MVC site in preparation for the AngularJS