Transactional Email 101 📧 with SendGrid & Firebase Cloud Functions

Поделиться
HTML-код
  • Опубликовано: 10 дек 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

  • @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!

  • @mawulijo
    @mawulijo 5 лет назад

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

  • @MrAtsnam
    @MrAtsnam 5 лет назад +1

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

  • @FidelGuajardo
    @FidelGuajardo 5 лет назад

    Jeff on Fireship is PURE EXCELLENCE!!!!

  • @FauzulChowdhury
    @FauzulChowdhury 5 лет назад

    Things just got more fiery. Awesome tutorial.

  • @mihirsomani8662
    @mihirsomani8662 5 лет назад +1

    I love the work you're doing! Learning a lot 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

  • @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.

  • @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.

  • @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

  •  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 ruclips.net/video/VUyBY72mwrQ/видео.html

  • @aveeshshetty8620
    @aveeshshetty8620 5 лет назад

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

  • @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?

  • @gabrielvander
    @gabrielvander 5 лет назад

    Incredible video! As always.

  • @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.🔥

  • @ZachSuerdieck
    @ZachSuerdieck 5 лет назад

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

  • @satishwadkar6963
    @satishwadkar6963 5 лет назад

    Really helpful.. awaiting for svelte js videos..

  • @wpbest
    @wpbest 5 лет назад +1

    Awesome Video

  • @alaksej
    @alaksej 5 лет назад

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

  • @alex-karpov-dev
    @alex-karpov-dev 5 лет назад +1

    Will get a T-Short!

  • @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 :)

  • @SuperJB1981
    @SuperJB1981 5 лет назад

    Amazing as always

  • @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

  • @planetmall2
    @planetmall2 5 лет назад

    Awesome video! Keep it up!

  • @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)

  • @vipinyadav3998
    @vipinyadav3998 5 лет назад

    Cool serverless setup.

  • @EddyCaffrey
    @EddyCaffrey 5 лет назад

    Interesting. Great video

  • @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...

  • @sdsuniverse801
    @sdsuniverse801 5 лет назад

    Love your content 😍

  • @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.

  • @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.

  • @glennv.merkel3020
    @glennv.merkel3020 5 лет назад

    Thanks a lot 😀😀😀

  • @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.?

  • @kheronnmachado799
    @kheronnmachado799 5 лет назад

    Very nice! Thanks...

  • @gabrielgutierrez641
    @gabrielgutierrez641 5 лет назад

    Thanks Jeff!

  • @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

  • @bakertrevis
    @bakertrevis 5 лет назад

    Looking forward to more MVP videos..

  • @MichaelRichins
    @MichaelRichins 5 лет назад

    You've Got Mail! Classic!

  • @nickbrodd7159
    @nickbrodd7159 4 года назад

    Thanks for making this video. This works excellent in Firebase. Unfortunately though and as can be seen 4 seconds into this RUclips 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?

  • @DerCheckerzeigts
    @DerCheckerzeigts 3 года назад

    Is it possible to send multiple emails within one function?

  • @stevejobs5919
    @stevejobs5919 4 года назад

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

  • @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?

  • @orange_machine264
    @orange_machine264 5 лет назад

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

  • @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)

  • @rintintin_
    @rintintin_ 4 года назад +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?

  • @programinggrid967
    @programinggrid967 4 года назад

    How to use this for our website cantact form

  • @will_abule
    @will_abule 5 лет назад

    What about sendgrid legacy template?

  • @mehdinaghditam
    @mehdinaghditam 5 лет назад

    Very nice,

  • @jatindudhat1116
    @jatindudhat1116 5 лет назад

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

  • @techzone-lk-zone3075
    @techzone-lk-zone3075 5 лет назад

    Cool thanks

  • @mohsenalbo5533
    @mohsenalbo5533 5 лет назад

    Nice keep it up

  • @MrDots99
    @MrDots99 5 лет назад

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

  • @hemanthkumar8330
    @hemanthkumar8330 5 лет назад

    Nice video

  • @ceciliawidmer5212
    @ceciliawidmer5212 3 года назад

    thanks!!!!!!!!

  • @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?

  • @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.

  • @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.

  • @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...

  • @gokulrajalp7130
    @gokulrajalp7130 2 года назад

    then how do I do in react

  • @jobybejoy8219
    @jobybejoy8219 5 лет назад

    👨🏼‍💻 and 🧡 🔥Base

  • @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

  • @ZeinErsyad
    @ZeinErsyad 5 лет назад

    I commented fot the T-shirt XD

  • @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 👍

  • @kelvinzhao4960
    @kelvinzhao4960 4 года назад

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

  • @ivansakal1224
    @ivansakal1224 5 лет назад

    Any python web development content by any chance?

  • @jonathangamble
    @jonathangamble 5 лет назад

    Why not just use nodemailer here?

  • @BlerdGrid
    @BlerdGrid 4 года назад

    Do you do all of your own thumbnails? 💯

  • @SondreSrbye
    @SondreSrbye 5 лет назад

    Nice

  • @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.

  • @amanraj1608
    @amanraj1608 5 лет назад +1

    Just a comment for t-shirt

  • @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

  • @TheSiddharthRay
    @TheSiddharthRay 4 года назад

    I'm going to make it 100 comments

  • @lennart5845
    @lennart5845 5 лет назад

    nice

  • @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 🦴

  • @JNET_Reloaded
    @JNET_Reloaded 5 лет назад

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

  • @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.

  • @poke_champ
    @poke_champ 4 года назад

    you didnt handle the thow exception

  • @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)