DEV Community

Taleb
Taleb

Posted on

2 1

Deploy a Gatsby app with the Amplify Console using AWS CloudFormation

AWSTemplateFormatVersion: 2010-09-09

Parameters:
  Repository:
    Type: String
    Description: GitHub Repository URL

  OauthToken:
    Type: String
    Description: GitHub token for repo read 
    NoEcho: true

  OauthTokenNPM:
    Type: String
    Description: GitHub token for private npm
    NoEcho: true

Resources:
  AmplifyRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: 2012-10-17
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - amplify.amazonaws.com
            Action:
              - sts:AssumeRole
      Policies:
        - PolicyName: Amplify
          PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Effect: Allow
                Action: 'amplify:*'
                Resource: '*'

  AmplifyApp:
    Type: 'AWS::Amplify::App'
    Properties:
      Name: firstapp
      Repository: !Ref Repository
      Description: a test website
      OauthToken: !Ref OauthToken
      EnvironmentVariables:
        - Name: NPM_PASS
          Value: !Ref OauthTokenNPM
      AutoBranchCreationConfig:
        EnableAutoBranchCreation: True
        EnableAutoBuild: False
      BuildSpec: |-
        version: 0.1
        frontend:
          phases:
            preBuild:
              commands:
                - cd gatsby
                - nvm use $VERSION_NODE_12
                - npx npm-cli-login -u example-user -p $NPM_PASS -e webmaster@example.com -r http://npmregistry.example.com
                - npm config set always-auth true
                - npm config set registry=http://npmregistry.example.com/
                - yarn

            build:
              commands:
                - nvm use $VERSION_NODE_12
                - yarn run build
          artifacts:
            baseDirectory: gatsby/public
            files:
              - '**/*'
          cache:
            paths:
              - node_modules/**/*
      CustomRules:
        - Source: gatsby/public/index.html
          Target: /index.html
          Status: '200'

      Tags:
        - Key: Name
          Value: web-test
      IAMServiceRole: !GetAtt AmplifyRole.Arn

  AmplifyBranch:
    Type: AWS::Amplify::Branch
    Properties:
      BranchName: develop
      AppId: !GetAtt AmplifyApp.AppId
      Description: Develop Branch
      EnableAutoBuild: false
      Tags:
        - Key: Name
          Value: test-develop
        - Key: Branch
          Value: develop

Outputs:
  DefaultDomain:
    Value: !GetAtt AmplifyApp.DefaultDomain

Now run like this

aws cloudformation deploy --profile <aws-profile> \
  --template-file ./amplify-template.yaml \
  --capabilities CAPABILITY_IAM \
  --parameter-overrides \
      OauthToken=<OauthToken> \
      OauthTokenNPM=<OauthTokenNPM> \
      Repository=https://github.com/<user>/<repo> \
  --stack-name Firstapp

cloudformation: https://console.aws.amazon.com/cloudformation/home
amplify console: https://console.aws.amazon.com/amplify/home

More Read: https://aws.amazon.com/blogs/mobile/deploy-a-vuejs-app-with-aws-amplify-console-using-cloudformation/

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay