SaaS app with angularjs and nodejs, how do i organize different clients?

Question

I’m trying to decide what to do I this scenario:

I want to create a product that I want to sell in a SaaS business model, I already have the backend more or less thought out and some code in place in nodejs. It handles oAuth, sessions, and controls the roles of the users when accessing a certain endpoint.

The doubt is in the frontend architecture: Each client will share the same functionality, but the design of their page will be completely different from one another. I want to put as much of the app logic that I can in services, so I can reuse it, my idea is to only change controllers/templates/directives from client to client, is this ok?

Should I have different folders and serve the static files for each client from nodejs? ex: in nodejs I would know the url for client1 was called so I would serve client1-index.html?

should I put each client in their own nodejs server and their own host?

what other ways are there?

I would like to be able to easily reuse the services as I’ll be introducing changes to the features or adding more, and I want to do this upgrades easily.

There will also be an admin panel that will be exactly the same for all of them, the part that will change is the one my client's users see.

Think of it as having many clients and giving each of them a store, so they can sell their stuff. They want an admin page and a public page. The admin page will the same for all, but the public page has to change.

So, and app that shares the same functionality across users but looks completely different for each one of them, how would you do it?

Answer 1

Since You seem to be using Angular, have you thought of using the routing service? See more about it Here : https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Basically what it does is it based on the url loads a html page and a controller (JS file). For example if your user would just be move to url.com/client1 and angular would load client1.html and client1CTRL.

A Simple Structure would be the following:

• Index.Html- References to any dependencies, and in the body only a ng-view tag
• Templates (The Html Templates for each of the users)
  • Login
  • Admin
  • Client 1 etc...
• Scripts (JS)
  • External Scripts (Jquery, Angular ETC)
  • Index.js ( This is where you would have all your js controllers for each page)
• Stylesheets
  • CSS FILES GO HERE

Example Angular Routing: Tutorial

var App = angular.module('saasApp', []);

App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/admin', {
        templateUrl: 'templates/admin.html',
        controller: 'AdminController'
      }).
      when('/client1', {
        templateUrl: 'templates/client1.html',
        controller: 'client1Controller'
      }).
      when('/login', {
        templateUrl: 'templates/login.html',
        controller: 'loginController'
      }).
      otherwise({
        redirectTo: '/login'
      });
  }]);

Hope this works for what you are trying to do.

Answer 2

I guess your question is about Architecture. If I were to do same back-end and different front ends I would've implemented virtual template structure.

Permissions

I would have:

1. a super user that has rights to setup multiple stores.
2. an admin user that can manage a particular store

Super User template management.

1. I would have base templates in /admin/templates and when I create a new store I would copy them and stick them in database
2. I would create a menu with all the templates on the left hand side and have wysiwyg editor that allows me to modify those template for particular customer and upload additional assets (images, pdfs etc)
3. Template would support swig syntax
4. I would create a server route /get/tempalte/:id and dynamically parse those templates on server using swig engine

I hope this helps. The key here is to be able to update templates via browser and distribute them to new shops/customers via web panel.