I love my 2012 Macbook Pro. It got me through school, helped me learn JavaScript and Python, got me my first full time tech job, etc. I took it everywhere and used it all the time, but it started to get old. JS libraries and frameworks began to become extremely bloated and CPU intensive for development. All those libraries/frameworks are great when optimized for production, but to keep a great developer experience it comes at a cost. Now it's more about standing up an entire infrastructure locally like PostgresSQL, Redis, , plus all my Chrome tabs. My poor MBP couldn't handle it all so I started looking at ways to offload as much as possible.
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
Top comments (0)