In my gulp workflow I have a task that uses npm browser-sync module to serve static files. One of the options of this module is able to set a base directory to let me call js/css/img files etc, and include it using an absolute path like this:
<img src="/imgs/label.png">
this feature let me call this file from any subdirectory I want
/public
---/imgs
------label.png
---/catalog
------list.html <--- here
---index.html <--- and here, this image called using the same path /imgs/label.png
this works fine. Otherwise, I have a task that builds the final compressed and minified version of static files. The problem is, that when gulp building a dist folder with that files that located in the public folder, in html files, there's still absolute path in attributes like href/src. I need to convert the absolute path into relative with keeping a folder structure. I mean that in index.html src has to be imgs/label.png, and in catalog/list.html the same src attribute has to be ../imgs/label.png. Question: is there any module that able to do this for me, or maybe there's some another way to do that, instead of replacing the paths with own hands? Any advice would be appreciated.
Related
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">
I have been using Vue for a while now, and I noticed that I can store project images in either the assets folder or the public folder.
To access images from assets folder in Vue, one would do :src="require('#/assets/images/myimage.jpg')"
To access images from public folder in Vue, one would do :src="./static/images/myimage.jpg"
What's the proper location to store Vue project images?
What's the implication of using either?
How do they affect my project?
Based on the official vue documentation everything that is within the assets folder will be handled by Webpack while everything in the public folder is simply copied but doesn't go through Webpack: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
So if you want to take advantage of Webpacks optimization features during build (which you most certainly want) put them in assets.
I also put all my img's in the assets folder and only have the pwa related images and icons within the public folder.
All Stuff in the public folder gets straight up copied to your /dist usually. ex: favicon.ico ends up on your /dist folder with the name... favicon.ico.
The assets folder is usually where you would put your images/videos/fonts/svgs etc that you will import within vue files. These files end up on your /dist folder as a file with a hash name: (ex: 5j2i35j2o251hia.png).
Any assets from the /assets folder that you do not explicitly import will not end up in your /dist folder, as to not bloat your final file size.
Hope this helps..
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Different between both would be relative (eventually as require('image')) vs absolute paths. Usually absolute path will not be passed via webpack during the build. And if you optimize images of absolute path, nothing will happen.
I'm trying to dynamically set the file paths to the static files (js & css) in the index.html file of my create-react-app such that they can point to different sub-directories depending on what I set in a settings.json file.
Example:
If I set the base_url in my settings.json file like this:
{
"BASE_PATH_URL": "/subdirec1"
}
I expect the file path in my index.html file to be like this:
<script src="/subdirec1/static/vendors/js/core/jquery-3.2.1.min.js" type="text/javascript"></script>
I'd be grateful if anyone could help me out here. Thanks!
If you're using webpack, you can use webpack variables that you can set within the webpack config object, which themselves come from a .json/.js file.
This is the example you can use if you're using webpack!
WARNING: Don't use the command below before reading up on it, because it will make a big mess of files you might not understand yet!
Since you're using create-react-app, I think it uses webpack under the hood but you need to npm run eject it to have more complete access to its configuration!
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
I am facing difficulty in understanding relative path concept, I have seen a part of code written as
../../abc/file/images/picutre/down.gif
how the relative path is computed
A relative path is a path relative to the working directory. In other words the starting point to look for files is from the working directory.
The "../" in a relative path means to go up one directory.
So lets say you're referencing the relative path ../../abc/file/images/picutre/down.gif from an index.html page in the following structure :
http://someexampleurl.com/dir1/dir2/index.html
Your working directory when working from index.html is /dir2 so taking into account that you're going up two levels, the browser expects the file to be at:
http://someexampleurl.com/abc/file/images/picutre/down.gif
how the relative path is computed
Basically a relative path is a "map" from the directory that you are located to the file you need to include. Therefore, relative path is computed based on where you want to go.
For example you have a structure
/ (document root)
|--home.php
|--t.php
|--common
|--header.php
|--footer.php
|--support
|--index1.php
|--privacy
| |--index2.php
From home.php you need to include header and footer. Therefore your home code will look like
<?php
include("common/header.php"); // go one folder down (common) and grab the file header.php
include("common/footer.php"); // go one folder down (common) and grab the file footer.php
Now let say you are in index1.php in support and you need header.php and footer.php. You code will look like
<?php
include("../common/header.php"); // go one folder up (common) and grab the file header.php
include("../common/footer.php"); // go one folder up (common) and grab the file footer.php
Think folder inside folder as levels (level1, level2, etc)
Note: Be careful with relative paths something they are a pain.
it says go back up two level (parent directory) "../../" from current location.
So if we are on https://example.com/my/path/here and it loaded a file ../../abc/file/images/picutre/down.gif then we would go up 2 directories because of the 2 ../'s to https://example.com/my. Then we would go down to /abc/file/images/picutre/down.gif. So the final destination would be https://example.com/my/abc/file/images/picutre/down.gif
down.gif is present in the same directory
/ starts form root directory
../ one directory back from current directory
../../ two directory back from current directory