It’s 2018 and file upload is still an involved process

I’ll admit, this process is not straight forward, but once set up, it works like a charm. What’s the goal? We want the client (browser) to upload a file directly to S3 and then store the uploaded information in our server/database.

As a hip, cutting edge developer, you’re using Hugo to generate your blog or website. Wordpress… pssh, you’re way too cool for that.

You find yourself using S3 for your static frontend code and using CloudFront to serve out that static content. Here is a handy script to deploy and invalidate old versions.

This is the holy grail, the culmination of knowing there is something out there better, stronger, faster. In this blog post, I’ll outline how to set up Amazon S3, Cloudfront, and Route53 to serve your static React, Angular, or any site over HTTPS. Get ready, it’s about to get real. What am I even talking about? The new en vogue way to build sites is to use React or Angular on the front end.

The Backstory

You may find yourself needing to redirect all traffic from your root domain example.com, otherwise known as the apex, to your real hostname www.example.com. Maybe you didn’t know this, but you cannot use a CNAME on your apex domain. This will bite you in the butt when you try to use your root domain example.com with Heroku’s SSL (HTTPS) service. Heroku will give you a hostname and tell you to create a CNAME to that hostname. However, this is not strictly possible. Some registrars can get around this by essentially providing you an HTTP redirect, but his is hack. In short, don’t use your apex domain e.g. example.com, even though you see all the cool kids on the block doing it.