Getting a Slack helper running with Netlify: Part 2

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