# The Problem
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)
Don’t like reading or want to see a concrete example? Watch the video at the top of the page!
Angular - The Complete Guide
Learn Angular from A - Z with this best-selling, 5* rated complete course!
React - The Complete Guide (updated to include Hooks)
Learn React from the ground up - with and without React hooks. This course will take you from zero to advanced React developer!
Vue.js is a great and very popular alternative to Angular and React. Learn it from scratch with my complete guide!
# How to NOT connect your App to a Database
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.
# The Real Problem: Security
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!
# SDKs instead of Http Requests
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.
Watch the video at the beginning of this article for a concrete example using MongoDB Stitch!