How to serve multiple front-end (AngularJS) Apps and 1 back-end (Laravel) App on single server?

Question

Let's say I want to build an API with Laravel, (that doesn't serve any HTML content) and it's domain is http://api.whatever.com

on the other side, I want 2 different front-end AngularJS Apps to use that API (one for the normal users and one of the admins)

where the users app is hosted on http://whatever.com and the admins app is hosted on http://admin.whatever.com and http://whatever.com/admin

My 2 questions are:

1) What are the advantages and disadvantages of building and serving those 2 different front-end apps inside Laravel (with NGINX) and outside Laravel (as stand alone apps maybe hosted with NodeJS)?

2) And since I have a big feeling that those apps should be built and served outside Laravel, for many reasons. How can I serve multiple front-end (AngularJS) Apps and 1 back-end (Laravel) App on single server??? should I configure NGINX with NodeJS?! What is the trick here?

There is no problems, you can create two angular apps in different folders. And you need to setup nginx — Veniamin
– Veniamin, Commented Mar 25, 2016 at 12:10
First, I am not sure that you need 2 angular apps. Actually why? You can make 1 app which will change look depending on user role. Usually you do not need to secure say admin.html template, you just secure data. Second, single-page angular routing, states change etc. is nothing from server point of view -- you stay on same page, usually index.html. So you may have index1.html, index2.html on server, they are not related in any way, and their js-objects are totally independent. For html5mode=false you dont even need to configure anything for this. — Petr Averyanov
– Petr Averyanov, Commented Mar 25, 2016 at 12:28
Sounds like you are over thinking how to serve the html files. It's not compicated — charlietfl
– charlietfl, Commented Mar 25, 2016 at 12:50
@PetrAveryanov the only reason why I need separate angular apps is because I can let 2 different developers work in parallel each on it's own app having his own dependencies and versions etc.. I don't see anything similar between both apps and since everything is different and might be built in different time as well. Then why to merge them under 1 project as single Angular app! — Mahmoud Zalt
– Mahmoud Zalt, Commented Mar 25, 2016 at 14:20
@charlietfl It's not over thinking! I know there are many options out there to achieve this. What I'm trying to get from this question is the best modern trusted way to do. I just wanna make sure I'm doing it the right way. — Mahmoud Zalt
– Mahmoud Zalt, Commented Mar 25, 2016 at 14:22

Mahmoud Zalt · Accepted Answer · 2016-04-06 06:00:20Z

1

Well the result is that the best way to do this is to configure your server (NGINX in my case) to point to all your Apps which can live anywhere you like.

Here's how it works:

The folder structure can be as follow:

- Project Root
-- Clients
--- Web
---- Admin
---- User
-- Server
--- Laravel Installation Here

The NGINX configuration using Homestead:

- map: whatever.pro
  to: /path-to-project-root/clients/web/user
- map: api.whatever.pro
  to: /path-to-project-root/server/public
- map: admin.whatever.pro
  to: /path-to-project-root/clients/web/admin/public

answered Apr 6, 2016 at 6:00

Mahmoud Zalt

31.5k8 gold badges91 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to serve multiple front-end (AngularJS) Apps and 1 back-end (Laravel) App on single server?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related