Send Emails with Attachments using React, AWS Lambda, API Gateway, and SES

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ม.ค. 2022
  • What's up y'all in todays video we'll learn how to send emails on the click of a button using react, aws lambda, SES, and API Gateway.
    REPO for REACT APP: github.com/arslanah99/Base64_...
    REPO FOR LAMBDA APP: github.com/arslanah99/PDF_EXP...
    PASTEBIN FOR REACT APP.JS: pastebin.com/0NaieP4K
    PASTEBIN FOR LAMBDA INDEX.JS: pastebin.com/ec3g5bWX
    Please don't forget Like, Comment and Subscribe if you're new! Support the channel 😁: www.paypal.com/donate/?busine...

ความคิดเห็น • 68

  • @MrSeredan
    @MrSeredan 9 หลายเดือนก่อน

    Hello. thanks for the video, very cool! but I, like some others, had an error of 500 and cors.
    then after many hours of searching and trying to cure the disease, I found 2 solutions that helped me. 1- for the function, make node 16 version, because the higher version does not know AWS-SDK. 2-give full access for SES.
    now everything works as expected

  • @nathandowney9434
    @nathandowney9434 ปีที่แล้ว +1

    Thank you for this tutorial. It helped me get up and running with SES on my latest project! Would love to see more cloud computing topics, you present them in an easy to understand way.

    • @arslan99
      @arslan99  ปีที่แล้ว +1

      I'm glad the videos helped ya out. Ngl that'd pretty much all the knowledge I have on cloud computing 🤣 but when I learn more I'll definitely teach about it

  • @AshutoshRoy925
    @AshutoshRoy925 ปีที่แล้ว +1

    Awesome..! authetic n DETAILED

  • @antonionietofranco5187
    @antonionietofranco5187 2 ปีที่แล้ว +1

    Gracias Arsian!!!!, estaba buscando esto como loco!! me ayudaste mucho! eres un crack!

    • @arslan99
      @arslan99  2 ปีที่แล้ว +1

      I dont speak Spanish but I assume you're saying you liked it 😃🤣

  • @gavinLovesMetallica
    @gavinLovesMetallica 10 หลายเดือนก่อน

    Thank you! I learned a lot!

  • @Ledwyn3655
    @Ledwyn3655 ปีที่แล้ว +1

    Great video, thanks!

  • @faizanshariff7246
    @faizanshariff7246 2 ปีที่แล้ว +1

    Thank you Arslan. On point. No bs... Thanks man.

    • @arslan99
      @arslan99  2 ปีที่แล้ว +1

      Np glad I could help

  • @nishmashah171
    @nishmashah171 2 ปีที่แล้ว +1

    Very well explained. Thank you for your detailed explanation.

  • @tinloywan4935
    @tinloywan4935 2 ปีที่แล้ว +1

    Thanks man!

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      Happy to help!

  • @shreepowar867
    @shreepowar867 2 ปีที่แล้ว +1

    Thank you

  • @contro07
    @contro07 11 หลายเดือนก่อน +1

    That's really a great tutorial, cheers mate! Not even 10K views, very unterrated!

  • @Peterin
    @Peterin 11 หลายเดือนก่อน +1

    I am getting an internal server error 500. Do i need to attach any other policy to lambda function like "lambda:InvokeFunction" for API gateway to access my Lambda function?

    • @arslan99
      @arslan99  10 หลายเดือนก่อน

      it's been a while since I've used aws for this so im not too sure sorry

  • @mrmilesmarshall
    @mrmilesmarshall ปีที่แล้ว +2

    Great tutorial, appreciated.
    I am however getting a CORS policy error
    ...has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
    Any ideas?

    • @arslan99
      @arslan99  ปีที่แล้ว

      Oh that's a common error in axios
      stackoverflow.com/questions/50949594/axios-having-cors-issue

  • @garethdawson6432
    @garethdawson6432 ปีที่แล้ว +2

    ​ @Arslan hey! following your tutorial and ran in to an issue. Getting internal server error 500 and through some debugging I was able to figure out that the error is coming from my lamda trying to access event.body.message and other items in the event and them not being there ie the object I am sending in my fetch is not making it to my lamda function. Any help would be really appreciated.

    • @arslan99
      @arslan99  ปีที่แล้ว

      Try logging the event and body individually and check what that returns maybe event.body.message just didn't exist other than that make sure the packages are correct in the lambda

    • @adriandemir7699
      @adriandemir7699 ปีที่แล้ว

      @@arslan99 I have the same error

  • @kugathajkangeswaran3876
    @kugathajkangeswaran3876 2 ปีที่แล้ว +1

    Hello brother, its a fantastic video. Do u have a video for graphql Schema for Version 2 through aws api?

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      I'm glad you enjoyed it. I'm sorry I don't have that video

  • @ChandanaBhimavarapu
    @ChandanaBhimavarapu ปีที่แล้ว +2

    Hello, very helpful video, but i am getting the following error : "errorMessage": "Error: Cannot find module 'aws-sdk'
    Require stack:
    - /var/task/index.js
    - /var/runtime/index.mjs",
    "trace": [
    "Runtime.ImportModuleError: Error: Cannot find module 'aws-sdk'",. Any help would be really appreciated

    • @arslan99
      @arslan99  ปีที่แล้ว

      It means your AWS SDK is not installed please retry the tutorial where I setup AWS sdk

    • @ewitte
      @ewitte 10 หลายเดือนก่อน +1

      @@arslan99 but the tutorial said that Lambda install it itself ...... I have the same error

    • @arslan99
      @arslan99  10 หลายเดือนก่อน

      Off the top of my head then I'm not too sure sorry

  • @yassinbch10
    @yassinbch10 2 ปีที่แล้ว +1

    Do we have to compress all the project ? It includes the backend and frontend part ... ?

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      No ideally you would only need to compress the back end stuff that's why we made a separate project and then we compressed that project and put it into our Lambda

    • @yassinbch10
      @yassinbch10 2 ปีที่แล้ว +2

      @@arslan99 Ok thank you. I tried also to change the email address of the recepient. But it does'nt work. It only works when I put the same adress for "senderName" & "senderEmail"

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      @@yassinbch10 yes those are weird bug that I also encountered I found that if you specifically request the end user who submitting the form to give their email address is what most people already do and you can actually access that data as well. What most forms have is the same sender and receiving email but inside of the actual email body contains who sent that email if that makes sense

    • @yassinbch10
      @yassinbch10 2 ปีที่แล้ว +1

      @@arslan99 Ok so I should first add a new Identity on AWS before I can use an address ? Or it is not necessary ?
      Another problem I encountered, is that the PDF file I sent, it's not readable. Idk why

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      @@yassinbch10 you would need to add the email address to ses and then you can just use that email address in your lambda. I'm not sure why that pdf issue is occurring

  • @TheRcfrias
    @TheRcfrias 2 ปีที่แล้ว +1

    Why do you need to use nodemail inside the lambda as intermediary? Wouldn't it be possible to just send the email directly to SES?

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      Well you need an actual way to process the email itself so let's say you have attachments and whatnot you need to be able to process all that information and doing it only through SES it doesn't work all the time

    • @TheRcfrias
      @TheRcfrias 2 ปีที่แล้ว

      @@arslan99 Fair enough. If I understand it correctly, nodemail is giving you a high level api for managing parameters and attachments? is that what you are saying? Nevertheless it is not mandatory but it encapsulates complex implementation details? I am not familiar with AWS_SDK api for SES. My first thought was that it had already a simplified api for sending all kind of emails including attachments, html, etc...

    • @TheRcfrias
      @TheRcfrias 2 ปีที่แล้ว +1

      In my case I am using PHPmailer, and had an additional smtp server relay to SES, which it might not be necessary since PHPmailer would be doing what nodemail is doing in your example, correct?

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      @@TheRcfrias I've never used phpmailer so I can't say anything about that but if it does the same job as node mailer than it should be fine

  • @gnaneshnayak4592
    @gnaneshnayak4592 ปีที่แล้ว +2

    Please create video on contact page

    • @arslan99
      @arslan99  ปีที่แล้ว

      Wym contact page?

    • @gnaneshnayak4592
      @gnaneshnayak4592 ปีที่แล้ว

      Can I have your insta telegram id?

  • @bobobobo-ki2fw
    @bobobobo-ki2fw ปีที่แล้ว +1

    how do you send text

    • @arslan99
      @arslan99  ปีที่แล้ว +2

      Lemme see if I can make a tutorial on that 😁

    • @bobobobo-ki2fw
      @bobobobo-ki2fw ปีที่แล้ว

      was trying to do amplify ses on insert :S but i cant even get this to work >< i keep trying thank you for your work

  • @akif178
    @akif178 ปีที่แล้ว +1

    i am getting an internal server error

    • @arslan99
      @arslan99  ปีที่แล้ว

      On your lambda or app?

  • @bobobobo-ki2fw
    @bobobobo-ki2fw ปีที่แล้ว +1

    nope 500 error

    • @arslan99
      @arslan99  ปีที่แล้ว

      What else does the error give besides 500? Was the error in your lambda?

    • @bobobobo-ki2fw
      @bobobobo-ki2fw ปีที่แล้ว

      ​@@arslan99 hi ( : can see it says lambda error count 3 but just trying to see where logs are googling it. but its 500 in network tab console

    • @bobobobo-ki2fw
      @bobobobo-ki2fw ปีที่แล้ว

      @@arslan99 might be because sdk already included i retry

    • @bobobobo-ki2fw
      @bobobobo-ki2fw ปีที่แล้ว +1

      could also be the order of props

    • @arslan99
      @arslan99  ปีที่แล้ว

      do you have a pastebin of your code? I'm not too sure too sure without seeing it

  • @teos7068
    @teos7068 2 ปีที่แล้ว +1

    hello friend, I receive this error, I followed the example as is but it does not compile. I try directly from the function. {
    "errorType": "SyntaxError",
    "errorMessage": "Unexpected token u in JSON at position 0",
    "trace": [
    "SyntaxError: Unexpected token u in JSON at position 0",
    " at JSON.parse ()",
    " at Runtime.exports.handler (/var/task/index.js:5:53)",
    " at Runtime.handleOnce (/var/runtime/Runtime.js:66:25)"
    ]
    }

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      Is this error from lambda?

    • @teos7068
      @teos7068 2 ปีที่แล้ว +1

      @@arslan99 Yes

    • @arslan99
      @arslan99  2 ปีที่แล้ว

      Okay so from my guess on that error I think you aren't actually receiving any data from your api gateway. If you try to just console log the result you get from the API that may tell you what's wrong if you don't get any info from the API than it may not have been configured properly or used properly in your react app. If it is returning a console log than consider re-doing the lambda portion of this tutorial. I hope this helps

    • @teos7068
      @teos7068 2 ปีที่แล้ว

      @@arslan99 The error persists, I'll find another way. Thanks a lot.

    • @nishmashah171
      @nishmashah171 2 ปีที่แล้ว +2

      Even I am receiving this error when I try to test this using AWS test event. Using reactjs application and postman, I am getting 500internal server error

  • @gabrielhernandez8190
    @gabrielhernandez8190 ปีที่แล้ว +2

    Hello Arsian, I have the same error that other viewers.. I receive the following error:
    {
    "errorType": "SyntaxError",
    "errorMessage": "Unexpected token u in JSON at position 0",
    "trace": [
    "SyntaxError: Unexpected token u in JSON at position 0",
    " at JSON.parse ()",
    " at Runtime.exports.handler (/var/task/index.js:7:83)",
    " at Runtime.handleOnce (file:///var/runtime/index.mjs:548:29)"
    ]
    }
    I was verified permissions and it is ok. I followed all your instructions but the error persist. Could you explain me how I can test this in postman for example? or can you how should be the payload to can test in postman. Thank yoy very much for your help.

    • @arslan99
      @arslan99  ปีที่แล้ว

      The best way to test it in post man is to make your API public or take the auth token and send a basic request in string form to your API and try to see if cloud front actually returns something but that specific error means the actual JSON is incorrect if I remember correctly

    • @gabrielhernandez8190
      @gabrielhernandez8190 ปีที่แล้ว +1

      @@arslan99 Thanks for your answer... in this case, could you have an example of this json?

    • @arslan99
      @arslan99  ปีที่แล้ว

      @@gabrielhernandez8190 unfortunately I'm not infront of my computer rn but if I get infront of one soon I can. I honestly just recommend refollowing the tutorial