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:
cdinto the directorynpm startthe project to start the build server- build and commit changes
npm run buildto create a production buildaws s3 sync build /to push to my target bucket.
And that's all there is to it.