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.
Related
I want to save an image in angular's Assert folder or in a folder created by me. I occupy the input file and a button, nothing more when I save the selected image, I want it to be uploaded or copied to said folders or folder. Can this be done without the backend?
I have been looking for information and watching videos but most of them either use firebase or some other service, I just want it locally. Please, your help would help me a lot.
If I understand your question correctly, you are asking if, at runtime, you can create a file in your Angular applications' 'assets' folder.
This is not possible, because the 'assets' folder is a compile-time artifact. It only exists in your source code tree. In the compiled application, the assets folder does not exist.
Furthermore, when the folder exists, it only does so on the computer on which you wrote the application. The user is running it in their web browser, which is generally running on their computer, not yours.
Now, if you are just asking if you can save a file on the user's computer, take a look at File Save functionality in Angular
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.
I'm running a local server with express. The server is able to display some local files from my computer. Amongst them there is a file called "lastResult.txt" which gets updated every time I run a bash script.
For some reason, when I run the server and try to display the file, it shows a version from a week ago. This file file has been updated locally more recently than a week ago. This persists even after restarting the server or even on different browsers.
I am using the serve-index module to display directories.
You didn't say how do you serve the static files - with express.static or with some custom handlers. The express.static doesn't cache the files but your custom handlers might. In any case, those files can be cached on the client depending on the value of ETag and Max-Age but even then they should not persist after accessing with another browser.
From what you're describing it seems that you are not updating the correct files, or in the correct directory. Of course it's impossible to be sure since you didn't include even a single line of your code so one can only speculate but it seems to be the case.
This question has already been answered.
I'm adding to it in case someone needs an example of a problem like this, (that is non-obvious).
Had a similar problem while using EJS and express.
I was importing a header.
The header loaded the CSS.
There was a CSS file named base.css in two different folders (same CSS file name two different folders projectroot/pages/base.css && projectroot/views/base.css )
The folder the header.ejs file was in was projectroot/views/ (this is the base.css I wanted)
From a path perspective to intentionally load the other css file should have required: ../pages/base.css
To be completely explicit I should have references the CSS file in the local directory like this: ./base.css but instead I referenced it like base.css
Surprisingly ... the CSS file that was being loaded was the one in the projectroot/pages/ directory not the projectroot/views/ directory
Changing the reference to ./base.css fixed the problem
currently in my test scripts for automated file upload to browser, the paths are already defined in the value column
command type
target //input[#type='file']
value /Users/.../.../.../filename.extension
in such cases, this script is unable to run on other computers because the path would be different.
my question will be is
is there a way to locate the file in a general folder (for example file is downloaded and in the "download" folder), by using selenium ide can we get the path of the file (/Users/.../downloads/filename.extension)
store the path of the file with its extension into a notepad which i will be using it for multiple test of file uploads later on.
right now if my colleague needs to run the script from his computer, he have to manually change the value to his path.
You could use a suite file that contains a "setup" file to only change the file name in 1 place and the variable is shared across tests in the suite. You could also select an agreed up on place to store the files: c:\test_info\image.jpg.
Or you can make the file available by URL & not local, Unfortunately javascript prevents that for security: How to get the current file path in javascript
Unfortunately I can't think of any other good way unless you all have the same path in a home directory and could do something like ~/test_dir/photo.jpg
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).