42

We are building a fully RESTful back-end with the Play Framework. We are also building a separate web front-end with a different technology stack that will call the RESTful API.

How do we deploy both apps so they have the same domain name, with some URLs used for the backend API and some for the front-end views?

For example, visiting MyDomain.example means the front-end displays the home page, but sending a GET to MyDomain.example/product/24 means the back-end returns a JSON object with the product information. A further possibility is if a web browser views MyDomain.example/product/24, then the front-end displays an HTML page, and that webpage was built from a back-end call to the same URL.

Finally, do we need two dedicated servers for this? Or can the front-end and back-end be deployed on the same server (e.g. OpenShift, Heroku)

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Erich
  • 2,509
  • 2
  • 21
  • 24
  • Can you please explain between a `GET` to `MyDomain.com/product/24` that should return a response from your frontend and one that should return a response from your backend? Do you require your backend users to add a special HTTP header? A specific User-Agent? – Carsten Aug 01 '13 at 07:35
  • Yeah the data type is determined via the HTTP header, as per REST protocol. That functionality though is secondary to getting both front-end and back-end on the same domain. – Erich Aug 01 '13 at 13:44

5 Answers5

29

You are gonna to dig yourself... deep :)

Simplest and most clean approach with no any doubt is creating a single application serving data for both, BE and FE, where you differ response (JSON vs HTML) by the URL, pseudo routes:

GET  /products/:id          controllers.Frontend.productHtml(id)
GET  /backend/products/:id  controllers.Backend.productJson(id)

Benefits:

  • single deployment (let's say to Heroku)
  • name space managed from one app
  • No need to modify the models in many apps after change in one of them

else if

If you're really determined to create a two separate apps, use some HTTP server as a proxy - for an example nginx - so it will send all requests to domain.tld/* to application working at port 9000 (which will answer with HTML) but requests to domain.tld/backend/* redirect to application working at port 9001 responding with JSON.

else

If you are really gonna to response with JSON or HTML depending on the caller you can try to compare headers to check if request was sent from browser or from AJAX call in each controller , but believe me that will become a nightmare faster than you thing... insert the coin, choose the flavor

Community
  • 1
  • 1
biesior
  • 55,576
  • 10
  • 125
  • 182
  • 2
    I've seen a lot of talk about creating a stand-alone REST backend app and a standalone JavaScript front-end app, I think Twitter might have gone this route at one point? But I never hear how they manage the server and domains. Do you think most who try this have separate domain names for each application? – Erich Aug 01 '13 at 17:18
  • I don't suggest separate domains as you will need to handle additionaly it while creating an AJAX requests, therefore I wrote in **else if** part how to do that (IMHO) with single domain and two(or more) apps using some http server on front of this stack – biesior Aug 01 '13 at 17:42
13

I thought of a different solution. I'm going to deploy back-end to a subdomain like

http://api.myapp.example/

and deploy front-end to the main domain:

http://myapp.example/

but I think you'd better use 2 different hosts, one for front-end and one for back-end (I searched the Google and this was the result of my investigations

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Mahdieh Shavandi
  • 4,906
  • 32
  • 41
2

Other possibility (therefore as separate answer) is using a possibility added in Play 2.1.x a Content negotiation I think it's closest for that what you wanted to get initially :)

biesior
  • 55,576
  • 10
  • 125
  • 182
2

Indeed its much easier to create a MEAN STACK APP and use one hosting like Heroku for instance. Your frontend is what it is, front end for your backend. It will be easy to access backend / restfulAPI's and frontend like this:

http://localhost:3000/api/contacts (to access and consume your API endpoint)

http://localhost:3000/contacts (frontend)

NB: localhost:3000 or http://yourapp.example/api/contacts (api) http://yourapp.example/contacts (frontend)

It's in the URL

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
dancun chiriga
  • 59
  • 4
0

I am hoping to have my two stand alone. My thought is that if each one is their own docker container within a single docker network then it would work. Something like NGINX would route external domain/url requests to the front end app container. Then the front end app just makes its api calls to the back end container by that container's hostname, a local network call. The back end container would just forward the http request to the application port within the container.

Ryan
  • 61
  • 6