Build with speed with AWS Amplify and Contentful

Transcript

1. © 2021 Contentful
   Amos Syuma, AWS
   Stefan Judis, Contentful
   How to build with speed,
   AWS and Contentful
   

   View Slide

2. © 2021 Contentful
   Housekeeping
   ● This webinar is being recorded; we will share
   the recording with all registrants — keep an
   eye on your inbox!
   ● Please add your questions in the Q&A box,
   we will answer them after the presentation
   during the Q&A session at the end
   ● To get in touch, write to us at
   team@contentfulmail.com
   

   View Slide

3. © 2021 Contentful
   Amos Syuma
   Cloud Support Engineer, AWS
   Stefan Judis
   Developer Relations, Contentful
   

   View Slide

4. © 2021 Contentful
   What will we build
   today?
   

   View Slide

5. © 2021 Contentful
   ● Authentication
   ● Analytics
   ● Content Management
   ● Hosting & deploy
   

   View Slide

6. © 2021 Contentful
   What will we use?
   

   View Slide

7. © 2021 Contentful
   AWS Amplify
   aws.amazon.com/amplify/
   

   View Slide

8. © 2021 Contentful
   

   View Slide

9. © 2021 Contentful
   Amplify Framework
   

   View Slide

10. © 2021 Contentful
    Auth
    Used AWS Amplify CLI features
    

    View Slide

11. © 2021 Contentful
    Analytics
    Used AWS Amplify CLI features
    

    View Slide

12. © 2021 Contentful
    AWS Amplify CLI
    ● AWS CloudFormation stack
    ● AWS services
    ● Amplify folder (local)
    ○ CloudFormation configuration
    ○ Backend code
    ● Local configuration file
    

    View Slide

13. © 2021 Contentful
    AWS Amplify client libraries
    

    View Slide

14. © 2021 Contentful
    ● Integrated CI/CD
    ● Auto-detected build settings
    ● Multi-environment support with feature
    branch deploys
    ● Password-protected deployments
    ● Custom domains + free HTTPS
    ● Rewrites, redirects and reverse
    proxies
    ● Notifications
    ● And much more...
    

    View Slide

15. © 2021 Contentful
    Contentful
    contentful.com
    

    View Slide

16. © 2021 Contentful
    Old-school architecture
    Editing Interface
    Your website
    Old-school CMS
    HTML (CSS, and JS)
    Content, functionality and look
    

    View Slide

17. © 2021 Contentful
    {
    "fields": {
    "title": {
    "en-US": "Hello world!"
    },
    "body": {
    "en-US": "This is hofftastic!"
    }
    },
    "metadata": {
    "tags": [
    {
    "sys": {
    "type": "Link",
    "linkType": "Tag",
    "id": "nyCampaign"
    }
    JSON APIs *
    Pure content
    Content platform architecture
    * Application Programming Interface
    

    View Slide

18. © 2021 Contentful
    Content platform architecture
    Content Delivery API (RESTful)
    Content Preview API (RESTful)
    Content Management API (RESTful)
    

    View Slide

19. © 2021 Contentful
    Content platform architecture
    Content Delivery API (RESTful)
    Content Preview API (RESTful)
    Content Management API (RESTful)
    GraphQL (CDA & CPA)
    

    View Slide

20. © 2021 Contentful
    Content platform architecture
    Content Delivery API (RESTful)
    Content Preview API (RESTful)
    Content Management API (RESTful)
    GraphQL (CDA & CPA)
    

    View Slide

21. © 2021 Contentful
    Content platform architecture
    CMA
    

    View Slide

22. © 2021 Contentful
    Content platform architecture
    CMA
    

    View Slide

23. © 2021 Contentful
    Content platform architecture
    Developers
    

    View Slide

24. © 2021 Contentful
    Content platform architecture
    Developers
    

    View Slide

25. © 2021 Contentful
    Structured content
    My project space
    

    View Slide

26. © 2021 Contentful
    Shall we get into it?
    

    View Slide

27. © 2021 Contentful
    Content
    model set up
    Set up CRA Add
    authentication
    Add analytics
    

    View Slide

28. © 2021 Contentful
    AWS Cloud9
    

    View Slide

29. © 2021 Contentful
    How long did it take us to build and
    deploy and app with Authorization,
    Analytics and Contentful?
    

    View Slide

30. © 2021 Contentful
    30 minutes while
    chatting with you folks!
    

    View Slide

31. © 2021 Contentful
    

    View Slide

32. © 2021 Contentful
    Additional resources
    

    View Slide

33. © 2021 Contentful
    Contentful
    Developer Portal
    contentful.com/developers/
    

    View Slide

34. © 2021 Contentful
    Contentful
    Developer Community
    contentful.com/slack/
    

    View Slide

35. © 2021 Contentful
    Amplify Community
    amplify.aws/community/
    

    View Slide

36. © 2021 Contentful
    Example repository
    github.com/syumaK/amplify-contentful-app
    

    View Slide