DEV Community: tumao

Digital Ocean Hackathon: Submission!

tumao — Sun, 10 Jan 2021 17:17:03 +0000

What I built

Minimalist, multilingual personal portfolio.
Built with Strapi and Next.js, hosted completely on DigitalOcean App Platform.

Category Submission:

Personal Site/ Portfolio

App Link

tumao.dev

Screenshots

Description

Representative, minimalist, easy to manage and great looking portfolio for briefly presenting your projects that anyone can deploy in minutes. Based on Strapi and Next.js.
With integrated cron runner to execute (not only) wordpress cron jobs.
Currently supported translations are /cs, /en. Switching automatically based on browser preferences.

Link to Source Code

Next.js
Strapi

Permissive License

MIT

Background

I am a student and freelance developer.

I had static html portfolio, and adding new projects started to get time consuming.
I was thinking about building new portfolio for quite some time.
So I took this challenge as a sign that I had to build a new one.

How I built it

First, I wrote down the requirements:

modern looking
server side rendered
easy to manage cms
easy translation
project filtering

I have experience with React, so naturally, I selected Next.js as front-end.
It is well integrated with i18n for translation and has great static-site generation capabalities.

Next decision was cms. Strapi seemed like pretty obvious choice here.

I utilized DigitalOcean’s App Platform to host the next.js app, as well as strapi backend. Each one residing in it's own project.

Additionally, I am using aws lambda in conjunction with AWS SES to send the contact form submissions to my email.

So basically, everything except the email is hosted on DO.

And everything is working great.

This was my first experience with DO App Platform.
Before , I would host front-end on Vercel, and strapi on Heroku.
Now, I can have both parts at one place.

The experience with setting up one-click deployments is great. If I had to create the exact same portfolios for my clients, I would definitely give App Platform another shot.

I learned how easy it can be to create reusable projects. I did not thing that it could be that easy for anyone to setup a project. Now you can just click a single button, set few environment variables, and have your own modern portfolio set-up in minutes.

Additional Resources/Info

I decided to create blank repos before publishing, to prevent the possible leaks of personal data, urls and other string that might have been hardcoded before.

Find if any page is hosted in the cloud.

tumao — Tue, 22 Dec 2020 18:17:07 +0000

Nov 25 AWS outage

Shortly after the AWS outage, I was looking around if I can easily see what pages are running on what cloud providers.

I could not find any suitable tool. The closest was simple iplookup/whois.

I though there must be a better way.

It looks like every decent cloud provider (Looking at you, Microsoft) provides public lists of IP ranges. But there was no tool to check it against given website.

ISITIN.cloud

So I decided to create easy way to lookup this information.
isitin.cloud

In the first version, I scanned the whole website, grabbed all the links resolved the DNS, compared it to the list.

It took some time, and it was probably not worth it, I did not really care that much about the subsequent requests. But if you wanted it, the functionality is there waiting to be turned on again.

In current version, I only check the requested domain.

I hope you will find it useful.

Next app

tumao — Mon, 21 Dec 2020 15:45:37 +0000

So, I decided that my front-end would be in Next.js.

The norm for Next.js is Vercel, but since this is DO hackaton, I decided that trying alternative is the way to go.

But there came a problem.

Image loading is waaay too slow. I am aware that next does image optimization on-the-fly.
So I decided to upgrade to the $10 plan, to see if that is acceptable. Not better at all.

Vercel uses CDN for caching the images. So I decided to use Cloudflare to eliminate this issue.

And I found this quote in the docs "App Platform apps cannot be routed through your own Cloudflare account and must instead use App Platform's built-in CDN functionality."

The built-in CDN does not seem to be helping AT ALL.

Anyone got a solution?

Update

The solution was to change the Cache headers on the images hosted on S3. Next.js app would then use the cache settings from the header.

So what was happening?
Next.js app was caching the generated images for only 60 seconds, which ment that almost every visitor would be waiting.

After this, the development was super easy. Everything worked as expected.

Getting to know DO App platform

tumao — Sun, 20 Dec 2020 19:21:54 +0000

Intro

I am junior dev, but I have previous experience with Heroku and DO droplets. So I decided that I should try an alternative.

First step

So I decided to deploy strapi to DO App platform, just to test it.

Setup seemed easy, evnironment, databases, everything one click.

But then came the deployment.

I was waiting up to 20 minutes for some deployments!!!
One single change in strapi? Waiting 20 minutes. Just like that. I hope it is only for the first build.
I am using the $5 plan, but waiting 20 minutes every time would be unacceptable.

Update

Any subsequent builds run on average for 3 minutes, which is on par with heroku. So I see no problem here.

I will be updating as I progress.
Do you have similar experience, or some tips?