Send notification from Gatsby to Telegram with Netlify lambda functions

Dimitri Ivashchuk: [00:00] In this lesson, we will be adding the Telegram notification functionality to our Gatsby website. It will look something like this. We have a small form, which we need to fill out. When we submit it, actually, we get a notification in the Telegram channel to which we have added this functionality. Let's get started.

[00:23] I have prepared this small Gatsby website without any noise, which just has the form with two inputs and submit button. If we inspect it, if I write my name here and my age and submit it, it logs them here.

[00:45] We will be actually implementing this notifyTelegram notification function. This is something that you should care about.

[00:54] First of all, we need to install the development dependencies. You see that we are installing our HTTP proxy middleware, which we're using to redirect our request and avoid course issues when developing locally. Then, Netlify Lambda to actually develop our Lambda functions, which are utilized for adding the server functionality to static Gatsby websites and NPM run, all which we are using to run our commands conveniently.

[01:25] Let's install the dependencies. Dependencies are installed and we can proceed with writing the function and preparing our project. We start in the package JSON. We need to add several scripts to make our development life easier. We remove the start script, which we'll replace with these other start script which utilizes NPM run, all to run both our application and Lambda server.

[01:59] You see that now we have start app command, which runs NPM run develop or Gatsby develop. Start Lambda, which runs Netlify Lambda and serves our function from the server, so we could test them in the development locally.

[02:14] After that, we need to create the Netlify TOML file in which we place our build configuration. Let's save package.json also. Here, you see that we specify that the function folder is something from where we will source our functions. We actually need to create a new folder here called functions. Here we will place our functions which will be executed by Netlify.

[02:47] Our next stop is Gatsby config. We need to set up the proxy middleware, so it works correctly. Let's import it with an export. You might want to know that if you're using some older versions of Gatsby, you don't need to use this named export, you just const proxy require proxy. Of course, we need to run it here. You see that proxy has been created correctly.

[03:30] Now we are ready to write the template for our function. Let's go to functions, create new file, let's call it notifyTelegram.js. Let's paste our function here. It's a handler that is needed to be exported by every Lambda function for Netlify to be working correctly with it.

[03:52] It's also console log in the query string parameter that we pass to it and returns the callback, which needs to return a status code 200 if something or if everything is OK and some error code if something went wrong.

[04:06] Now, we can actually start to serve our functions. We need to run yarn run start lambda. You see that server has started and now we can actually execute our function on the front end first to verify that is working correctly. We are ready to execute our function. Let's import axios from axios and in our onSubmit handler, let's just run the function.

[04:41] If the notification or if we receive status code 200, we want to console log some notification. Also, here we want to console log the receivedBody with this event body parsed from JSON. If everything is correct, then it should work fine. Notification has been sent.

[05:03] Let's go to the terminal and see. The object is also here, so we can now use it to send the real Telegram notification in our notified Telegram function. I have created the test channel to which I want now to add the horn bot, which we'll be using to send a notification.

[05:24] You see when you add the horn bot to your channel or to the messages with somebody, you get the URL, which is a webhook that we could use to send a notification directly to this channel. Let's copy this webhook, go back here and add our notification logic into this notifyTelegram handler.

[05:55] Let's import axios here and let's change this callback for the new function that we'll be using. This is our webhook that we have copied. This is the text string, which is a string interpolation to actually append the receivedBody name and receivedBody age, which will be coming from here.

[06:27] If the request has been executed successfully, it return the status code of 200. If we have some error, we will just pass the error to callback and it will handle it appropriately.

[06:40] Let's save this and then we need to change some details here. Let's say Dimitri, 20. This is the age I want to be and then we submit it. Let's go to Telegram and you'll see that we have name Dimitri, age 20 written directly to the channel of that Gatsby Telegram to which we add the horn bot.

[07:10] To actually make it work on the server, you need to make a couple of adjustments to your commands. We need to go to package JSON and add the build commands. These commands will ensure that when deployed, your Lambda functions will be built previously before everything starts to be served and before your application builds your Gatsby application.

[07:42] The last thing that you want to do to actually secure everything, you would want to probably move this into EMD file and hide it. For the purposes of this tutorial, I've just included it directly as a string. Enjoy sending notifications from your Gatsby websites to Telegram.