So, this has been on my mind for a while, I was using a 2-year-old version of the phoenix framework, and I had some problems with CSS, Javascript, and other stuff, so I wanted to migrate it to a newer version of Elixir Phoenix, but also Migrate from Digital Ocean Droplet to App, and in this post, I’ll try to explain all the problems I had while redoing my blog, and what you might have to consider if you also want to go from Droplets to Apps.

Reasons, why I transferred from Droplet to an App:

• I had really a lot of painful tasks to do. For example- after each release, I had to regenerate CSS, I had to turn down the server, pull the newest things in, and start the server again plus run the migrations. It was PAIN, it took like 10-15 minutes for each small change.
• It felt that my hands were growing out from my ass, and I had f’ed up scss/css/js compilation, and some of the vue backend before (what I had), kind of worked, and kind of didn’t work. Sometimes, after you wrote a large post, you couldn’t even save, it because something f’ed up (for example, CSRF token expired)
• I didn’t update the Droplet that often, the droplet was only for my blog and that was it, I hadn’t configured the firewall well enough, I had to jump through hoops to run even my blog normally. There were a lot of additional jobs just to run the project.
• I wanted to put the project on Docker.

And that’s how I started.

Upgrading Phoenix from 1.15 to 1.16 (kind of)

Firstly, I thought that I’ll just straight up update my old blog and that’s gonna be it. Wrong. The structure was changed, and a lot of scripts that generate content were removed (webpack, babel was removed), or changed (basically, all node things from the project were removed but esbuild was the only thing that stayed.) After I did the initial updates and recompiled/started the project, more or less nothing worked correctly again. I kind of gave up for like 2 months after that.

After this setback, I just thought, that it would be easier to just do a new project, copy-paste all the elixir/phoenix files, copy the CSS and all those things, and just use a different packer, and set it up with docker (and when it starts, it build the project for dev environment e.c.). I kind of shoot myself in the foot going this way. Okay, copy the code and the migrations were fine, and I checked manually with “iex/mix”, if it worked, (and it worked! except the scss building part). When I started the docker, I basically failed to build some things, and had a lot of errors, that something didn’t work, some ports are not working or something else is not working. After I had worked a bit more on it (like a week, on the day’s end) I fixed the docker things, but still couldn’t fix the new bundler (started with snowpack, ended with vite). Threw in the towel the second time, because I just was too frustrated that nothing works again.

The third time’s the charm, right? Yup. After the first two “f”ups, I just told to myself “just make it work and look kind of okay on mobile, devdesign will suffice”. And, to be fair, I did that and it worked. Firstly I just made the blog, where I can add the posts and where i can see them. That was a good start. After that, I generated authentication (phoenix has really nice auth generation, I only needed to remove the password reset functionality and registration, and I was good to go.), added image upload (had some problems there, will talk about this topic later), created that I can upload images/videos e.c. and create posts while I’m logged in, and I was basically set.

After all this, I was basically set, but I needed to add Releases, to streamline all the processes and I wouldn’t need to scratch my head on how to automate setting up all the info when I start the server. When this was done, I basically created a basic docker script that was provided in the “release” documentation and I was almost done. I set up all the things on the App and just set it and forget it.

And That’s how I released this version of my blog. Yeah, it doesn’t have vue in it. Yes, it doesn’t have SCSS in it, yes, it has a dev design. But I have remade it ground up and it’s running correctly, and still, it doesn’t look that bad. What I literally learned, all over again- “Keep it simple, stupid” and “make it work, make it fast, make it pretty”. A site could be the ugliest thing in the world, but if you don’t even release it, there won’t be any point in the project.

By the way, my blog source code is available here.

Caveats to running on Application and not a droplet

Yeah, there were some problems. First thing first- I kind of doubled the price of my blog. If my droplet cost me around 7.77 USD a month, now it costs more like 20 USD, because:

• On droplets, you can preserve images on your hard drive, you don’t need to save them on a different server. You can’t do that on an Applet. you need “spaces” or AWS S3. From the digital ocean, it costs like 5 USD a month to use it, so basically, I set it up. Here’s a good material on how to do it.
• On droplets, you can serve your own database, there are no problems with that. On Apps, you’ll need another service. -.- “there’s DO service for that”, and here goes 5..7 more USD for the database (also, DO tells us that the database isn’t meant for production because it’s too small. yeah… but for a blog, it will be enough. I kind of don’t want to pay 12 USD for that). basically set it up and I’m done.
• Doing this the first time might be problematic if you don’t know that DO wants you to run 2 pro docker containers straight away (for 24 USD total). and also all the ENV variables, which also might be problematic, if you don’t know how phoenix works on production. I have done this like 4-5 times now and it has gotten a lot easier.

But, if it costs more or less double or triple, what was the added benefit?

• I can push it straight to production and it will automatically be pushed to the server. and if something breaks with the new changes, the server will still be on, and nothing will change until the website compiles
• I have learned a lot of new things (about spaces, how to set up file upload, LiveView e.c.)
• I don’t have to set the Nginx config manually, I don’t need to set firewall rules, I don’t need to worry about old ubuntu versions, and I don’t need to do a lot of things, which would take time. I can just push and forget it.

What now?

After all these updates to the blog, I think I’ll start to do more posts about security and books. I need finally to start my OSCP certification studying, again. I haven’t done that for a month. I also might do a little research, regarding the Wifi things that I got, and about lockpicking, how those things happen and how they are done, and how to prevent them. (aka physical security). Also, there are some small CSS fixes required in the blog, and some admin panel fixes, which would ease my life. (and also a problem with subdomains/domains for sockets, lol)

Anyway- till next time! :)