Luciano Mammino 💛 Node.js
+ Your AuthorsArchive @loige I tweet about Cloud Web development, #Nodejs & #JavaScript. I am co-author of & maintainer of Oct. 14, 2020 2 min read

#MVPin7Days DAY 3

Today, I spent most of my time finishing the "dockerization" 🐳 of the app and putting it online.

It is still crap and wildly incomplete, but if you feel brave enough you can actually try it live at:  🚀

PLZ don't break it! 😝

The first interesting thing I realized is that I was bundling environment-dependent values in my frontend bundle. This was not ideal as I had to be very careful to distinguish builds for local dev from the ones for production and provide the correct config at build time.

To work around this issue and make the build simpler, I ended up creating a backend endpoint that exposes all the necessary configuration values to the frontend. Then I created a #React context to load them up from the backend API before initializing the entire app.

This way, the backend is configured through env vars at runtime and I don't need to provide any configuration value to docker at build time. 🙌

At this point, I quickly spun up an #EC2 and an #RDS (#postgres), both on the free-tier. Then I installed #nginx and #certbot to deal with #SSL.

All of this was done manually (in an #ssh session) for simplicity, but I have noted all the commands to be able to automate later.

Finally, I also installed #Docker on the #EC2 instance. I didn't want to bother configuring a private Docker registry, so I opted for a quite "hacky" alternative.

Did you know about the `docker save` command?

Well, it's quite convenient in these cases! It allows you to put an entire docker image in an archive 📦

Then you can copy this archive wherever you want and load it with `docker load` (surprise!) 🧐

With these 2 docker commands and a simple shell script, Here's my super simple deployment pipeline:

local machine: build -> docker save -> scp to server
remote machine: docker load -> stop old container -> start new container

Nothing fancy, but works for now!

After this bit was sorted I only needed to configure #nginx to use my docker container as upstream.

This is something I have done like 1 million times, but yet again I had to consult stack overflow for the right syntax! 🙈


At this point, the app was online and working. I was still using the #AUTH0 dev client for the "login with Google" functionality, so I also spent some time to configure that properly.

At that point, I needed an icon to make Google "accept" my OAuth2 app... 😤

Of course, I spent the rest of my day not just finding an Icon, but creating a brand new logo! 🤗

In the end, I am actually pleased with the result, but I didn't get to start the next vertical slice! 😱

What do you think of this quick'n'dirty logo? 🤡

That's all for the day! Tomorrow I will work on the next vertical slice (I SWEAR!) which will allow users to create affiliate links for #amazon products!


🎸 Soundtrack of the day: 

You can follow @loige.


Tip: mention @threader_app on a Twitter thread with the keyword “compile” to get a link to it.

Threader is an independent, ad-free project created by two developers. Our iOS Twitter client was featured as an App of the Day by Apple. Sign up today to compile, bookmark and archive your favorite threads.

Follow Threader