DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cathy Casey-Richards
Cathy Casey-Richards

Posted on

Tutorial: Using AWS Amplify to deploy your website

AWS Amplify is a tool for developing and deploying web and mobile applications. In this article, we’ll be focusing on the deployment capabilities of AWS Amplify and how you can use this tool to quickly & securely deploy a website.

For connecting your app to Amplify, there are multiple Git repo options or you may choose to build your own artifacts and manually upload when deploying. For this example, we’ll use GitHub.

Alt Text

You will be prompted to authenticate with GitHub and allow Read Access for Amplify to listen on pushes to a given branch and pull from your repo to kick off a build. Once you’ve successfully authenticated, you can select which repository & branch you’d like to deploy. Keep in mind that Amplify will automatically rebuild anytime you push to the branch you've selected.

Alt Text

In the next step, you’ll be asked to configure build setting for this application. If you’re using Node.js, your build spec may be as simple as the following:

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Once you’ve customized your build spec, you can proceed to the next step and deploy your application! This should take just a few minutes depending on how complex your build is, and then your app will appear in the Amplify console.

Here, you can see the information for the last deployment, including build status, build output, and a link to where your app is being hosted.

Alt Text

And there you have it! Your web app is now deployed and waiting to be rebuilt whenever your changes are ready.

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.