DEV Community

Cover image for Setting up a NodeJS app with themed UI powered by SASS
Rogerio Taques
Rogerio Taques

Posted on

Setting up a NodeJS app with themed UI powered by SASS

Hi, there! 👋

Straight to the point, we are going to see in this post how to set up a project that delivers a NodeJS app with a themed User Interface (UI) powered by SASS.

My assumptions are:

  • You are minimally familiarized with NodeJS apps
  • You know how to install Node packages with NPM
  • And, last but not least, you have a NodeJS project already 🙃

So, let's rock ...

Once upon a time, there is an app that needs to have multiple themes so your users could choose the one that suits them the most.

Surely you can create such themes using vanilla CSS, but that would be a waste of your precious time. And, as you may know, when it comes to serve your users, time is money! 🤑

So, to improve your results and optimize your time, let's use SASS to output the multiple themed CSS files.

Installing the necessary packages

We are gonna need the following packages to make it right, so please install them all as follows:

  • concurrently
  • gulp
  • gulp-sass
  • node-sass (or sass if you wish)
$ npm install -D concurrently gulp gulp-sass node-sass
Enter fullscreen mode Exit fullscreen mode

Update your package.json scripts

You probably have your package.json already set up with some useful scripts, but let's update that in order to make it easier to start everything at once.

  1. Add a watch script to take care of the gulp while developing the app.

  2. Rename your start script with dev (or something else that makes sense to you, if you already have a dev script set).

  3. Finally, add a new start so we can start everything at once

Once done, the script section of your packages.json file should looks like the following snippet:

"scripts": {
  ...

  "start": "concurrently --kill-others --names 'GULP,NODE' -c 'blue,green' 'npm run watch' 'npm run dev'",
  "watch": "gulp watch",
  "dev": "node index.js",

  ...
}
Enter fullscreen mode Exit fullscreen mode

The task manager

The next step is creating a gulpfile.js which will be responsible for transpiling our SASS files into CSS.

Touch a new gulpfile.js file and paste the following content into it:

// gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('node-sass'));

gulp.task('transpile', () => {
    return gulp
        .src('./themes/**/*.scss', { base: process.cwd() })
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }));
});

gulp.task('watch', () => {
    gulp.watch('./**/*.scss', (done) => {
        gulp.series(['transpile'])(done);
    });
});

gulp.task('default', gulp.series(['transpile']));
Enter fullscreen mode Exit fullscreen mode

Note that there are 2 tasks in this Gulp file:

gulp.task('transpile', ...)

Converts any .scss file that is found in ./themes, outputting a .css file in the same location.

gulp.task('watch', ...)

Keeps an eye for any SASS file in your project and, when something is changed, calls transpile again, so a new output is built.

Theming up

For the sake of this exercise, let's have 2 super simple themes: default and red.

Assuming we do have a HTML boilerplate file already (e.g index.html), let's add a default class to the <body /> and import all the themes similarly to the example below:

<html >
  <head >
    <!-- ... -->
    <link rel="stylesheet" href="/themes/default/style.css" />
    <link rel="stylesheet" href="/themes/red/style.css" />
  </head>
  <body class="default">
    <!-- ... -->
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

With the HTML updated, now, let's have the themes!

Create a themes folder at the root folder of your project.

Within that, create a default and a red folder respectively. Then, last but not least, create 2 style.scss files, one for each theme folder.

You should end up with something like:

/project
--/themes
----/default
------/style.scss
----/red
------/style.scss
--/ ...
Enter fullscreen mode Exit fullscreen mode

Now, that the file structure is ready, some ID needs to be given to your newly created themes. In a very simple example, let's add the following code into your SASS files:

/* ./themes/default/style.scss */

html, body {
    &.default {
        background-color: aqua;
    }
} 
Enter fullscreen mode Exit fullscreen mode

and

/* ./themes/red/style.scss */

html, body {
    &.red {
        background-color: palevioletred;
    }
}
Enter fullscreen mode Exit fullscreen mode

Wrapping things up

At this point you should be ready to have your themed app up. So, from a terminal window, run your app by typing the following inside your project folder:

$ npm start
Enter fullscreen mode Exit fullscreen mode

Once your app is running, in the browser DevTool, try to replace the default class from the <body /> with red.

If everything went well, you should be able to see the background color of your page changing from aqua to palevioletred.

Great job! 👏 🚀

Happy coding.

Photo by BBiDDac on Unsplash

Top comments (0)