All Collections
Developer's Guide to Anima
Anima + AWS Amplify: Hosting React apps
Anima + AWS Amplify: Hosting React apps

How to deploy React apps to AWS Amplify

Avishay Cohen avatar
Written by Avishay Cohen
Updated over a week ago

Anima converts designs such as Figma or Adobe XD into HTML / React code.

AWS Amplify is “A set of purpose-built tools and features that lets front-end web and mobile developers quickly” as AWS puts it.

Anima + AWS Amplify

Serverless backend

If your app has dynamic content, AWS Amplify is a great service that provides backend-as-a-service. Meaning it'll take a short time to set up your APIs, data tables, authentication (login), cloud functions, and connect to any AWS service.

Hosting

When you are ready to go live with your app, you will need to host your code so users can access it. And, to connect a domain. AWS Amplify also covers hosting.

How to deploy React code to AWS Amplify

  1. Open AWS console, and navigate to Amplify

    Front End AWS Console Find Amplify Module 1

  2. Select "Get Started" under Deploy.
    ​

    Front End Amplify Deploy Module 1

  3. Select GitHub, then Continue

    Front End Amplify GitHub Module 1.png

  4. Authenticate with GitHub and return to the Amplify console. Choose the repository and master branch you created earlier, then select Next.

    Front End GitHub Add Repository Module 1.png

  5. Accept the default build settings and select Next.

    Front End GitHub Add Repository3 Module 1.png

  6. Review the final details and select Save and Deploy.

  7. AWS Amplify will now build your source code and deploy your app at https://...amplifyapp.com.

    Front End Amplify Deploy Source Module 1

  8. Once the build completes, select the thumbnail to see your web app up and running live.

Congrats 🎉

Did this answer your question?