How to bundle a Node + React app into a shared Workspace?

Question

MySQL

Hello.
I don't know how to correctly articulate my need, but I need to create a Web application with React.js on the front and Node.js (Express.js) on the back. It is necessary that this assembly be considered a single whole application and be in the same folder. Also, so that you can push it to one git repository and deploy it to a single hosting (as a single whole app).
Is it necessary to do this at all, or is it easier to create two separate applications for the front and back? And if so, how to implement it?

Answer 1

BEGIN TRANSACTION;
drop table tuser;
drop table tuser_info;
CREATE TABLE tuser
  (`id` int, `name` varchar(255));
  
INSERT INTO tuser
  (`id`, `name`)
VALUES
  (1, 'Vasja'),
  (2, 'Petja'),
  (3, 'Kolja'),
  (4, 'Dima')
;
CREATE TABLE tuser_info
  (`id` int, `user_id` int, `some_id` int);
  
INSERT INTO tuser_info
  (`id`, `user_id`, `some_id`)
VALUES
  (1, 1,1),
  (2, 2,3),
  (3, 2,1),
  (5, 2,2),
  (4, 3,1)
;
COMMIT;

select tu.name
from tuser tu 
join tuser_info ti 
on (tu.id = ti.user_id)
where ti.some_id=1 
and exists (select 1 from tuser_info ti2 where ti2.some_id=2 and ti2.user_id=ti.user_id );

Answer 2

Something like this:

SELECT u.* 
FROM user u
INNER JOIN user_info ui ON u.id = ui.user_id
WHERE ui.some_id = 1 AND ui.some_id = 2;

Answer 3

To create everything in one folder, you can do the following:
1. Write a frontend in react.
2. Write a backend on node.
After that, build the frontend using webpack (it will be collected in the public folder, I don’t remember exactly).
Further, in node, return this folder as static: app.use(express.static('path.resolve(__dirname,'./public')))
Next, I uploaded it to heroku and everything worked.
To implement in two folders, you can do this:
1. Write the frontend in one folder.
2. Write a backend in another.
They will connect via api - send requests to the backend from the react application, get data, work with them:
BASE_URL = 'heroku.com/app/my-app-1233'
fetch(`${BASE_URL}/api/todos/1' )
You place separately frontend, separately backend.
I hosted the frontend on github-pages, the backend on heroku.
Maybe I'm wrong somewhere, but the essence is exactly the same.

Answer 4

Depends on the difficulty. With small projects, you can do whatever you want. With large ones - you have to share in any case

Answer 5

Divide and rule.