How to Connect Angular (or React...) to a Database

In modern web applications, you often work with Angular, React or Vue.js to build and control your browser-based user interface. You build so-called Single Page Applications (SPAs).

In any web app (or pretty much any...) you probably also need to save and fetch data to and from a database. Otherwise, you can only work with your data in memory and hence you'll lose all data upon every app restart (i.e. on every browser refresh, new page load).

The obvious question therefore is: How can you connect your Angular/ React/ Vue / ... app to a database - be that a SQL (e.g. MySQL) or NoSQL (e.g. MongoDB) database?

(side note: If you want to learn more about SQL vs NoSQL databases, you can also check this article + video)

You could think that you can simply connect your SPA (built with Angular, React, ... you name it) in a similar way as you connect a Node.js app (or any other server-side app):

// Dummy code - does not really work
mysql.connect('sql-database-path', 'username', 'password')
    .then(db => db.query('SELECT * FROM todos'));

This is just a dummy code statement, but your server-side code could look like this. You use some database driver/ package (in this example for MySQL) and you then use methods exposed by that driver to connect to the database and then run queries against it.

This package roughly works like this.

BUT: It only works like this for Node.js. And whilst you have similar packages and drivers for PHP, Java etc., you won't find them for Angular, React or Vue (or frontend JavaScript in general).

Why?

If you would connect your SPA (i.e. your app that runs in the browser) to a database like shown in the snippet above, you'd have to put all your database credentials and queries directly into your frontend code.

This code is accessible by everyone though!

You need to fancy hacking skills to see that code - the browser dev tools will suffice!

Oh, look - that's your code! Readable by everyone since that's how the web works.

If you would have your code to connect to a database in there, you would also expose all your credentials to log into that database as part of this code. Not really a good idea...

That's why any code that "talks" to a database belongs onto a server: Your users can't access that code. And your frontend (i.e. the Angular/ React/ Vue / ... app) only sends Http requests to that backend server.

Typically, you therefore expose a REST API on your backend - that API can of course be written with any server-side language you want. Node.js, PHP, Java - totally up to you!

In some projects, you might also work with solutions like Firebase or MongoDB Stitch.

It might look as if you would be interacting directly with a database in such cases. But this is not what's happening! Instead, services like these give you a backend (i.e. an API) which is kind of hidden from you. Instead, you use their SDKs to interact with that backend API.

Whilst it therefore might look like you're talking directly to the database, you still only talk to a web API which then in turn runs the database queries.