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