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.
Create React Project for My Portfolio Web (static web) and host it in AWS Amplify.
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.
Connect the data with the React Project.
You can see these images for more information about my migration steps.
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
Install Amplify CLI.
Because I'm using yarn, please prepare the yarn.
Set up the backend part for React.js.
amplify init - Configure my project to connect with AWS Amplify.
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
Coding, of course. I won't share the detailed steps. In short, here are my dependencies,
React Router 6.10.0 - Frontend Routing
aws-amplify 5.0.25 - Will be used for connecting/gathering the data from the backend
@aws-amplify/ui-react 4.6.0 - UI Library
React 18.2.0
React Redux 8.0.5 - Handle theme state
@reduxjs/toolkit 1.9.3
I just created the home page. I will move the pages one by one. So, some pages will refer to my previous website.
Add hosting: amplify hosting add
Currently, I use manual deployment. However, I will consider using automatic deployment.
Try build: yarn build
For more information about hosting, please check here.
Sending PR
- Please check here my PR and the changes.
Merge PR and prepare to publish manually.
- Publish manually:
amplify publish
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!
