With Express, I am trying to acess relative path (css/..., assets/...) inside HTML file.
I can't use express.static() because the HTML file is located in a dynamically generated folder, with a hash as its name.
There are many folders with a different set of files inside, these folders are in "public/assets/template/file/tmp".
The server is trying to access these files based on what was defined in express.static, which was "path.join(__dirname,'public')", in order to handle other files in the project.
The public folder (which is in the project root) looks like this:
The index.html head:
I couldn't think of anything to do in this current situation, perhaps set a different express.static when accessing files in the dynamically generated folder, but it doesn't look like the best approach (not even sure if it's possible).
Related
I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.
I have images stored as png files on the local server and only the filename gets saved to the DB. When rendering images to the client I combine the relative path of the image with the filename from the db as pass it in like so:
<img src='../../public/avatar-pictures/3fVZNShyQRAtBbipvzVrDwDD.png'/>
But it doesn't work. As a last attempt of desperation, I even moved the png file itself to the root directory of the client script and it still produced nothing.
what is causing this issue?
By default, node.js and Express do not serve any files. So, you can't give the browser a path to some location on your server's hard drive and expect the web server to send the files. It does not do that (unlike what people familiar with Apache might expect).
You will need a route on your server that points to the public directory. There are several ways to do it, but here's one:
<img src='/public/avatar-pictures/3fVZNShyQRAtBbipvzVrDwDD.png'/>
Then, on your server, you would use the express.static() middleware to create a route that looks for URLs starting with /public and will serve files from the public directory on your hard drive that match the path of the URL:
app.use("/public", express.static("../../public"));
The path you pass to express.static() needs to point to the public directory on your local hard drive. You don't disclose your local file structure so I can't tell you exactly what that should be. The example above will be relative to the current working directory when your program was started. It is perhaps more common to build the path yourself from the module directory. So, if the public directory is two levels above your module directory, you might do this:
app.use("/public", express.static(path.join(__dirname, "../../public")));
And, then it's wired more specifically to be relative to your module's directory and not dependent upon the current working directory which can be changed by code or by how your program is launched.
You can, of course, also use a fully qualified path:
app.use("/public", express.static(path.join("/someVol/users/me/myProject/public")));
Keep in mind that the express.static() middleware opens up the entire directory tree that you point it at for public access so you have to make absolutely sure that only public things are in there. By default, express.static() does not permit .. in the paths so a request can't get out of the directory you specify.
I've started using a task runner to export all of my folders into a distribution folder using Gulp. The problem arises when I export images into the distribution folder, the path name is different from the one I'm using in my src file. So, as an example, when I target an image in HTML I type:
/assets/images/example.jpg
However, when the HTML file is distributed, it is supposed to target:
/images/example.jpg
It's still pointing to the assets folder, and creates a dead link. Should I be using a module like gulp-replace to automatically change these path names? Or should I just type in the assumed path name? Or, is there another method that I'm missing?
Sorry if I've phrased this badly, I'm working towards a new developer environment - let me know if I can provide you with any other details.
Should I be using a module like gulp-replace to automatically change
these path names?
Yes, gulp-replace will do the trick.
As an alternative you can place your index.html file into assets folder, so you don't need to change any paths when distributing the project.
For controller_A's views, I currently use $this->element('repeatedly_used_html'); in the element folder for some .ctp files that are used more than once. However, some of the files in the element folder are entirely used for one controller, and the file are unorganized in the element folder.
So, for exmaple, controller_A has views that use files from the element folder. I would like these .ctp files for controller A's views to be contained in the app/views/A.. is there way to invoke a call similar to $this->element('repeatedly_used_html'); that will allow me to keep files the folder app/views/controller_A? I would like to avoid writing a very long .ctp file.
It looks like you're using CakePHP 1.3 based on your directory structure. If this is the case, you can do this by simply using the render() method instead of element(). This will render a template using the current view path (in this case, the controller you're in).
echo $this->render('repeatedly_used_html', false);
The second parameter is the layout, which we set to false to make sure the whole layout isn't rendered along with the view.
echo $this->element( 'subfoldername/viewfile' );
Then create the subfoldername directory in your elements folder.
I have seen a few examples with link to folder but i realy don't understant what it is or how to manipulate it or get it to set the specific html page within the folder.
My website is a basic one with only CSS and HTML
it is formatted as
[file]home.html // C:/Users/user/Desktop/mywebsite/home.html
[folder]Order // C:/Users/user/Desktop/mywebsite/order/
↳[file]ordersheet.html // C:/Users/user/Desktop/mywebsite/order/ordersheet.html
I want to try set the folder path C:/Users/user/Desktop/mywebsite/order/ as the file ordersheet.html C:/Users/user/Desktop/mywebsite/order/ordersheet.html how can this be done?
To set /order to ordersheet.html change the name of ordersheet.html to index.html
The index.html is the default file that the server will serve to the visitor when he visits that specific directory.
link text
link text = what you want it to say to the user
/Users/user/Desktop/mywebsite/order/ = directory path
Keep in mind that this will only work locally. If you have it up on a server, visitors don't have access to your full C:/ drive so you have to use relative links, i.e. just /order/
If I remebember correctly, you use something like this:
<a href="file:///C:/Users/user/Desktop/mywebsite/order/ordersheet.html>link to file on harddisk</a>
If you would want to have that anchor to a folder, you would just use this:
<a href="file:///C:/Users/user/Desktop/mywebsite/order/>link to a folder on harddisk</a>
Your browser is operating directly on your system's local filesystem, so you can't.
What you have been looking at is a function of a web server (I'll use Apache HTTPD for examples here).
A typical configuration of a web server would map the local part of the URI onto a directory on the local file system and just serve up the files there if they matched the local part of the URI.
If the local part resolves to a directory (rather than a file) then it would look for a file in that directory with a name that matched a list (typically including index.html) and serve up that file.
If none of the files on the list existed, then it would generate an HTML document containing links to all the files in the directory.
Since there is no web server involved when the browser is reading the local file system directly, there is no way to map the directory onto an index file, so you would need to explicitly include the filename in the URI (or switch to using a web server).