What is the best method to deliver CSS/JS using Crow C++?

Question

What is the best method to deliver CSS/JS using Crow C++?

When attempting to serve a load.css file alongside index.html, I am encountering a 404 error. I experimented with manually setting the res.body == load.css data, but this caused the request to remain stuck on loading.

What could be causing this issue?

void foo() {
    crow::SimpleApp app;
    crow::mustache::set_global_base("/home/cereza/testing/src/frontend/src/");

    CROW_ROUTE(app, "/") ([] () {
        auto page = crow::mustache::load("html/index.html");
        return page.render();
    });

    CROW_ROUTE(app, "/style/load.css") ([] () {
        crow::response res;
        res.set_static_file_info("style/load.css");
        return res;
    });
}

I have already attempted adjusting paths and verifying if files are being correctly retrieved.

html c++css backend crow

Answer 1

Answer №1

There is no need to create a separate route for serving JS and CSS files. These files are considered "static" and should be placed in a designated folder named "static".

Your project directory structure should resemble the following:

└── mainRoot/
    ├── static/
    │   ├── script1.js
    │   ├── script2.js
    │   ├── style1.css
    │   └── style2.css
    ├── templates/
    │   ├── home.html
    │   └── about.html
    ├── server.cpp
    └── additionalFile.cpp

You can eliminate the unnecessary route from your server configuration:

int main() {
    crow::SimpleApp app;
    crow::mustache::set_global_base("/path/to/project/src/frontend/src/");

    CROW_ROUTE(app, "/") ([] () {
        auto page = crow::mustache::load("home.html");
        return page.render();
    });
}

In your home.html file, you can reference the JavaScript and CSS files as usual:

<link rel="stylesheet" href="/static/style1.css">
<script src="/static/script1.js"></script>

For more information, refer to the static files section in the Crow documentation.

Answer 2

There is no need to create a separate route for serving JS and CSS files. These files are considered "static" and should be placed in a designated folder named "static".

Your project directory structure should resemble the following:

└── mainRoot/
    ├── static/
    │   ├── script1.js
    │   ├── script2.js
    │   ├── style1.css
    │   └── style2.css
    ├── templates/
    │   ├── home.html
    │   └── about.html
    ├── server.cpp
    └── additionalFile.cpp

You can eliminate the unnecessary route from your server configuration:

int main() {
    crow::SimpleApp app;
    crow::mustache::set_global_base("/path/to/project/src/frontend/src/");

    CROW_ROUTE(app, "/") ([] () {
        auto page = crow::mustache::load("home.html");
        return page.render();
    });
}

In your home.html file, you can reference the JavaScript and CSS files as usual:

<link rel="stylesheet" href="/static/style1.css">
<script src="/static/script1.js"></script>

For more information, refer to the static files section in the Crow documentation.

What is the best method to deliver CSS/JS using Crow C++?

Answer №1

Similar questions

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Displaying article title above container with backdrop picture

Troubleshooting CSS Animation Failure in Internet Explorer 11

When toggling the menu in bootstrap, the functionality of <a href=""> links may be disrupted

nsIStyleSheetService - The Gateway to Stylish CSS

Obtaining the IP address of the interface with a route to the specified host

jQuery: Select the parent element of a focused form input and apply styling

When using the Android platform, the webpage may not be loading correctly and certain links may be unresponsive in the webview

Compiling perl for Android using cross-compilation encountered an issue: ld.lld reported an error stating that it was unable to

The rotation feature for legends in Highcharts does not function properly on Internet Explorer 10 and 11 if the document mode is

The C++ private implementation (pimpl) pattern and data structure exporting concept

The Materialize tooltip functionality is only functional when used outside of a function

The svh/lvh units are experiencing unexpected issues when using Chrome on an iPhone

The process of updating a session using jQuery

List created using PHP

Bone structure template - optimizing list spacing with CSS

Execute Django code post webpage loading

I have a desire to use Javascript to control CSS styles

What is the best way to place a floating elastic div on top of an elastic background and ensure that the div stays in place?

Utilize the display: flex property to position a div in the bottom right corner of its containing element