SENDING HTTP REQUESTS (CONNECTING TO A DATABASE)
How not to connect with a database:
Do not write code to connect with a database in your React App. This is because the
corresponding code is visible in the browser (under Sources tab in the developer
tools), and anyone can steal your database credentials from there.
Instead, the code to connect with a database is written on another backend app that
is placed (or deployed) on another server and it receives http requests from the
React App to then return the corresponding response to it.
Type script code is also compiled to JavaScript code which is then understood by the
browser
You should never add confidential information such as passwords, usernames,
email-addresses, database queries and database credentials into your frontend
code.
You can however add API keys as long as you want people to access them publicly. If
you do not want people to access them publicly, then you’ll have to restrict access to
your API using some mechanism, e.g. IP whitelisting or some other logic.
You cannot hide your front-end logic from users but that also might not be a big
problem as the production code is minified and hard to read; this is because the
variable names are shortened and there are no whitespaces too. Also, most of the
core business logic is usually present on the server side.
How not to connect with a database:
Do not write code to connect with a database in your React App. This is because the
corresponding code is visible in the browser (under Sources tab in the developer
tools), and anyone can steal your database credentials from there.
Instead, the code to connect with a database is written on another backend app that
is placed (or deployed) on another server and it receives http requests from the
React App to then return the corresponding response to it.
Type script code is also compiled to JavaScript code which is then understood by the
browser
You should never add confidential information such as passwords, usernames,
email-addresses, database queries and database credentials into your frontend
code.
You can however add API keys as long as you want people to access them publicly. If
you do not want people to access them publicly, then you’ll have to restrict access to
your API using some mechanism, e.g. IP whitelisting or some other logic.
You cannot hide your front-end logic from users but that also might not be a big
problem as the production code is minified and hard to read; this is because the
variable names are shortened and there are no whitespaces too. Also, most of the
core business logic is usually present on the server side.
