Serverless The Stack

Apr 25, 2018 · 281 words · 2 minute read

I have been obsessed with this serverless crazy. I have been saving tutorials and articles on all of the different services and things that people have built. As a person, never liked to manage servers and just rather stay with static sites. This is a trend that I like.

So, with anything new, I set out to build something small just to see how the workflow is and how I can I use this.

I used webtask.io for my first project. I wanted to do something simple for my first go at this. So, I wanted to build something that would process some CSS.

On webtask, you have access to NPM modules which made this process very easy.

const postcss = require('postcss');
const cssvariables = require('postcss-css-variables');
const pFor = require('postcss-for');


module.exports = function(context, cb) {
  const mycss = context.body.email;
  
  var output = postcss([
		cssvariables(/*options*/),
		pFor()
	])
	.process(mycss)
	.css;
	
  cb(null, {output});

};

So, I included postcss and two plugins custom variables and for loops because who doesn’t want more loops.

	const mycss = context.body.email;

This variable is from our web form which I will include later. The email reference is because I failed to change a name in my code. Below is the pen I used to post data to this endpoint.

See the Pen post-css by John Siwicki (@siwicki) on CodePen.

Then, I made a simple webform that post data to the webtask endpoint. Then our output variable got sent back to us to do something with.

This example was super simple but as my workflow is starting to go more toward static sites being able to offload some of these functions is going to really enhance that type of workflow.