Reacting and backtracking

I started this website/blog last year as a way to practice as I learned. This year, I started a new job with a new company and ran out of time working on my projects. Today, I decided it was time to brush the rust off, so I opened my laptop and alas - I forgot where I left off. But not only that, I forgot how I got here; the hosting configuration, how I had organized it all. I spent some time backtracking and thought a blog post would help me in the future.

In it's first iteration my website was static HTML/JS hosted on an Amazon S3 bucket. This blog is still hosted on an EC2 instance. I built projects in HTML/JS and stored them in the same S3 bucket and created ref points in my website. This was a fast and simple way to upload new projects and maintain simple files. The S3 interface was an easy way to upload files. A manual refresh of the CloudFront cache was the final step.

A little while later I learned React and built my next two projects with it. Hosting React projects on S3 was more complex. So I used Amazon Amplify to build and host these projects as web apps. This allowed me to iterate in isolated environments. All I had to do was connect my GitHub repo and push the changes. I attached apps to my domain and set a custom subdomain (e.g., bite.ericbrock.net), which was handy. I also moved my domain routing to Amazon.

After that, I decided to "Reactify" my website and create components for everything. This helped me solidify the concepts I had learned. While refactoring, I realized I couldn't host in AWS S3 as I had been doing. I also didn't think Amplify would be the best solution. Instead, I opted to use the Amazon command line interface to sync my React folder with AWS S3. I also started to refresh the CloudFront cache this way.

The workflow goes:

cd into the directory
npm start the project to start the build server
build and commit changes
npm run build to create a production build
aws s3 sync build / to push to my target bucket.

And that's all there is to it.