How to Depict Back-End and DB Relationship in a Component Diagram

_{Given the uncertainty of my answer, I make it a community wiki. Feel free to edit it.}

It depends on the abstraction level you use. One way is to be language-agnostic. Here's an example of a sequence diagram:

Source: UML Sequence Diagrams Examples

As you can see, the diagram encompasses both client-side and server-side. Applying the same to a communication diagram would be harder, since communication diagrams have generally a smaller scope, but it's still possible.

The major factor to take in account is what is the purpose of your communication diagram.

• One possibility is to use a communication diagram to show the entire process. Such diagram may be language-agnostic and mix several parts of the system or layers within it.

  This is suited well for an overall view of a system in a highly abstract way. It may be used, for example, to give a general idea to a new developer of some complicated stuff which happens between a client and a service, between JavaScript and server-side language or between a consumer and its API.

  If your company has a single developer who does both client and server-side programming, then such diagram may be useful to him.

• Another possibility is to use a communication diagram to show precise flow within a layer of a part of a system. Here, other parts and layers would be interpreted as black boxes which communicate through interfaces.

  This is suited well for a detailed view of communications flow within a system. For example, a JavaScript developer cares about communications flow happening in the browser, but doesn't care about server-side stuff. In the same way, a developer of an API won't need to look at the communications diagram which explains how a client of the API is dealing with the different messages.

  If your company has dedicated client-side programmers and dedicated server-side programmers, they would probably favor this sort of communication diagrams (which doesn't exclude that they should also have a good overall view of the whole system.)

In practice, I've never seen communication diagrams so general that they would encompass for example both client and server-side. I don't think it's wrong to do such diagrams, but it's not a common practice.

Edit: I talked with a colleague more experienced than I in UML; his suggestion is to create two communication diagrams, one for JavaScript, another one for server-side. Mixing both would make the diagram more complicate than it needs to be, and some people may not understand which step is happening where.

So unless you are sure that having a single diagram would benefit you, stick with separate diagrams that you can put side by side for an overall view.

It's a front-end, back-end application, with a REST interface in between. You already have full separation.

My vote is for option # 3. You seem worried about configuration, but that's kinda the whole point. Configuration allows you to have full separation without requiring tightly-coupled code bindings. If you're worried about CORS, put everything on one domain. If you must have CORS, the best way to manage that is a configuration.

But there is no "best practice" here. The best practice is the one that is going to best meet your specific needs.