Compiling SCSS with Webtask

Published August 20, 2018

Recently, I was looking into ways to compile SCSS via HTTP endpoints for one of my personal projects, cuetip. After some brief Google-fu I couldn’t find any pre-existing services so it seemed like I would have to tackle it myself. Having used Webtask previously, particularly for creating custom slash-commands in Slack, I decided to give it a whirl.

Webtask is pretty cool. If you’re unfamiliar, it’s a “serverless” service that allows you to create endpoints with Node.js. It’s similar to AWS Lambda Functions minus the AWS. It’s free & is very easy to get started with.

Getting Started

Webtask has a great built-in web editor that can handle most needs. However, since we’ll need to use custom npm dependencies (e.g. node-sass) then we need to install & use the Webtask CLI. You’ll need Node.js to install it; for this post I’m using npm v6.x. After installing, let’s create a directory to work in:

mkdir wt-sass
cd wt-sass

We’ll also need to setup our package.json. The defaults are fine for our purposes:

npm init -y

Creating an Endpoint

To keep it simple, we’ll be using Express. Webtask provides minimal boilerplate code; let’s create an index.js and populate it:

var express    = require('express');
var Webtask    = require('webtask-tools');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.json());

app.get('/', function (req, res) {
  res.sendStatus(200);
});

module.exports = Webtask.fromExpress(app);

We’ll also need to add the 3 dependencies to our package.json like so:

npm install express webtask-tools body-parser

Now, we can use the Webtask CLI to create our endpoint:

wt create index.js --watch

Note: The --watch flag will watch for file changes & refresh.

The Webtask CLI will give you a URL to access your webtask at. Since this is a GET request, you can simply go to it in your browser. Assuming everything went well, you’ll receive an HTTP 200 and an OK in plaintext. Now, let’s compile some SCSS.

Compiling SCSS

First things, we’ll need to install node-sass:

npm install node-sass

Now, we can use it with the renderSync() function:

var sass = require('node-sass');

app.post('/', function (req, res) {
  return res.send({
    css: sass.renderSync({
      data: req.body.sass
    }).css.toString()
  });
});

Note the change from a GET to a POST. To test this, you’ll want some sort of REST client. Insomnia is what I use. Now, by sending a JSON payload with a sass key:

{
  "sass": "body { background: rgba(#bada55, .5) }"
}

… you’ll get a response with the compiled CSS:

{
  "css": "body {\n  background: rgba(186, 218, 85, 0.5); }\n"
}

Handling Errors

It’s straightforward to make the code more robust and handle errors. Let’s do that:

app.post('/', function (req, res) {
  if (!req.body.sass) {
    return res.send({ error: 'No Sass' });
  }

  try {
    return res.send({
      css: sass.renderSync({
        data: req.body.sass
      }).css.toString()
    });
  } catch (err) {
    return res.send({ error: err.message });
  }
});

First, verify that the JSON payload contains a sass key. Second, wrap the renderSync() call in a try ... catch block to catch compile errors.

After all those changes, the final code should look like:

var express    = require('express');
var Webtask    = require('webtask-tools');
var bodyParser = require('body-parser');
var sass       = require('node-sass');
var app = express();

app.use(bodyParser.json());

app.post('/', function (req, res) {
  if (!req.body.sass) {
    return res.send({ error: 'No Sass' });
  }

  try {
    return res.send({
      css: sass.renderSync({
        data: req.body.sass
      }).css.toString()
    });
  } catch (err) {
    return res.send({ error: err.message });
  }
});

module.exports = Webtask.fromExpress(app);

All said and done, this is pretty neat. Being able to compile SCSS via an arbitrary endpoint — for free — is awesome.

Last modified January 31, 2019  #dev   #sass   #serverless