Using Node.js and Less to dynamically select a stylesheet source depending on the subdomain

Question

Using Node.js and Less to dynamically select a stylesheet source depending on the subdomain

Currently, my tech stack consists of nodejs, express, jade, and less.

I have set up routing to different subdomains (for example: college1.domain.com, college2.domain.com). Each college has its own unique stylesheet. I am looking for a way to selectively load the appropriate stylesheet based on the subdomain.

Instead of passing around variables and deciding which stylesheet to load during page rendering, I am exploring the option of organizing the stylesheets into separate subdirectories. This approach would involve instructing the less-middleware to target a specific directory depending on the subdomain. Do you think this solution is feasible?

javascript css node.js express less

Answer 1

Answer №1

If you have static stylesheets, consider using nginx in front of your app server to serve the assets based on domain and/or path. This can offload asset serving from your app, allowing it to focus on other tasks and potentially improving performance.

Here is a simplified configuration example inspired by nginx documentation:

server {
  location / {
    proxy_pass http://localhost:8080;
  }

  location /stylesheets/ {
    root /path/to/your/stylesheets;
  }
}

This setup directs all requests to your app except those for files in the /stylesheets/ directory, which are served directly from the file system.

For more information, refer to the beginner's guide to nginx.

Answer 2

If you have static stylesheets, consider using nginx in front of your app server to serve the assets based on domain and/or path. This can offload asset serving from your app, allowing it to focus on other tasks and potentially improving performance.

Here is a simplified configuration example inspired by nginx documentation:

server {
  location / {
    proxy_pass http://localhost:8080;
  }

  location /stylesheets/ {
    root /path/to/your/stylesheets;
  }
}

This setup directs all requests to your app except those for files in the /stylesheets/ directory, which are served directly from the file system.

For more information, refer to the beginner's guide to nginx.

Using Node.js and Less to dynamically select a stylesheet source depending on the subdomain

Answer №1

Similar questions

Tips for displaying identical tab content across various tabs using jquery or javascript

The usage of $('').switchClass in IE8 may cause an error when the switched class includes a color property

Triggering an event in Angular 2 after ngFor loop completes

Utilizing Sinon to Stub Chained "whereIn" Functions in Objection.js

Tips on storing information within a Vue instance

Error message encountered in PHP due to an undefined index

Is it possible for an AJAX request to return both HTML data and execute callback functions simultaneously?

The data from callbackurl could not be received

Using a vanilla JS object as a prop for a child component

Having trouble with the functionality of the jQuery `has()` method?

Vue and Summernote issue: Model content doesn't display in form when loaded from database

What's the optimal method for determining a user's country in Next.js and Node.js?

Whenever I try to send an email in Node.js, I encounter 404 errors. Additionally,

Expressjs throwing a 403 forbidden error while trying to make a post request

Executing multiple calls with Angular's $http service and then resolving them within a loop using underscore

find the middle element in the Vue array

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

Implementing a translucent overlay onto a specific HTML section using sidebar.js/jQuery

The issue of ExpressionChangedAfterItHasBeenCheckedError is a common problem faced by Angular

Changing the MIME type of a JavaScript file in a Jade/Pug environment to text/html