Transactional Email 101 📧 with SendGrid & Firebase Cloud Functions

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

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

  • @brunocrosier
    @brunocrosier 4 ปีที่แล้ว +151

    Since this video, the API has been updated and it should be template_id instead of templateId ! This drove me crazy for a whole day so I hope somebody can see this and save time!

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

      NodeJs/Cloud function it is corrcet. i.e. `templateId` Doc: github.com/sendgrid/sendgrid-nodejs/blob/master/docs/use-cases/transactional-templates.md

    • @RelAxGamingKing77
      @RelAxGamingKing77 3 ปีที่แล้ว

      Thank you guys, I had the same issue. Sadly I saw the comment too late :D.

    • @captainlennyjapan27
      @captainlennyjapan27 3 ปีที่แล้ว

      Thank you! Sendgrid and Nodemailer should seriously document their stuff better.

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

      2022 UPDATE !!
      It looks like they went back to the `camelCase` version, so now templateId and dynamicTemplateData should be written this way.

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

      @@ioangrasu14 Did anything else change? Struggling to get this code to run haha.

  • @divinedela9125
    @divinedela9125 5 ปีที่แล้ว +16

    i love how this video shows different types of cloud functions that will be required in most , if not all apps

  • @divinedela9125
    @divinedela9125 5 ปีที่แล้ว +41

    The MVP series is an amazing idea. Thanks Jeff

    • @Fireship
      @Fireship  5 ปีที่แล้ว +6

      Thank you, it's difficult to pull off, but it's fun to see how these features work with different approaches.

  • @RossRawlins
    @RossRawlins 5 ปีที่แล้ว +15

    I am super keen to use more of the cloud functions from firebase. Firebase makes it so much easier for a single dev to build out an entire project. No more backend vs front end.

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

      Agreed! The benefits of "serverless" are also huge for large/enterprise teams.

  • @divinedela9125
    @divinedela9125 5 ปีที่แล้ว +3

    I introduced the Rxfire library and your videos to the react developer in my team. Our agency is currently building an MVP with React and Firebase. I am angular developer, I don't write react (yet) but using your videos, I've been guiding him to build the MVP and it's going great so far!

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

    You are just killing it dude! I can't believe you just started with angular/firebase

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

    The MVP series is such a great idea. Excited to see what else you have in store

  • @mawulijo
    @mawulijo 5 ปีที่แล้ว

    It's never a boring or lame time with fireship. Thanks man

  • @joleif4970
    @joleif4970 5 ปีที่แล้ว

    Thank you so much, this comes at exactly the right time!
    Just yesterday I actually registered for sendgrid and today I wanted to start programming.
    This is going to make it a lot easier for me, thank you!

  • @FidelGuajardo
    @FidelGuajardo 5 ปีที่แล้ว

    Jeff on Fireship is PURE EXCELLENCE!!!!

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

    I love the work you're doing! Learning a lot from this channel.

  • @FauzulChowdhury
    @FauzulChowdhury 5 ปีที่แล้ว

    Things just got more fiery. Awesome tutorial.

  • @busyrand
    @busyrand 5 ปีที่แล้ว

    Thanks for covering this topic. I've been learning Web Development for over two years and nobody ever covers email other than making forms to capture user contact data.

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

    🔥🚢 videos are the bomb. Can't wait to binge implement all the fireship videos when my new project is at that stage. Will be getting a pro membership just to support while I'm using your content those few months. Especially the firebase functions course, I'm looking forward to that. I was fumbling my way through my last project.

  •  5 ปีที่แล้ว +3

    You mentioned monorepo just btw, but imho it deserves separate video(s) by itself. How to setup, maintain & automate in such monorepo would be GOLDEN! Do you use some tool, e.g. Nx for it? Love the MVP course idea btw.

    • @Fireship
      @Fireship  5 ปีที่แล้ว +3

      For this simple demo I just manage the code manually, but recently made an Nx video you might want to watch th-cam.com/video/VUyBY72mwrQ/w-d-xo.html

  • @coolaydalena
    @coolaydalena 5 ปีที่แล้ว

    Im a big fan of firebase and this one gives me a new idea. Thanks!

  • @raffaelenicolapiazzolla3927
    @raffaelenicolapiazzolla3927 5 ปีที่แล้ว

    Your videos are always good and well documented

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

    Your videos are just awesome 😍

  • @benjaminjameswaller
    @benjaminjameswaller 5 ปีที่แล้ว

    love the thought and effort that goes into these videos. nice idea to link to different front end solutions

  • @bhavyashah8847
    @bhavyashah8847 5 ปีที่แล้ว

    Your videos make 100% sense to me.
    I have subscribed to your channel.
    Keep making such content.
    A little suggestion, can you make a video on some of the interview questions asked about firebase, cloud computing?

  • @aveeshshetty8620
    @aveeshshetty8620 5 ปีที่แล้ว

    Thank you for this video! I have learned so much from this channel!

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

    It looks like for the 'msg' object for sendgrid mails (type MailDataRequired) accepts only camelCase keys, so dynamic_template_data from this video is now dynamicTemplateData. Hope this saves time for someone, :D

  • @gabrielvander
    @gabrielvander 5 ปีที่แล้ว

    Incredible video! As always.

  • @matthewbeardsley7004
    @matthewbeardsley7004 4 ปีที่แล้ว

    Is there a fairly drop-in PAYG alternative for Sendgrid in this example, specifically I think what is missing from PAYG providers is some email templating in the browser...

  • @alaksej
    @alaksej 5 ปีที่แล้ว

    Great video! As always relevant, engaging and interesting to watch

  • @jefftan2262
    @jefftan2262 4 ปีที่แล้ว

    What is the difference between the two groups of email providers below:
    ConvertKit, SendinBlue, Mailchimp, Mailerlite, GetResponse,
    vs
    Mailgun, SendGrid, Armazon SES, Postmark, Pepipost, etc.?

  • @roulzhq
    @roulzhq 5 ปีที่แล้ว

    As always, super interesting video! I actually never thought about "event-driven" emails (other than "welcome" and "reset password" ones - probably because I'm not really interacting with most other emails sent by apps.
    Definitely going to try this out.🔥

  • @stevejobs5919
    @stevejobs5919 4 ปีที่แล้ว

    Hey FIreship, would you use SendGrid in your real-life projects? even something you could sell to clients?

  • @ZachSuerdieck
    @ZachSuerdieck 5 ปีที่แล้ว

    Awesome video. I was about to implement this in an app I'm working on. This helps. Thanks

  • @planetmall2
    @planetmall2 5 ปีที่แล้ว

    Awesome video! Keep it up!

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

    Anyway to use a sendgrid template for the RESET PASSWORD email ?

    • @BigPokemon
      @BigPokemon 4 ปีที่แล้ว

      Did you ever find an answer to this? I'm trying to do the same thing.

  • @nickbrodd7159
    @nickbrodd7159 4 ปีที่แล้ว

    Thanks for making this video. This works excellent in Firebase. Unfortunately though and as can be seen 4 seconds into this TH-cam video, there appears to be an issue with how SendGrid generates information regarding the Sender names, Addresses, the Unsubscribe link, etc (which all are required fields). Has anyone figured out how to solve this?

  • @SuperJB1981
    @SuperJB1981 5 ปีที่แล้ว

    Amazing as always

  • @riskingeuphoria
    @riskingeuphoria 4 ปีที่แล้ว

    All i want to know is where is the cloud sound. that tune is great for coding. I'm stuck on rotating between low-fi playlists

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

    Awesome Video

    • @Fireship
      @Fireship  5 ปีที่แล้ว

      Thank you Bill!

  • @EddyCaffrey
    @EddyCaffrey 5 ปีที่แล้ว

    Interesting. Great video

  • @eagerashwani
    @eagerashwani 5 ปีที่แล้ว

    Error: Unauthorized
    at Request.http [as _callback] (node_modules/@sendgrid/client/src/classes/client.js:124:25)
    at Request.self.callback (node_modules/request/request.js:185:22)
    at emitTwo (events.js:126:13)
    at Request.emit (events.js:214:7)
    at Request. (node_modules/request/request.js:1161:10)
    at emitOne (events.js:116:13)
    at Request.emit (events.js:211:7)
    at IncomingMessage. (node_modules/request/request.js:1083:12)
    at Object.onceWrapper (events.js:313:30)
    at emitNone (events.js:111:20)

  • @satishwadkar6963
    @satishwadkar6963 5 ปีที่แล้ว

    Really helpful.. awaiting for svelte js videos..

  • @glennv.merkel3020
    @glennv.merkel3020 5 ปีที่แล้ว

    Thanks a lot 😀😀😀

  • @sdsuniverse801
    @sdsuniverse801 5 ปีที่แล้ว

    Love your content 😍

  • @DerCheckerzeigts
    @DerCheckerzeigts 3 ปีที่แล้ว

    Is it possible to send multiple emails within one function?

  • @kheronnmachado799
    @kheronnmachado799 5 ปีที่แล้ว

    Very nice! Thanks...

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

    Amazing tutorial as usual.. keep rocking the community.... wish to add to this full stack series using graphql with nestjs and angular universal.. specially the graphql subscription.. i did it before few days .. but am sure u will shake my head when u do it .. u allways bring hidden tips 👨‍💻👨‍💻👨‍💻

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

      All of those topics are on the list, wish I had more time each day to tackle them :)

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

    What about the initial firebase email after user registry?

    • @yveslaurent76
      @yveslaurent76 5 ปีที่แล้ว

      I mean the confirmation email when an user ist creating a new login. I think thats not possible with your workaround, right?

  • @bakertrevis
    @bakertrevis 5 ปีที่แล้ว

    Looking forward to more MVP videos..

  • @rintintin_
    @rintintin_ 5 ปีที่แล้ว +4

    I followed this directly, but I'm getting a CORS error :(

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

      Did you find an answer to this? I am having the same issue ...

    • @zamidmustefa5915
      @zamidmustefa5915 3 ปีที่แล้ว

      @@TristanGreenidge Same
      Did you find any solution?

  • @gabrielgutierrez641
    @gabrielgutierrez641 5 ปีที่แล้ว

    Thanks Jeff!

  • @vipinyadav3998
    @vipinyadav3998 5 ปีที่แล้ว

    Cool serverless setup.

  • @alex-karpov-dev
    @alex-karpov-dev 5 ปีที่แล้ว +1

    Will get a T-Short!

  • @MarsTheProgrammer
    @MarsTheProgrammer 5 ปีที่แล้ว

    why did you cut off the screen and only show 25% of it? i don't understand how you created a template...

  • @jakeycakester
    @jakeycakester 5 ปีที่แล้ว

    The emails to my users keep getting blocked by spam filters. I'm guessing this has something to do with the fact that these emails are coming from send grid. Is there a way to get around this?

  • @jatindudhat1116
    @jatindudhat1116 5 ปีที่แล้ว

    i have a cors error how i can put cors in 4th on pubsub function?

  • @stevenschaner6818
    @stevenschaner6818 4 ปีที่แล้ว

    It looks like a lot of people are getting it to work. I'm not. Can someone help? I'm using it with a contact form. The function retrieves the email from the contact form just fine but then gives the following error "Error: Forbidden
    at axios.then.catch.error (node_modules/@sendgrid/client/src/classes/client.js:105:29)
    at
    at process._tickDomainCallback (internal/process/next_tick.js:229:7)". Please help.

  • @programinggrid967
    @programinggrid967 4 ปีที่แล้ว

    How to use this for our website cantact form

  • @orange_machine264
    @orange_machine264 5 ปีที่แล้ว

    Wouldn't be mad if you SendGrid that sweet shirt 🔥🤗

  • @CAAAB21
    @CAAAB21 5 ปีที่แล้ว

    How do you feel when you write code on Angular and then on React ?

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

      That is a good question and I may do a full video comparison, but I like them both for different reasons.

    • @CAAAB21
      @CAAAB21 5 ปีที่แล้ว

      ​@@Fireship I agree with you, I have many years using Angular, but now I have to use React in order to follow the standard of the company in which I work and I don't feel comfortable to use React on large projects with many people working on it.

  • @moonythm
    @moonythm 5 ปีที่แล้ว

    Note that if you are a student you can get the github student developer pack wich also gives u a lot of free sendgrid emails

  • @will_abule
    @will_abule 5 ปีที่แล้ว

    What about sendgrid legacy template?

  • @keithcarrillo8238
    @keithcarrillo8238 4 ปีที่แล้ว

    Hey is anyone in late Dec, 2020 into 21 still somehow using this for free, even though this firebase command "firebase deploy --only functions" @7:40 require a blaze pay-as-you-go" and the only fix is to use Node 8 the engine in package.json "engines": { "node": 8} . (note that 'fix' has it's own issues)

  • @MichaelRichins
    @MichaelRichins 5 ปีที่แล้ว

    You've Got Mail! Classic!

  • @mehdinaghditam
    @mehdinaghditam 5 ปีที่แล้ว

    Very nice,

  • @donutrangerr
    @donutrangerr 4 ปีที่แล้ว

    I followed as step by I always get an error in the msg part of the cloud function backend. Any idea how to fix this?

    • @jeremiahblessing3891
      @jeremiahblessing3891 4 ปีที่แล้ว

      Check if user.displayName is generated before adding in the msg options.. because once the user is created, it takes time to add display name to the user object.

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

      @@jeremiahblessing3891 I see, thank you for the advice! This certainly helped. In the end, I found out that the main error was in the sendgrid/mail itself. They issued a new update recently to fix it.

    • @jeremiahblessing3891
      @jeremiahblessing3891 4 ปีที่แล้ว

      @@donutrangerr ✌️✌️✌️

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

      @@donutrangerr to confirm you just updated the package and that fixed the issue?

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

      @@Kaze919 hey! Wow its been quite some time since I had this issue. At the time, apparently there was a bug in which certain version of the api I used were not working and I had go downgrade it temporarily in order to use it. By luck, they released a patch the soon after and my issue was fixed. Code was deployed and the cloud functions worked fine 👍

  • @techzone-lk-zone3075
    @techzone-lk-zone3075 5 ปีที่แล้ว

    Cool thanks

  • @mohsenalbo5533
    @mohsenalbo5533 5 ปีที่แล้ว

    Nice keep it up

  • @ceciliawidmer5212
    @ceciliawidmer5212 3 ปีที่แล้ว

    thanks!!!!!!!!

  • @MrDots99
    @MrDots99 5 ปีที่แล้ว

    I have this exact issue but I have to do it with azure 🤦‍♂️ another great vid though !

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

    then how do I do in react

  • @jonathangamble
    @jonathangamble 5 ปีที่แล้ว

    Why not just use nodemailer here?

  • @hemanthkumar8330
    @hemanthkumar8330 5 ปีที่แล้ว

    Nice video

  • @miquellasheras980
    @miquellasheras980 5 ปีที่แล้ว

    Hello! Anyone know if there is a way to send emails in a frontend app with firebase functions with the free plan??
    You can't do extern api calls from firebase functions on free plan no?

    • @Fireship
      @Fireship  5 ปีที่แล้ว

      Forgot about that. You need the Blaze plan, but it is still free up to 125K function calls per month

    • @TheGolden90s
      @TheGolden90s 5 ปีที่แล้ว

      The only free plan that I found to do external API calls is Netlify functions, which are really just AWS lamda functions

  • @ivansakal1224
    @ivansakal1224 5 ปีที่แล้ว

    Any python web development content by any chance?

  • @kelvinzhao4960
    @kelvinzhao4960 4 ปีที่แล้ว

    Anyone knows how to add file attachment to the contact form http request?

  • @BlerdGrid
    @BlerdGrid 4 ปีที่แล้ว

    Do you do all of your own thumbnails? 💯

  • @weilieschok2001
    @weilieschok2001 5 ปีที่แล้ว

    hi there, i got error
    Error: getaddrinfo EAI_AGAIN api.sendgrid.com:443
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:67:26)
    and noticed that it's required a paid tier stackoverflow.com/a/42775841/8163746
    could you share which one should i go for? Flame or Blaze (pay as you go)
    Coz i really just wanna test out the feature

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

    They have updated the api stucture once again. It now looks like this:
    const msg = {
    personalizations: [
    {
    to: [
    {
    email: user.email,
    }
    ],
    dynamic_template_data: {
    subject: "Hello, World!",
    name: user.displayname,
    text: "Welcome to my awesome app!"
    },
    }
    ],
    from: {
    email: "hello@fireship.io",
    },
    template_id: TEMPLATE_ID
    };
    documentaion here: sendgrid.api-docs.io/v3.0/mail-send/v3-mail-send

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

      Were you able to get this to work? I'm not sure if they updated their api to v3 after your post and I'm failing to get the function to deploy.

  • @deepaksah8040
    @deepaksah8040 5 ปีที่แล้ว

    i'm getting this problem pls help
    Error: HTTP Error: 400, Billing must be enabled for activation of service '[cloudscheduler.googleapis.com]' in project '1002033818121' to proceed.

  • @jobybejoy8219
    @jobybejoy8219 5 ปีที่แล้ว

    👨🏼‍💻 and 🧡 🔥Base

  • @ZeinErsyad
    @ZeinErsyad 5 ปีที่แล้ว

    I commented fot the T-shirt XD

  • @SondreSrbye
    @SondreSrbye 5 ปีที่แล้ว

    Nice

  • @lennart5845
    @lennart5845 5 ปีที่แล้ว

    nice

  • @poke_champ
    @poke_champ 4 ปีที่แล้ว

    you didnt handle the thow exception

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

    Can I win a t-shirt if I am from Canada ?

    • @Fireship
      @Fireship  5 ปีที่แล้ว

      I can ship to every country in the world... except Canada 😉

    • @Luxcium
      @Luxcium 5 ปีที่แล้ว

      Fireship where are you from again ? I am a React type of person addicted to TypeScript so I cannot watch all your videos and it’s sad for me because I really like the format of your videos they kind of are my favourite in the topic related to JavaScript will you be able to do more videos related to VSCODE and other Angular agnostic videos your JavaScript series is exactly what I am craving for ... So yeah it’s probably ok because I never win anything so probably because you don’t deliver in Canada 🇨🇦 I would have been the winner this time LoL 😂

    • @Fireship
      @Fireship  5 ปีที่แล้ว

      @@Luxcium haha, I was kidding about that, I can ship to Canada. Expect a lot more vanilla js content in the near future

    • @Luxcium
      @Luxcium 5 ปีที่แล้ว

      Fireship I know you are joking but it’s ok !!! I love your video but yeah I don’t know Angular and I don’t think I will be a firebase user soon but any thing that is NodeJs or TypeScript or Vanilla JavaScript I love it through the bones 🦴

  • @TheSiddharthRay
    @TheSiddharthRay 4 ปีที่แล้ว

    I'm going to make it 100 comments

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

    Just a comment for t-shirt

  • @harmonyc6734
    @harmonyc6734 4 ปีที่แล้ว

    Thanks for the video, may i please something. Which email service can i use for the business emails like hello@fireship.io

    • @matthewbeardsley7004
      @matthewbeardsley7004 4 ปีที่แล้ว

      If you are using firebase, then I would suggest Google - Gsuite. Otherwise Zoho have a free tier.

  • @JNET_Reloaded
    @JNET_Reloaded 5 ปีที่แล้ว

    spaces either side of a lonely = is stupid dont do it replace = with just =

  • @zeroblackstar
    @zeroblackstar 5 ปีที่แล้ว

    MOREEEE KNOWLEDGEEE

  • @MrMegaGuss
    @MrMegaGuss 5 ปีที่แล้ว

    t-shirt comment)

  • @elanza48
    @elanza48 4 ปีที่แล้ว

    Switching to Netlify, bye bye firebase !

  • @divinedela9125
    @divinedela9125 5 ปีที่แล้ว

    1st

  • @keithcarrillo8238
    @keithcarrillo8238 4 ปีที่แล้ว

    Hey is anyone in late Dec, 2020 into 21 still somehow using this for free, even though this firebase command "firebase deploy --only functions" @7:40 require a blaze pay-as-you-go" and the only fix is to use Node 8 the engine in package.json "engines": { "node": 8} . (note that 'fix' has it's own issues)