The final layer to migrate is the React application. The best way to migrate the web layer and to adhere to the migration requirements is to use AWS Amplify to host it. AWS Amplify is a fully managed service that provides many features like hosting web applications and managing the CI/CD process for the web app. It provides client libraries to connect to different AWS resources, and many other features.

Migrating the React application is as simple as creating a new Amplify application in your AWS account and uploading the React application to a code repository like GitHub. This AWS Amplify application is connected to a GitHub branch, and when there is a new commit in this branch, AWS Amplify redeploys the code.

The Amplify application receives configuration parameters like the function URL endpoint (the server URL) using environmental variables.

const amplifyApp = new App(this, `${props.stage}-AmplifyReactShopApp`, {
    sourceCodeProvider: new GitHubSourceCodeProvider({
        owner: config.frontend.owner,
        repository: config.frontend.repository_name,
        oauthToken: SecretValue.secretsManager('github-token'),
    }),
    environmentVariables: {
        REGION: this.region,
        SERVER_URL: props.serverURL,
    },
});

If you want to see a step-by-step guide on how to make your web layer serverless, you can check the video above.

Issues with this solution

Now, if you try this migrated app, you will find two issues. The first one is that the user session is not sticky. Every time you log in, you are logged out unexpectedly from the application. The second one is that when you create a new product, you cannot upload new images of that product. Let’s analyze each of the problems in detail and find solutions.