AWS Amplify Fullstack Project Setup (React, Node, Lambda, REST API)

Поділитися
Вставка
  • Опубліковано 14 лис 2021
  • AWS Amplify is a CLI toolchain to help you build and deploy applications quickly. In this Step by Step Tutorial video, I show you how to get started using Amplify to build a ReactJS + NodeJS based fullstack app with a serverless backend. I walk you through all the steps and explain all the settings in between.
    Looking to get hands on experience building on AWS with a REAL project? Check out my course - The AWS Learning Accelerator! courses.beabetterdev.com/cour...
    Code from the video: gist.github.com/beabetterdevv...
    AWS CLI Install Walkthrough - • How to install and con...
    NPM Install Guide - docs.npmjs.com/downloading-an...
    Git install guide - git-scm.com/book/en/v2/Gettin...
    🎉SUPPORT Daniel @ BE A BETTER DEV🎉
    Become a Patron: / beabetterdev
    📚 MY RECOMMENDED READING LIST FOR SOFTWARE DEVELOPERS📚
    Clean Code - amzn.to/37T7xdP
    Clean Architecture - amzn.to/3sCEGCe
    Head First Design Patterns - amzn.to/37WXAMy
    Domain Driven Design - amzn.to/3aWSW2W
    Code Complete - amzn.to/3ksQDrB
    The Pragmatic Programmer - amzn.to/3uH4kaQ
    Algorithms - amzn.to/3syvyP5
    Working Effectively with Legacy Code - amzn.to/3kvMza7
    Refactoring - amzn.to/3r6FQ8U
    🎙 MY RECORDING EQUIPMENT 🎙
    Shure SM58 Microphone - amzn.to/3r5Hrf9
    Behringer UM2 Audio Interface - amzn.to/2MuEllM
    XLR Cable - amzn.to/3uGyZFx
    Acoustic Sound Absorbing Foam Panels - amzn.to/3ktIrY6
    Desk Microphone Mount - amzn.to/3qXMVIO
    Logitech C920s Webcam - amzn.to/303zGu9
    Fujilm XS10 Camera - amzn.to/3uGa30E
    Fujifilm XF 35mm F2 Lens - amzn.to/3rentPe
    Neewer 2 Piece Studio Lights - amzn.to/3uyoa8p
    💻 MY DESKTOP EQUIPMENT 💻
    Dell 34 inch Ultrawide Monitor - amzn.to/2NJwph6
    Autonomous ErgoChair 2 - bit.ly/2YzomEm
    Autonomous SmartDesk 2 Standing Desk - bit.ly/2YzomEm
    MX Master 3 Productivity Mouse - amzn.to/3aYwKVZ
    Das Keyboard Prime 13 MX Brown Mechanical- amzn.to/3uH6VBF
    Veikk A15 Drawing Tablet - amzn.to/3uBRWsN
    🌎 Find me here:
    Twitter - / beabetterdevv
    Instagram - / beabetterdevv
    Patreon - Donations help fund additional content - / beabetterdev
    #AWS
    #Amplify

