Getting a Slack helper running with Netlify: Part 2

This is carrying on from Part 1 which was a "live blog" style (at the time)

One thing I missed out from the end of the previous post is deploying - netlify deploy will give you a staging/preview URL. From there you can do a netlify deploy --prod to get your work live

Install dotenv

One issue I was having last time was I didn't want to commit my Slack API token. I was recommended by @davshoward to check out dotenv which is exactly what I did.

Installed the package in my functions directory

npm i dotenv --save

Created a .env file in the same folder with the contents of:

SLACK_API_TOKEN=xoxp-XXXX

Add .env to the gitignore

Then from there, we can include it in our functions file at the top and utilise process.env.SLACK_API_TOKEN. All the changes for this can be found on Gitlab.

That was for using locally. To use in Netlify go to the Site -> Settings -> Build and Deploy -> Environment and add a new variable there.

 Lock down to local access

The next thing we want is to lock down the function to only be accessed from the site itself - we don't want people just randomly pinging the function and updating my slack status!

For now, as I will only be using the Web interface, I have restricted the function to only allow requests from the same site:

if(event.headers['sec-fetch-site'] !== 'same-origin') {
	return {
		statusCode: 401,
		body: 'You are not authorized to access this function'
	};
}

This can be seen in this commit.

Front-end UI

I have thrown together a bit of a hasty UI, but it works. You can check out the brutal JS, CSS & HTML on the Git repo.

If you're wondering what the UI looks like, there is a screenshot in this Gitlab Issue.

To do

  • Improve the UI, make it nicer and rebuild in Vue (because I can). Vue is definitely over the top for this, but I haven't built anything in Vue in ages
  • Lock down the front end so it can't be updated by anyone with access to the URL
  • Think about hardware

You might also enjoy

  • Useful command line MySQL commands

    Posted on 5th July 2020.

    It seems I have been doing a lot of command line work on Debian with MySQL recently and have been having to search the internet (or my bash history) every time I need to do something. Here is a collection of commands I have been using…

  • The Git Commit Hash

    Posted on 28th May 2020.

    The magic 40 character string that is attached to every commit you do. What is it, where does it come from and will understanding it help you with Git in the future?…

  • Why should you consider Cloudflare for your website?

    Posted on 20th April 2020. Written For Liquid Light

    Cloudflare is a service which, among other things, provides a CDN (Content Delivery Network), firewall, and performance layer for your website. It has plenty of paid upgrades and features and is a developer’s dream, but what advantage does it have for you to put your website “behind” Cloudflare and how…

    Web
Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.