I recently wanted to make a simple website using strapi as the backend cms and react for frontend. Now, every tutorial I watched on this ended like this:
- Backend in one directory
- Has a git repo in it
- Api and admin dashboard hosted on localhost:1337
- Usually uses sqlite which is a single file in that directory. Alternatively it would use something like mysql that would be served on yet another location
- Frontend in another directory
- Also has a *separate* git repo in it
- React dev server is served on localhost:3000
- If the frontend wants to get some data from the backend, it just fetches localhost:1337/api/somequery
Now, because the backend and frontend were located in separate directories and github repos, I thought it would be best to host the on two separate servers. This did make me think of some possible issues though:
- First of all, the frontend couldn't just fetch localhost:1337 to get an api response from the backend because it's hosted on a completely different location. It would have to fetch the url to the actual production backend, so I would have to make it fetch localhost:1337 on the development environment and some url to the backend server on production. Now, manually changing this on every deploy is out of the question. I think it would be best to solve this issue somehow with environment variables but I have never actually seen this in action and I'm not sure how exactly the frontend would read the env variables and adjust the fetched urls accordingly. I think I'd have to see an example/explanation if this even is possible.
- Secondly, Two servers 2 isn't one. I'm not Jeff Bezos just yet so I would like to minimize the costs as much as I can.
- Third, I assume that sqlite should generally be only used on the development environment. (I might be wrong here I don't know much about databases) If I wanted to use something like PostgreSQL on production, I would need to have another server for that and set it up so the backend would communicate to the sqlite database on development and postgre on production.
Because of these issues, I thought it would be better to host it on the same server like this:
/app directory with a git repo in it - if the hosting service allows it, changes pushed to github would be automatically copied to the production server.
/strapi directory with the backend
/client directory with the frontend
something in the app directory that would run both the backend and frontend.
That way, I wouldn't have to pay for many servers and I could just push one repo to github to deploy but the other issues still stay the same.
I would still need to figure out how to set up the database on the same server and make it so the fetched urls would change based on the environment. Also, since I wouldn't be running the development server on the frontend, I'd have to find a way to serve the static build files. Should I use express for this?
So that's basically my question. How should I go about solving those problems and am I right to think that hosting it on one server. Obviously, this issue is related to strapi and react but I think this would also apply to other infrastructures.
