Migrating My Portfolio Web to AWS Amplify (Part 1)

Continuation of My Old React Project

Play this article

After some decades, I decided to reactivate my old project to use React for My Portfolio Website. My current website uses Vue.js, and you can access it here.

I want to migrate the portfolio step by step.

  1. Create React Project for My Portfolio Web (static web) and host it in AWS Amplify.

  2. Prepare the backend using AWS Amplify and migrate my CMS Admin. In short, you can check the project here. I will continue the project in the next part.

  3. Connect the data with the React Project.

You can see these images for more information about my migration steps.

  • Step 1

Step 1

  • Step 2

  • Step 3

What is AWS Amplify?

From my perspective as a Software Engineer or Backend Engineer, this is a tool that helps me to deliver Fullstack Applications into AWS quickly, easily, and user-friendly! Imagine if you need to understand the infrastructure, the delivery pipelines, etc. You might be overthinking about the cloud especially AWS when you want to start hosting your existing website or your initial website. I want to show you how I start using AWS Amplify, but it doesn't mean I use the best practices. Please refer to the documentation for the best practices using AWS Amplify.

Let's Get Started

  1. Install Amplify CLI.

  2. Because I'm using yarn, please prepare the yarn.

  3. Set up the backend part for React.js.

    1. amplify init - Configure my project to connect with AWS Amplify.

    2. yarn add @aws-amplify/ui-react aws-amplify - Add the AWS Amplify library and AWS Amplify UI library to my React project. For more details about the UI library, you can check here.

My Process

  1. Coding, of course. I won't share the detailed steps. In short, here are my dependencies,

    1. React Router 6.10.0 - Frontend Routing

    2. aws-amplify 5.0.25 - Will be used for connecting/gathering the data from the backend

    3. @aws-amplify/ui-react 4.6.0 - UI Library

    4. React 18.2.0

    5. React Redux 8.0.5 - Handle theme state

    6. @reduxjs/toolkit 1.9.3

  2. I just created the home page. I will move the pages one by one. So, some pages will refer to my previous website.

  3. Add hosting: amplify hosting add

    1. Currently, I use manual deployment. However, I will consider using automatic deployment.

    2. Try build: yarn build

    3. For more information about hosting, please check here.

  4. Sending PR

    1. Please check here my PR and the changes.
  5. Merge PR and prepare to publish manually.

    1. Publish manually: amplify publish
  6. My website is ready! Here is the link: https://dev.d2te8gdj4pjzkk.amplifyapp.com

Lesson Learned

It's quite easy to deploy a static website from React! I'm planning to have the backend using AWS Amplify and connect the admin website within it. Of course, the admin website will be hosted in AWS using AWS Amplify!

Please bear with me because I'm so bad at Front-End and Design. Here is a screenshot of my website.

Note:

Yey! My previous project is alive now! I will continue in the next part. So, stay tuned!


My Repository

https://github.com/bervProject/my-personal-web-react

Thank you!

Thank you GIF