Setting up a NodeJS app with themed UI powered by SASS
Tags: webdev, node, sass, tutorial
Published: 2022-03-23 03:16:51

Hi, there! 👋

Straight to the point, we are going to see in this post how to set up a project that delivers a [NodeJS](https://nodejs.org/en/) app with a themed User Interface (UI) powered by [SASS](https://sass-lang.com/).

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)

```sh
$ npm install -D concurrently gulp gulp-sass node-sass
```

## 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:

```json
"scripts": {
  ...

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

  ...
}
```

## 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:

```js
// 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']));
```

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
<html >
  <head >
    <!-- ... -->
    <link rel="stylesheet" href="/themes/default/style.css" />
    <link rel="stylesheet" href="/themes/red/style.css" />
  </head>
  <body class="default">
    <!-- ... -->
  </body>
</html>
```

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
--/ ...
```

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:

```sass
/* ./themes/default/style.scss */

html, body {
    &.default {
        background-color: aqua;
    }
} 
```

and

```sass
/* ./themes/red/style.scss */

html, body {
    &.red {
        background-color: palevioletred;
    }
}
```

## 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
```

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 <a href="https://unsplash.com/@bbiddac?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">BBiDDac</a> on <a href="https://unsplash.com/s/photos/css-theme?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>