High level architecture

No matter how small or large your project is, and frankly most of the times you will not be able to accurately predict this ahead of time, it is critical to start with a sound architecture that can scale if duty calls, but is not so burdensome that it will add days of effort to the execution of a simple app idea. The key is to ensure proper decoupling from the get go. In my view, there are two types of decoupling, one is a soft-decoupling, where essentially a Gentlemen's Agreement is made to not mix concerns and try and not mess up the code base. This can apply to the code you write, all the way to infrastructure-level interactions. If you maintain your frontend code under the same code structure as your backend code and if you let your REST server serve up your frontend application, then you are only practicing soft-decoupling.

You should instead practice hard-decoupling, which means frontend code lives in a separate repository, never calls the database directly, and is hosted on its own web server altogether. This way, you can be certain that at all times, your REST APIs or your frontend code is entirely replaceable independent of each other. Practicing hard-decoupling has monetary and security benefits as well. The serving and scaling needs of your frontend application are guaranteed to be different from your backend, so you will be able to optimize your host environment appropriately and save money. If you white list access to your REST APIs to only the calls originating from your frontend servers, you will vastly improve your security. Consider the high-level architecture diagram for our LocalCast Weather app below:

LocalCast High-Level Architecture

The high-level architecture shows that our Angular web application is completely decoupled from any backend. It is hosted on its own web server, can communicate to a web API such as OpenWeatherMap, or optionally be paired with a backend infrastructure to unlock rich and customized features that a web API alone can't provide, such as storing per user preferences or complimenting OpenWeatherMap's dataset with our own.