Creating static directories and sub-directories simultaneously with express.js

Question

Creating static directories and sub-directories simultaneously with express.js

I have a `views` directory that I made static by using `app.use(express.static('views'))`. The views directory consists of subfolders as listed below-

views
|-homepage/
|    |-homepage.ejs
|    |-homepage.css
|    |-homepage.js
|
|-partials/
|     |-navbar.ejs
|     |-footer.ejs
|
|-playground/
|    |-playground.ejs
|    |-playground.css
|    |-playground.js

I rendered the homepage and noticed that the CSS was not displaying correctly, because I did not specify `./views/homepage` as static.

Although it is currently not an issue since I only have a few pages to render, if in the future I plan to create dynamic directories, I am unsure how to make their respective folders static.

Is there a way to declare a folder as static and have all its subdirectories automatically become static as well? I have heard people mention that once the parent folder is marked as static, all subdirectories also become static which makes sense, as my homepage.ejs was displayed properly (albeit without CSS), but I had to specifically add `app.use(express.static('./views/homepage'))` for the CSS to render on my homepage.

Thank you in advance!

css node.js express ejs

Answer 1

Answer №1

To properly serve static files like CSS and JS, it is a common practice to store them in a designated directory, such as public. Take a look at this illustration.

https://i.sstatic.net/CxI26Prk.png

In your primary configuration file (e.g. app.js), you must set up express to serve static files from the public folder:

app.use(express.static(path.join(__dirname, 'public')));
app.set('view engine', 'ejs');
// sample route
app.get('/', (req, res) => {
    res.render('homepage/homepage');
});

In your .ejs files, ensure to reference the corresponding CSS and JS files with the correct path to the static files. For instance, in homepage.ejs:

https://i.sstatic.net/AzmBgv8J.png

Hopefully, this approach proves effective for your project.

Answer 2

To properly serve static files like CSS and JS, it is a common practice to store them in a designated directory, such as public. Take a look at this illustration.

https://i.sstatic.net/CxI26Prk.png

In your primary configuration file (e.g. app.js), you must set up express to serve static files from the public folder:

app.use(express.static(path.join(__dirname, 'public')));
app.set('view engine', 'ejs');
// sample route
app.get('/', (req, res) => {
    res.render('homepage/homepage');
});

In your .ejs files, ensure to reference the corresponding CSS and JS files with the correct path to the static files. For instance, in homepage.ejs:

https://i.sstatic.net/AzmBgv8J.png

Hopefully, this approach proves effective for your project.

Answer 3

Answer №2

When trying to access files in sub-directories, it is important to make sure that the URL path is relative to the root in express.static.

The following code example will successfully load the file as the URL path is properly relative to the root:

//server.js
app.use(express.static('views'));

//homepage.ejs
<link rel="stylesheet" href="/homepage/homepage.css" />

In contrast, the next code snippet will not be able to load the CSS file because the URL path is not correctly specified:

//homepage.ejs
<link rel="stylesheet" href="/homepage.css" />

However, the following code will work as there are multiple directories set up to serve static files, and the root specified in the second express.static call will handle the referenced file:

//server.js
app.use(express.static('views'));
app.use(express.static('views/homepage'));

//homepage.ejs
<link rel="stylesheet" href="/homepage.css" />

Answer 4

When trying to access files in sub-directories, it is important to make sure that the URL path is relative to the root in express.static.

The following code example will successfully load the file as the URL path is properly relative to the root:

//server.js
app.use(express.static('views'));

//homepage.ejs
<link rel="stylesheet" href="/homepage/homepage.css" />

In contrast, the next code snippet will not be able to load the CSS file because the URL path is not correctly specified:

//homepage.ejs
<link rel="stylesheet" href="/homepage.css" />

However, the following code will work as there are multiple directories set up to serve static files, and the root specified in the second express.static call will handle the referenced file:

//server.js
app.use(express.static('views'));
app.use(express.static('views/homepage'));

//homepage.ejs
<link rel="stylesheet" href="/homepage.css" />

Creating static directories and sub-directories simultaneously with express.js

Answer №1

Answer №2

Similar questions

How do I designate the compiled migration location?

The sequence of CSS and deferred JavaScript execution in web development

The correlation between the node.js version and the @types/node version

Exporting a node express app for chai-http can be done by creating a module

What is the best way to add animation to my `<div>` elements when my website is first loaded?

Are there any alternatives in NodeJS similar to PyAutoGUI that have the ability to search for an image within a screenshot?

Unrestrained text

The intl-tel-input dropdown feature is malfunctioning on mobile browsers

Encountering an Issue with React, Node Js, and Express - Unable to Access / Endpoint

Gain access to Google Analytics without the need for page consent by utilizing JavaScript

Navigating the world of CSS with Razor

The expression req.files consistently comes back as an empty [object]

Retrieve information from the MongoDB database using Node.js

Achieving proper alignment for the Mega Menu within the designated container

Ways to extract specific HTML from a jQuery element

What should be my approach to dealing with the "cancel" intent while currently engaged in a conversation?

Arrange the image in a way that flows smoothly with the text

Adjust the Material UI Select component to accommodate the length of the label

Forwarding information and transferring data from a Node server to ReactUIApplicationDelegate

Position the colored div on the left side of the page