How can I disable conversion of .json/.webmanifest url into base64 string? - javascript

I have a problem that has been bothering me for a while now. I have a vite-react-typescript project in VSCode, with a link in the index.html page to a webmanifest. This is basically a json file with a different extention.
When I build my app, the index.html output file contains the meta tag, however instead of referencing the path of the .webmanifest file, it has converted the entire file into base64. Because of this some browsers cannot find the .manifest file and therefore the website cannot be installed as a PWA.
I assume the problem/possible solution lies in the compiler/build options of vite, however I don't know how to fix this auto-conversion.
Here is the github repo: https://github.com/PluginDev-A/Website
the compiled index.html file is in the dist directory, the original index.html file is in the main directory. The problem is on line 6 of both files
**It does not matter whether the file-extention is .json or .webmanifest, both urls get converted upon build

That file should be probably placed in public directory because it is:
Never referenced in source code (e.g. robots.txt)
Must retain the exact same file name (without hashing)
And it should be referenced from index.html with absolute path
<link rel="manifest" href="/manifest.webmanifest">

Related

Where should I put these strange files in the file structure for Flask app?

So I downloaded a template for a website, with the aim to use it in my Flask app. I know the basic file structure of Flask app is this:
-app
app.py
-static
-images
-image files
-style
-css files
-templates
-html files
But when I opened the folder of the template code, I found all these strange files and I couldn't decide where to put them.
The original files:
So I put the css, fonts, images, js folders into the static folder and left the rest of the files in the templates folder along with index.html (ignore index - Copy.html, that is a copy I made of the original index.html file), updated the paths of css and js files inside the HTML document and executed app.py.
The file ran but most of the text of index.html was not loading and only one image was being displayed. I checked the logs in the command line terminal and discovered that most of the css was not even getting called.
What am I doing wrong? How should I arrange these files?
In your html file you should connect styles in this way:
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css') }}">

I can't use Javascript in Dreamweaver

My Javascript wont activate on dreamweaver. I attached it and everything but when i try to call it with script tags it does not appear on my live preview. i have it attached by this code
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
If someone could please help that would be awesome! :D
Live mode runs Your code in some virtual webserver and it cannot get local js file. Since browser may block resource from sharing (CORS). Think about putting js file to relative to html file and defining relative url to js file. Create js folder near to html file and put js file there and in Your html file define src="js/Untitled-2.js" – num8er 12 mins ago
Thanks Num8er
In my opinion, it is best practice to keep all files relative to the project. This means setting up a project folder and keeping files organised in sub-folders.
Consider this project structure:
Project folder
CSS folder
style.css
Javascript folder
script.js
Images folder
image.jpg
index.html
The sub-folders are directly children of the project folder, and inside each folder is the corresponding files.
The html file is also a direct child of the project folder (it's not in any other folder).
This means all the related files are relative to the html file.
So in your html file, you can link up these files easier.
<link href="CSS/style.css" rel="stylesheet">
<script src="Javascript/script.js" type="text/javascript"></script>
<img src="Images/image.jpg">
As you can see all the files are linked without a full path, this is called relative linking. Absolute linking is the opposite in which you specify the full path, such like you are doing at the moment:
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
This is good in certain places, however you should always try to aim for relative linking. If you follow this, you shouldn't have any more problems.

Linking a local copy of bootstrap

So Im trying to link a local copy of bootstrap (It works with a CDN). I have bootstrap.css installed in the same directory as index.ejs and yet I keep getting these 404 errors.
So the file path for bootstrap.css is /home/daniel/scheduler/doc_display/app/bootstrap.css
and index is: /home/daniel/scheduler/doc_display/app/index.ejs
Any help would be much apreciated
Your browser is going to look for the file relative to the location of the page it loads, so you need to make sure your path is correct.
Right now it's looking for it in the same folder as the index, which it looks like isn't where it's located.
I put the bootstrap.css file inside of my dist directory then included the new path inside the link tag. For some reason webpack seems to find paths when they are in the dist directory

Cannot find javascript file node.js

I linked my javascript file in one of my HTML pages but I keep getting the error http://localhost:3000/users/javascript/users-edit.js.
Here is my application structure:
app/public/javascript/users-edit.js
app/views/users-edit.handlebars
In my app.js file I have:
app.use(express.static(__dirname + '/public'));
In my users-edit.handlebars file, I clearly link in my .js file:
<script type="text/javascript" src="javascript/users-edit.js"></script>
Note - I have several other handlebars files where I link the .js file in the exact same manner, but they all work.
Can someone help?
You're asking for /users/javascript/users-edit.js but the file is in /javascript/users-edit.js
Presumably when you said src="javascript/users-edit.js" you forgot to take into account the URL of the page including that HTML might not be in the root of the site, and you should have said src="/javascript/users-edit.js" (explicitly starting the URL resolution from the root instead of the current directory).

my html file won't link to stylesheets & javascript that reside in a parent directory

I am testing my website code, and I have the following folders in my working directory:
css
js
img
html (contains index.html)
When I try to bring up my website locally (the "index.html" inside of the html folder), none of the css or js files were found (404 Error).
However, before I made an html folder everything was linked together fine, and my file setup looked like this:
css
js
img
index.html
Also, when I created an "html" folder and put "index.html" inside of it, I changed the html code so that it would refer to the other files appropriately (from what I've seen on various websites):
<link href="../css/my_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/touch_functionality.js"></script>
<img src="../img/display_photo.jpg" alt="Display Photo">
Additional Information:
I am using a local Apache server to access the "index.html" file, and I have set the DocumentRoot for the VirtualHost I made to the "/html" folder.
Additionally, I thought this may have been a permissions error, but I downloaded Cygwin and I used "chmod 711" on all of the folders in my working directory and I have used "chmod 644" on the "index.html" file inside of the html folder, but the files still wouldn't be found.
I've done my research on this for quite a few hours, but unfortunately I haven't come across a solution for this yet. Any help would be much appreciated, thank you.
Update
If I change the DocumentRoot to where all of my working space directory (instead of html) and place a .php file that simply contains the following line of code:
<?php require("html/index.html"); ?>
where my folders reside so my working directory looking like this:
-css
-js
-img
-html (contains index.html)
-index.php
Everything will work correctly. However, I would have to believe there is a way so that I don't have to do this "work-around" method. Any insight would be incredibly helpful, thanks again.
The reason being is that the web server only allows one to view files in the html directory or below.
Otherwise it will somebody to access any part of your file system.
Would you like that?
To fix this go back to the configuration that works,

Categories