How to store CSS/JS asset files on a cloud which is not a website hosting per se (Azure Storage in my case)?

bendqh1 · December 30, 2023, 12:07pm

I have a CSS file of about 1KB which I want to put on a cloud storage and access from a JavaScript file.

cssElement.setAttribute("href", "CLOUD_STORAGE_FILE_URL_COMES_HERE");

I have registered to Microsoft Azure cloud storage services and quickly got lost from the complex plethora of virtualization services which are 100% irrelevant for me because I am not a professional server administrator and all I want to do there is just to store a store a CSS file to access it from this JavaScript file.

Thallius · December 30, 2023, 1:45pm

Why don’t you store the css file on the same place you store your js file?

bendqh1 · December 30, 2023, 2:23pm

You might think this is strange and even silly but in Windows 11 Home desktop folder I have these two files for fast developments:

js.js
css.css

JS files don’t recognize the desktop folder as a folder from my tries and I don’t want to put the files in a non-desktop folder in Windows 11 Home, so I want to keep the CSS file on a cloud and rain it down via a URL.

That said
Maybe I do need to change attitude and put the files on a regular folder in my Windows 11 Home and create file shortcuts and put them in the desktop folder, but Microsoft made the process of making file shortcuts longer in Windows 11 Home with the “Show more options” button and the longer list it brings and I don’t like to cooperate with that, hence the allegedly strange and absurd situation we discuss.

Thallius · December 30, 2023, 4:02pm

So why dont you just install a wamp on your local machine and use this for development?

kicken · December 30, 2023, 4:03pm

I don’t really understand your windows complaints. There’s nothing different about a folder on the desktop vs one not on the desktop. Browsers may restrict loading an asset via a file:// url if that is what you are trying to do. If you use a relative path though, it should work just fine.

That said, the best way to do local development is to install a webserver locally and load your code via the http://localhost url. If all you want is a web server, you can install Apache from Apache Lounge. If you want a more complete setup with mysql, php, etc you can try the various bundle installers like Laragon, xampp, or wamp.

As for azure storage, you have to first create a storage account. After you create the account, you can open it and on the side menu find and click the Static Website option. Toggle the option to enable static website hosting and it will show you the URL for your site. Finally, on the side menu click the Containers option and open the $web container and upload your files there.

bendqh1 · December 30, 2023, 5:25pm

This is a good approach; I have actually tried to install WAMP to run two Media-Wiki websites currently hosted on shared hosting but no longer have SSL certificates a few days ago and got many errors about missing Microsoft Redistributable packages but I didn’t want to start pick and download them at the time and I thought about an online solution like CertSage.

Perhaps I should try XAMPP or something else, as user:kicen suggested below.

bendqh1 · December 30, 2023, 7:01pm

My mistake, the error I got each time whether if the files were inside the desktop folder or a regular folder, is:

Refused to apply style from ‘https://example.com/css.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

But I think that my more fundamental mistake is that I can’t even target a CSS file as a Windows file in the following pattern or similar:

cssElement.setAttribute("href", "css.css");

Therefore, I should probably put the file over localhost with one of the programs you have suggested.

Azure

I didn’t find the Static Website option in the sidebar but under “All Services” (that’s a heck of a long cluster of services):

There, I didn’t find any option of a “File Manager” to upload static files with:

Opinion

I am probably missing something there but anyway I think that for my specific task here Azure might be an overkill (although I’ll still be happy to learn what I am probably missing).

kicken · December 30, 2023, 7:37pm

The static website feature to which I am referring is part of the Azure Storage service, so you first need to create a storage account.

Once your storage account has been created, open it and find Static website in the side bar.

Enable the static website website feature and it will generate a URL for you to use which will serve the contents of a special $web container that will be automatically created. To upload your file, find Containers on the side menu for the storage account, open the $web container and click the Upload button at the top.

bendqh1 · December 30, 2023, 10:05pm

An all default “static website” in Azure had a deployment error but I had no desire to debug it because I find Azure unjustly cumbersome or complicated.

I have installed XAMPP and from navigating to localhost in a web browser I figure that it works just fine, but I still have a problem loading the CSS file:

const cssElement = document.createElement("link");
cssElement.setAttribute("rel", "stylesheet");
cssElement.setAttribute("type", "text/css");
cssElement.setAttribute("href", "localhost/css.css");
document.head.appendChild(cssElement);

Refused to apply style from ‘https://example.com/localhost/css.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

What may cause this error?

kicken · December 30, 2023, 10:15pm

If you open the URL in the error message what do you get? Probably a 404 error I am guessing. You probably want to be using the full URL.

cssElement.setAttribute("href", "http://localhost/css.css");

bendqh1 · December 30, 2023, 11:25pm

Yep, I got this:

Not Found

The requested URL “https://example.com/localhost/css.css” was not found on this server.

But after adding http:// before localhost just as you have shown, I did get the file loaded successfully.

I am surprised that when it is localhost there isn’t a fallback from TLS-HTTPS (port 443) to HTTP (port 80).
Perhaps it will become a standard to have such a fallback in the future.

Thallius · December 31, 2023, 8:45am

Of course not. Nobody wants to be redirected to a non secure page automatically if he tries to open a secure one…

bendqh1 · December 31, 2023, 1:58pm

But when it is localhost does it really matter? How?
My knowledge in Information Security is minor…

rpkamp · December 31, 2023, 6:14pm

This is a relative path and will be appended to the current path when resolved. The fact that localhost is also a hostname is neither here nor there. It remains a relative path URL.

If you want to make sure to use localhost as host either put https://localhost or ://localhost at the start.

system · April 3, 2024, 9:05pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.