So I’m a bit of a dinosaur when it comes to web stacks - I’m all about LAMP (Linux, Apache, MySQL, PHP). I had an idea for a small little web app and thought it would be the perfect opportunity to give Netlify a go.

I’ve not really used Netlify before (I have a single app running with a useful function for some behind-the-scenes stuff for me) but that was cobbled together with me copying and pasting commands.

With that knowledge and some Slack API knowledge I’m going to see how quickly I can get a proof of concept together. It will all be written in JavaScript using their functions

Brief: Have a web app feature 4 buttons. Each button will update my work Slack status with a predefined status. This means I can quickly open it on my phone and hit a button rather than going through the Slack UI and writing it every time.

The name will be sitrep.

The app will also show the current status and when it expires (if it does).

7:43pm

I’ve signed up for Netlify and globally installed the netlify cli (npm install netlify-cli -g). I’ve also created a folder (good start) and made an empty git repo (git init).

I don’t want to use auto deployments from Gitlab/Gitlab (because…reasons), so going to do a netlify init in my folder.

7:49pm

I’ve created a netlify.toml file so I can specify my site root and where the functions are going to live - the contents is just the following. I’ve made the folders.

[build]
  publish = "html/"
  functions = "functions/"

You can then run netlify dev to give you a server to serve your files. As the actual “website” is going to be static HTML I don’t need to run any build tools. Just need to figure out how I can trigger a function call locally…

7:55pm

OK, so with netlify dev running, the URLs are the same as they would be on live. So I have made a file (functions/sitrep.js) which can then be called from http://localhost:8888/.netlify/functions/sitrep

This is because in the netlify.toml file, I told it where the functions lived. The contents of this file needs to look something like:

exports.handler = function(event, context, callback) {
	return {
		statusCode: 200,
		body: 'POW'
	};
};

Inside the event variable is all the good stuff you might need (and I might need to make this web app sound). Things like httpMethod, client-ip etc.

Next step, getting on with the Slack API

Custom status is part of a user’s profile and setting status requires the users.profile:write scope.

8:13pm

So you need to make an App in Slack to get the right API details. It’s a faff and I don’t really have a link to share as it is tied to my workspace. However, somehow, I made an app.

Once you have that app you can give it permissions - there are two in particular we need

• users.profile:read - for reading the status
• users.profile:write - for writing the status

Once you have that (and installed your app on your workspace) you then get a OAuth Access Token which you can use.

#netlify #lamp