DEV Community

Cover image for AWS Amplify App creation using GitHub Repo + Enhancing S3 static website hosting

AWS Amplify App creation using GitHub Repo + Enhancing S3 static website hosting

Host your Static Web App

  • Get started with static web hosting.
  • AWS Amplify Console offers a simple Git-based workflow for building and deploying static web apps to AWS.
  • It only takes 15 minutes to connect your repository, configure build settings, and deploy.
  • _Supports Web (React, Vue, Angular, and more)
    _
    Develop your Mobile or Web App

  • Develop a "to-do app" that syncs app data to the cloud and take off from there.

  • Create the backend in under 5 minutes, or use an existing AWS backend.

  • Connect to your backend with Amplify Libraries.

  • Supports Android, iOS, React Native, Web (React, Vue, Angular, and more)

AWS Amplify is a AWS Managed service

1.Step by Approach for how to create AWS Amplify website using Github Repo

1.1.Open Amplify console by searching AWS amplify in aws console, AWS Amplify console looks below

Image description

1.2.Click on deploy an app

Image description

1.3.Select GitHub option then click on Next

Image description

1.4.Then it will ask for github authorisation , please clone the repos mentioned below in the references for your practise and select the one after authorisation then click next , select repository, branch and click on Next

Image description

1.5.Click Next in Appsettings

Image description

1.6.Click on Save and Deploy

Image description

1.7.Deploying in progress

Image description

Still deploying

Image description

1.8.Deployed successfully, copy the url from the domain and render it

Image description

Image description

1.9.If we wanted to delete the Amplify website then go to Amplify console then select the App, then select General settings from the left menu highlighted below

Image description

1.9.1.Click on Delete App

Image description

1.9.2.It will ask for confirmation, please message delete

Image description

  • Amplify website deleted successfully

1.9.3 Delete Applify using AWS CLI Command

aws amplify delete-app --app-id <your-app-id> --region <application-region>
Enter fullscreen mode Exit fullscreen mode

2.Step by Approach for how to create AWS Amplify website using content in AWS S3
2.1 Create a new S3 bucket

Image description

2.2 Upload the files from Repo to AWS S3 website

Image description

2.3 Go to properties section of S3 bucket

Image description
2.4 Go bottom of the screen

Image description

2.5 Create Amplify app button is visible, in 2024 aws enabled files to be deployed from AWS S3 bucket easily. But where as for aws s3 static website we need to define the policies but in this case its not required

2.6 Change the App name, branching based on your request and then click on Save and Deploy

Image description

2.7 Deployment in progress

2.8 Deployed

Image description

2.9 Render the url

Image description

2.10. Redeploying the changes from AWS S3 to AWS Amplify

2.10.1 Click on Deploy updates
Image description

2.10.2 we have multiple options to deploy to AWS Amplify

Image description

2.10.3 I have updated my files in AWS S3 bucket and selected the bucket for deploying the changes, click on save and deploy

Image description

2.10.4 Deploying the changes
Image description

2.10.5 Deployed the changes

Image description

Render the url and check the changes

2.11 Delete the AWS Amplify website - Follow the step 1.9 for deleting the AWS Amplify website

References:

💬 If you enjoyed reading this blog post and found it informative, please take a moment to share your thoughts by leaving a review and liking it 😀 and follow me in dev.to , linkedin

Top comments (0)