How to send Slack Messages from Node.js? Slack Webhooks tutorial for beginners | heymesh

hello everyone uh in this video i'm going to be showing you how to send uh slack notifications or slack messages from your node.js web app so for an example i have like a sample form where you can just fill out and then it sends you a slack notification on your node.js web app so first of all i just wanted to say on a personal note i'm really sorry for like not uploading recently i've just been busy like working on a couple of side projects uh so yeah speaking about slack i think slack is like really easy to use even if you're using it alone for your side projects i think like you should probably go go for it as you can use it for like a lot of a lot of like a lot of use cases for example like support messages or contact forms and etc so yeah slack apis is really easy to use as well so i can go read the docs it's like really really comprehensive and i really like reading it so yeah pretty straight forward so so the only thing you need from slack side is just a workspace as i told you earlier it's it's free to use and you can check it out so first of all i'll just try to quickly explain like what's going on and like how we're sending messages to slack so basically we have a form in the front end the form sends a post request to the web server with all the input data in it after we get the input data in the back end we then use axios to send another post request to slack api so we're using webhooks here to get all the data into the slack headquarters so that they can automatically send a message to our slack workspace particularly in a in a single channel so yeah that's how it works so yeah let's just first create an app on slack so you can go to create an app and hit it just opens a model here where you can select the name youtube app youtube app i guess so and then you can select a workspace so yeah this is what like the basic info of like the of the bot of the what of the app is and here are some credentials i'm probably just gonna blur most of it out and here is where you can like set all the display information like the name description and change the background color i'm just gonna leave it like that as we're just testing it out and what you need what you need to go into is basically go to the incoming web hooks and you're just gonna need to check it out so that it's gonna it's gonna be on and then you can hit add new web hook to workspace but before that we need a channel on on what should i say on the slack on the slack workspace so that you can actually like get messages in that particular channel if that makes sense so i'm just gonna hit contact channel i guess so this is just for like testing it out so that works so i can just say it contact channel contact channel so we can just go and hit let's just reload it so that it updates it so yeah let's just should add new webhook to workspace and then youtube and like you can just select contact that's channel and then allow so basically we're just giving it permission to uh to post and like to type stuff on the contact channel which you're gonna do from the node.js what we're trying to do is basically like send a post request uh to the slack web hook so that it automatically sends a message but once they get the request so yeah we get our web hook url here uh and then so this is basically like what we're trying to do i'll just leave the wrapper link here so that you can copy the uh quarter sale you can copy the form inputs here and i also leave the code we're going to be writing today uh in the description i'll leave the github link down below so yeah let's just open our npm and node workspace and just type something out i guess so yeah i'm back in vs code as you can see i'll just uh initialize it with npm init dash y uh this is actually like pretty straightforward stuff i know you guys might know most of it so the packages we are going to be needing are our axios you don't need to install the slack npm package because we're just sending post requests to the web book which is way more convenient than actually creating a slack box just to send like a form request or something like that right so we need axios express which is like the framework we're going to be using and easiest so i think these are like pretty straightforward uh i'm using eds just to like get the form request so yeah so now that we've basically set up like the basic stuff let's just create an index.js file here and then set up some like let's cite some boilerplate code right so const express equals require express so yeah like you might you guys might have seen like the core getting recommended here this is basically github co-pilot i just got like an access to it like a couple of months ago let me know if you guys would actually like and like a video on like my experience and how to use it properly i'd really love to explain it to you guys so put it in the comments down below if you're interested so const express and we need a const axios axios requires axios i guess so this apart from that let's just initialize the uh express app here on stop equal express yeah so like we have our basic app here and let's just like uh send like uh what should i say i get request basic get request here yeah github copy it is amazing send let's just like create a basic sign where it says it's working and yeah let's just uh do app dot listen here and let's just log out that it's yep okay so yeah this is the basic chord it's uh this is like the boilerplate um yeah also a side note uh you you guys should have nodemon installed uh node one is basically like a basic node but it refreshes the web app every time you make a change so that's pretty useful right so let's just go to node one and you can see it's listening on port port 3000 so if you go to loca you get a message called it's working so yeah this is basic uh no just now let's write uh the body parser and the ejs code in also so basically app.set view engine i'm just configuring the egs here engine ejs and app.set views and the i don't think this is needed in the latest version so this will be fine and now let's set up the body parser just to so just so that we can get the form request so this is not created if you're like actually like just sending axios request but as we are using a form right here like this is the form so basically people fill out this form and then we get like a notification on slack that this guy contacted you so yeah let's just do app dot use express dot url encoded extended equals so yeah we have body parts are set up so now let's say uh what should i say now let's just set up the ejs part of it uh so as i told here i mentioned here it's in the views folder right so i'm just gonna create a views folder here and then oh no i yeah and then we'll create a new file called index dot ejs okay now let's just copy the code from this uh from from like this website from this form or what should i say yeah so let's just copy copy all of this i'll just leave a link to the apple file in the link below so you guys can check it out i'm just copying it here i'm just pasting so yeah so if we render the index.tjs you should check i think index not yes or easier let's start and oh i think i have extra [Music] bracket there so yeah now let's see if it works or not here uh next to cheers oh okay okay i think i messed it up okay yeah now the views folder is actually in the index.djs it should it should be there so that it actually like uh works because we configured the views folder here so if you refresh we can see the slack like what should i say the form is actually live here uh and yeah i think it's pretty much working the basic form now actually like let's configure the webhook stuff so yeah let's do app so i'll just try to quickly explain what's happening here so we as i told earlier uh i just wanted to clear out what we say so like the user actually fills out a form and we get the notification in the slack workspace that's basically what's happening so like whenever like uh whenever like what should i say whenever like a user fills out a form and sends it here we get uh like a post request to this url form that submit and the post request so yeah i just basically configured like a name here on ejs with an input and an email here so we just get like a notification uh post request here so what we do is like we post we after we get like a post request we send another post request over to the slack workspace here like the webhook url here uh so we just send it to a couple of a couple of like uh parameters like the name and the text whatever you want to submit and then it successfully sends it to this channel right over here which we created so now let's just send app dot post to this url which is form submit ideas so let's just copy this here and paste it here and just to test it out let's i'll just like rest dot send it here so that request dot body just so that we can see the object which are actually submitting so i'll just send it here so that you can see yeah you can see it successfully uh appearing here and yeah this basically is like the most of the stuff we need and now let's just like configure the webhook stuff so so yeah let's just go back to slack api and copy this uh url here and now we'll just send like an axios axis porsche so let's just send axios dot porsche i know this like this github co-pilot thing appears uh let's try to ignore it axios.post and as the object we're passing we need to put it in an object called text and in the text we can put whatever you want like a string so i'll just use backticks here just because it's convenient so i'll put name uh name as like the dollar sign uh comma and request dot body dot name because this is what you mentioned there write the name here name and email so name there and email email here dollar sign second yeah dollar sign uh because our body dot email so yeah after we sent like a four we can do like an actual what should i say anything like a then dot catch so you can do all of this stuff here so and after like if there's actually like if the person actually submitted the form successfully and the person gets like a what should i say like a notification you can send this one form submitted successfully and if it fails you can put it a form failed submission oh no i'm really bad at spellings okay so yeah this is basically like the basic uh function of the web app let's just test it out if it works simply so just go here refresh just fill out with some random data and if i submit i should get a slack notification so if you can check out you get like a notification name hey mr lawrence email is my my email id email id here so yeah that's basically it but like if you're actually like interested you can actually customize the message that's being sent uh this is basically normal text but you can even use markdown so what you need to do is go to the slack api let's create go here and then go to the block it and then go app template so here you can see like a lot of templates which you can copy and use like for your own web app so if i want this i can basically like just copy this out and use it for my own web app uh it's basically like uh like what should i say a mutated version of markdown it's like kinda kind of weird version of like watch off like uh of like markdown but it's it's it's like it's worth it to work with it because it's like it's it's really cool right so yeah you can instead of like the uh text text object instead of the text object here you basically put like a blocks and then put all this data in so like if you want i can just try it out with something else uh i'll just use like another template i guess so go to app templates uh i'll just use something else okay yeah this seems kind of good just delete all of this here and just yeah you can you can customize it here and it changes so that's really cool as well right so you can even put buttons with url so yeah that works as well so that you can like uh put like a version like open dashboard after once a person signs up right so i'm just deleting all these data okay so let's just copy this here this is basically the object we need so if you want a new line you can do slash in i'm just putting it right over here um okay yeah this is the object right okay so yeah i can just do i can just do what should i say yeah you can use like the asterisk to have a bold i guess is that bold one yeah okay so i'll just do name [Music] um i'll just use the path text here and uh name put it in as a [Music] dollar i'm really sorry like for finding dollars really late because like my keyboard actually like doesn't have the dollar sign i just have to type it manually so request.body.name and then um let's just do like a new line i guess so after the new line we can put in the email email and then we'll put in requester body dollar request body dot email so yeah that's pretty much it i guess now let's try it out again um let's just go back submit it again i'm just submitting and now i'll get this other slack notification with the formatted thing so if i just delete the previous one you can see like how a new message appears so this is pretty cool and yeah you can probably like this this is like a really good starting point to use web hooks and to get like slack notifications off for example like after someone signs up from like a signs up to like a newsletter or something so yeah you can to improve it further you can use like slack bots which is another cool thing uh yeah i think yeah this is a really cool like just to like get together like uh how to like create slack bots in node.js and use the events api and yeah that's it that's pretty much it and we got a like app to work and like the messages to get to get on slack so yeah uh thanks a lot for like watching the video it honestly means a lot for like the amazing support just like i'm getting just for like after like uploading a single youtube video so yeah uh this is like a tutorial i'll try to like probably like increase like the amount of uploads i'm doing and like diversify like the types of videos i'm uploading i'll probably do like a devlog in the future for like a side project i'm working on yeah so i had a lot of fun like recording this video and hope you guys at least learned something thank you for watching and yeah i'm just really thankful that you guys are supporting from me like this early level i don't even think i have like 10 subscribers right now but yeah i'm really thankful for the support i have you

Channel: heymesh

Views: 1,054

Keywords: slack webhooks, slack messages in nodejs, web development, nodejs, how to make a slack bot, sending messages on slack, slack

Id: l1yGpGeHeEA

Length: 18min 31sec (1111 seconds)

Published: Sun Aug 15 2021