КОМЕНТАРІ • 59

  • @glennadams7047
    @glennadams7047 2 роки тому +30

    Great thanks! Please add a dynamo CRUD tutorial to this series.

  • @NicoCoetzee
    @NicoCoetzee Рік тому +12

    Going through this now about one year later. The Amplify CLI has changed a bit but it seems most of the components are still the same. Still working, but with some modifications. Thanks for a great intro!
    Edit: I added a comment to your Gist with the modifications I had to make to get it to work.

  • @kanny8742
    @kanny8742 Рік тому +2

    You're an absolute GOAT, cant tell you how much this helped me learn

  • @ayeshamussarath3506
    @ayeshamussarath3506 11 місяців тому +1

    Awesome video, I have been struggling to understand the AWS Amplify and connect all these pieces. I truly enjoyed it and now will replicate the steps. But hats off to you for such an excellent video and explanation. Thank you so much.

  • @marif5103
    @marif5103 Рік тому +1

    So clear and well explained. Could you please add more videos with the new Figma feature

  • @devincatuns3905
    @devincatuns3905 Рік тому

    great video. just what i needed to see

  • @Priya-pathak
    @Priya-pathak 10 місяців тому

    Amazing tutorial. Thank you

  • @christianibiri
    @christianibiri 2 роки тому +3

    Awesome video! your channel is one of my favorites :)

    • @TheVilkaz
      @TheVilkaz 2 роки тому

      I actualy write "be a better dev " in youtube, when i have to implement something new :D

  • @pratapsingh-fp1zs
    @pratapsingh-fp1zs 2 роки тому +2

    Thanks for this information

  • @codebycandle
    @codebycandle 2 роки тому

    confirmed working as per instruks f/ vid; +1. thank you!

  • @foreach1
    @foreach1 2 роки тому

    Great video, Thanks!

  • @ranasagar699
    @ranasagar699 7 місяців тому

    Thanks it helps me a lot

  • @ExBreaths
    @ExBreaths Рік тому +1

    Thank you for this, really appreciate it!

  • @chokeslam1996
    @chokeslam1996 Рік тому +1

    Brilliant video thank you!! How do you hide the AWS info before deployment to web?

  • @ottomac66
    @ottomac66 Рік тому

    Thank you. Very informative ! :-)

  • @saulbenavides4037
    @saulbenavides4037 Рік тому

    thanks for sharing!

  • @hasanbiyik01
    @hasanbiyik01 2 роки тому +5

    I really like your content but I wish that you would show Admin UI for managing content on Amplify.

  • @hectorgalvan8177
    @hectorgalvan8177 Рік тому

    Great video! Can you share your vsssettings for syntax or what app you use?

  • @snieda_programming
    @snieda_programming 2 роки тому

    Thanks, bro !

  • @nickmorton5595
    @nickmorton5595 Рік тому +1

    Great video!!!

  • @pavleenkaur4488
    @pavleenkaur4488 Рік тому

    Can you elaborate a bit on how ssl certificate in node js were handled

  • @bertcatsburg649
    @bertcatsburg649 Рік тому +1

    At 26:00 the mock of the function fails. Fixed that with:
    1. event.json has the following contents:
    {
    "pathParameters": {
    "customerId": "55"
    }
    }
    2. Mock command is : amplify mock function CustomerHandler

  • @claytonvanderhaar3772
    @claytonvanderhaar3772 Рік тому +1

    Hi great work but can I create a front-end on existing Lambda backend API

  • @BBudget
    @BBudget Рік тому

    how did you make it dev? Mine got defaulted to staging which I guess is fine but I would prefer to have the dev tag. Thanks!

  • @GregoMartocci
    @GregoMartocci 2 роки тому +2

    Ecellent! Dude quick question, do you have an example of how to create a Serverless Crud App with Sam and React? Amazing work thank you.

    • @BeABetterDev
      @BeABetterDev  2 роки тому +4

      Hi Grego, I don't have a specific example for this setup but I've added to my video todo list. I'll try to get to it in the next few months.
      Cheers

  • @naytsnar
    @naytsnar 2 роки тому +1

    Thanks!

  • @herbievanbeveren1314
    @herbievanbeveren1314 Рік тому

    How can you alias or have naming convention for the Amplify "funky names"?

  • @AlexeyYanovski
    @AlexeyYanovski 2 роки тому

    Followed along. No option for a "hello-world" function. Only a serverless expressJS app or a dynamo CRUD. Both forcing me to boilerplate or create resources i have no intention of using. Going back to making the backend in SAM and using amplify to deploy the front end react stuff

  • @aqs-ik3qs
    @aqs-ik3qs 2 роки тому

    Does anyone know why my project isn't showing up in the cloudformation stack? Also when I 'amplify push' it gives me the following error "An error occurred during the push operation: Cannot read properties of undefined (reading 'lastPushTimeStamp')"

  • @kylwatson9240
    @kylwatson9240 5 місяців тому

    Any chance you would be willing to make an updated version with the V6 amplify?

  • @absolute3112
    @absolute3112 Рік тому +4

    Good, and thank you for full screen, no picture in picture (which is too distracting)

  • @ashwinchaudhary5730
    @ashwinchaudhary5730 2 роки тому +1

    Please also make fullstack project with React,Node,GraphQL and Lambda

  • @Overthought1
    @Overthought1 Рік тому

    The intro is confusing. You say the prereqs are npm, amplify-cli, & git. But then you run "npx create-react-app" with no explanation. What is npx and why are we creating a React app when we just want to poke around with lambdas for the next 15 mins? A quick explanation was all that was needed. Anyway, great video! Very helpful!

  • @alexandruwolf
    @alexandruwolf Рік тому

    hello, could you tell me jow can I use a module like uuid with amplify? I keep getting "errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module 'uuid'
    Require stack

  • @jtvtech5622
    @jtvtech5622 Рік тому +1

    To select the name of the file or folder, right click, then select "Rename" then hit ctrl + a then ctrl + c then esc. then just paste

  • @priyamghosh409
    @priyamghosh409 2 роки тому

    Can you please show your package.json file please for the above project?

  • @SangramChavan1
    @SangramChavan1 2 роки тому

    Hi, How can one migrate amplify form one region to another ? eg. ohio to mumbai

  • @philipbranum4688
    @philipbranum4688 Рік тому +1

    I just stumbled across this video & found it VERY useful! One (dumb/newbie) question: when using "amplify delete", will this only tear down the infrastructure provisioned in the cloud? The way I read the prompt is that it will modify your local code as well ("wipe out all the local files create by Amplify CLI")? Is there a way to only tear down what is in the cloud? I would hate to have to rewrite/recreate the infrastructure config/code each time.

    • @BeABetterDev
      @BeABetterDev  Рік тому

      Hi Phillip, only the cloud resource should be affected.

  • @kavin7285
    @kavin7285 Рік тому

    How do I create other endpoints like post and update and stuff ?

  • @parthbhodia
    @parthbhodia 2 місяці тому

    Not sure how it is working with yours, mine keeps giving me an error saying CORS Blocked. I did exactly everything how you mentioned.

  • @user-xf1cc9zi6w
    @user-xf1cc9zi6w 8 місяців тому

    how to send a custom acoording to user input like sms Otp or wh Otp , to aws cognito lambda function

  • @sambass827
    @sambass827 7 місяців тому

    Want to ask when I follow titorial @23:51 I get the following: {"customerName":"Customer undefined"} not sure why. Can you help me on this?

  • @yogitech33
    @yogitech33 Рік тому

    Hey what's the name of the repo?

  • @NewAgeWallStreet
    @NewAgeWallStreet Рік тому

    hope someone sees this and could help me. I cannot even get past the first min of the video. In the terminal it puts my c drive and user info and gives me an error 4048. Could someone please help

  • @chawkichalladia1812
    @chawkichalladia1812 2 роки тому +2

    I've been using it for a year now. I'm not a fan of it. i hate how it kinda forces your hand with it's defaults which are not cost optimized.

  • @xushengchin511
    @xushengchin511 Рік тому

    Hey guys, does this project costing any money? I can't afford because I am still a student.

  • @feynthefallen
    @feynthefallen 9 місяців тому

    So it IS using CF on the backend. I knew it.

  • @MC---
    @MC--- 8 місяців тому

    Thank you for your video it has been helpful, but they should have called it AWS Abysmal. It is the worst developer experience I have ever had. I work on a team and it is awful. I have had to nuke our backend enviroments and local development multiple times. It is so easy to make a mistake and difficult to understand how to fix it.
    Small projects that dont require more than a dev or two it is passable.
    Not a comment on your content I just hate Amplify.

  • @priyamghosh409
    @priyamghosh409 2 роки тому +1

    Hi,
    Thanks for sharing the video.
    But I am constantly getting this error..
    Followed step by step what you have showed.
    Compiled with problems:
    ERROR in ./node_modules/@aws-amplify/api-graphql/lib-esm/GraphQLAPI.js 491:14-19
    export 'parse' (imported as 'parse') was not found in 'graphql' (module has no exports)
    Can you please help me out?
    Using ubuntu 20.04 OS
    My package.json file as below :
    "dependencies": {
    "@aws-amplify/ui-react": "^2.1.5",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/graphql": "^14.5.0",
    "aws-amplify": "^4.3.10",
    "graphql": "^15.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
    },

  • @mr.javascript1320
    @mr.javascript1320 Рік тому

    I WAS EXCITED FOR THIS VIDEO UNTIL HE TYPED NPX CREATE-REACT-APP