The easiest thing to offload is the database layer. Some people like to use sqlite, but I'm not really a fan since I like to use one DB in all stages to avoid any surprises. The easiest and free way is stand one up on Heroku or something similar. The heroku-cli is pretty nice and easy to use and only downside is having to learn it like every other abstraction layer. This method just means for every DB you want to setup, you have to go through the same process and keep the URI saved locally. Not a big deal, but can be kind of annoying.
This worked fine for persisting data, but I still need a backend server and a frontend. So usually it's something like this:
So it's actually two servers running two sets of code. Frontend is usually a React app using Create React App and the backend is some flavor of Node (Express, Fastify, Hapi). This is pretty standard but I really only wanted the frontend code to run on my laptop since Im usually just on the couch or my bed and my desktop is in my office. So the next step was to just run the backend code on my desktop like this:
This is better. Well, not really. Now if I want to update both the backend and frontend I have to do it in two places. I'm kind of lazy, so I'm thinking the ideal setup is to keep the everything in one place and treat my laptop as the client.
Now my laptop is just running a browser and I can connect to my react app with
http://desktop:3000. The only problem is now I have to update my frontend code to point to the desktop IP instead of
localhost. I don't want to that. I just want to hit everything with
localhost like I would be if I was running everything on my laptop. SSH port forwarding, or SSH tunneling, to the rescue.
So I would open up my terminal and type the following to connect to my CRA running on my desktop.
ssh -L 3000:localhost:3000 desktop
I would also open up another session to connect to my backend service.
ssh -L 8080:localhost:8080 desktop
This works and is pretty neat, but like I said earlier, I'm lazy. Two separate shell sessions just to connect to two ports is a bit redundant and wasteful, we can let our ssh config take care of this. So let's open ~/.ssh/config and add the following lines
Host remote-desktop HostName <desktop-ip or hostname> User ubuntu LocalForward 3000 localhost:3000 LocalForward 8080 localhost:8080
The reason I create a new host for
remote-desktop is because I don't want it linked to the same hostname since it will try to open the same ports and create errors. I think it's better to keep it separated.
It is still a work in progress, but I'll cover how I have it set up to edit code remotely as well using VSCode and Tmux in the next article.
Current word count: ~1000 / 250,000
Daily average: ~500