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

Customize the default getstream component styles in a NextJS Component

How can a full-screen background image be created in Next.js?

What is the best way to merge an array of objects into a single object?

"Creating routes with Node.js Express and connecting to a MySQL database

Building a secure authentication system using Firebase Auth and Realtime Database integrated with an Express

When utilizing the next() function along with res.send(), it is not possible to modify the headers after they have already been sent to the client. An error of

Difficulty accessing class functions from the test application in Node.js NPM and Typescript

Challenge with JavaScript personalized library

Could not locate the express.js file

What is the best way to personalize the Window.Confirm() dialog in JavaScript?

The Express GET route does not support parameters or additional paths

How to manage multiple items within a single MUI/React TextField

The PHP random number generator appears to be malfunctioning when being compared to the $_POST[] variable

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Issues with changing background colors using Jquery animate

Browsing a container with JavaScript

What is the best method for dividing strings in javascript?

Strategies for avoiding unused style tags in React components

AngularJS date formatting fails to properly format dates

What steps are involved in integrating Element Plus with Nuxt 3?