Node.js file not found, issue with my path format? - javascript

I'm working on a node.js application to interact with the Twilio API. I have a problem getting my files to associate in the way I expected. My file directory structure looks like this
myapproot
-public
---form.js
-routes
---index.js
-views
---index.html
-app.js
-config.js
-server.js
In index.html, I conclude the page with the following script declaration:
<script type="text/javascript" src="../public/form.js"></script>
But when I load up the page, I get the following error:
GET: http://localhost:1337/public/form.js 404 (not found)
If I follow the path-link provided by VS code, it shows that js file, but it's not getting loaded into my view. Is there a mistake with my path declaration?

Essentially, what that command is doing is this:
<script type = 'Text/JavaScript' src = 'http://localhost:1337/public/form.js'>
So, what I'd suggest that you try is to set up the server-side code to handle requests to that directory on your server.

Related

GET http://localhost:3000/insert.js net::ERR_ABORTED 404 (Not Found)

I'm a beginner at web dev, I'm currently working on a project, but the javascript file insert.js won't load. The html document, upload.html is inside the public folder, and the javascript is inside the main folder.
I used the following path to link the javascript file,
<script src= "../insert.js"></script>
But it didn't seem to work, so I then tried moving upload.html to the main folder, which is HR and I used the following code,
<script src = "/insert.js"></script>
And this didn't work either, so I then tried moving insert.js to the public folder, and used the same path as I have mentioned above, but, then I couldn't export variables to app.js which is located in the main HR directory.
The image I have attached shows location of the files
I don't get what could possibly cause this, I think I should mention this as well, but I got an error while running my javascript file in node. So I inserted the following code in node_modules/whatwg-url/dist/encoding.js:
const {TextDecoder, TextEncoder} = require("util");
I don't know if this has anything to do with my issue, but I thought I would just mention it.
localhost can only access your public folder, so you have to move insert.js in the public folder and do:
<script src = "index.js"></script>
Also if you have node modules in that javascript file it wont run because it can't run the modules and you would have to use a bundler for that js file like webpack, rollup or snowpack.

Javascript modules don't work on github pages

I build a project with a local server (using live server VS extension), who works fine.
In this project, I'm using javascript modules, so in index.html, I have :
<script src="js/index.js" type="module"></script>
And in index.js :
import {} from "/js/home.js";
import {} from "/js/filter.js";
import {} from "/js/scroll.js";
The issue come when I try to display the website using github pages. JS files seems not found and browser console return :
home.js:1 Failed to load resource: the server responded with a status of 404 ()
filter.js:1 Failed to load resource: the server responded with a status of 404 ()
I tried to change paths with no success, and I have no idea why all works good locally but not with github pages
Maybe dot in path helps you
import {} from "./js/home.js";
As a relatively new coder, I had the same problem with my JavaScript modules.
My page worked in my local live server and wouldn't deploy on GitHub.
It may be that the path you used is not pointing to the proper location where your JS script is. Perhaps you need to use the relative path with the dot in front of the forward slash like ./ instead of /
This way, it points to your local repository folder.
I think if you just set it as the forward slash /, it points to your root directory of your GitHub pages instead of your local repository.
In my case, my web page loaded correctly after I changed my script source in my index.html from:
<script type="module" src="/js/main.js"></script>
To:
<script type="module" src="./js/main.js"></script>

JavaScript - Error 404 resource not found

I had a java script in my JSP, which worked fine. Now I want to move it to it's own file (abc.js). I created js-Folder and placed it there.
I tried to include it with <script language="JavaScript" type="text/javascript" src="./js/abc.js"></script> which links to http://localhost:8080/ProjectName/js/abc.js (from link in HTML-Code of the page). I think this should be correct, isn't it?
Nevertheless I get errors in the browser console (Failed to load resource: the server responded with a status of 404 () abc.js)
Do I have to register the .js somewhere to be recognized?
Edit: My project structure is like this:
ProjectName
|---WEB-INF
|---page.jsp (that wants to include abc.js)
|---js
|---abc.js
The WEB-INF directory is not publicly accessible. Your HTML file accesses the JS file over an public URL. Details see here: Include javascript file from inside WEB-INF
So the solution for your problem is to place the JS file on the same level as the WEB-INF directory, so that it is served publicly and adjust the src link accordingly:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/abc.js"></script>
(How include an external JS file in a JSP page)

Node.js error including js file - file cannot be found

I'm running a node.js server. In the node I require and run the module by using
var h = require('h.js');
h.hello();
This prints Hello World to the console. However, I want to be able to run the code from h.js from a page(entrypage.html) in my browser as well. I try to import it by
<script type="text/javascript" src="/node_modules/h.js"></script>
However, this gives a 404 error when run on localhost.
GET http://localhost:8080/node_modules/h.js
How do I get access to this javascript file on the HTML page?
My file structure has a root with html/, js/, node_modules/ and server.js. The HTML page is inside html/, the js file in node_modules/
EDIT: I'm using the MEAN stack for this - MongoDB, Express.js, Angular.js and Node.js.
It should be possible to serve the file using express.static (Example: app.use('/node_modules/', express.static(__dirname + '/node_modules/'));), but I highly advise against serving node_modules and backend-specific files in the frontend!
first define path for your static resource which is your CSS,JS,Images etc.
app.use(express.static(path.join(__dirname, 'node_modules')));
then in html
<script type="text/javascript" src="h.js"></script>
NOTE :
Try to avoid to use node_modules folder for source path of your static resources
To be honest I'm not exactly sure what you're trying to achieve, I take it that you want to run the code in the browser just like running code in the node.js environment using require to include packages like h.js from npm.
If that's what you want to do I would recommend using a tool like browserify or webpack which collects your code and puts it into a file which can then be used in a web browser.

Rails - How to get the file path inside JavaScript in Rails app?

I am working with a Rails app in which I am trying to specify a json file path inside my javascript. But, it seems like I am not being able to get the file as I should get. I tried both : absolute and relative path to that file. But, nothing worked for me. I know about Rails.root which I used in my rake task to specify a file path before. But, my need this time is to specify a file path inside JavaScript in a Rails app. I am trying to locate the flare.json file. I put that in my app/assets/data/flare.json and tried this :
<script type="text/javascript">
d3.json("/app/assets/data/flare.json", function(error, root) {
.....
}
</script>
But, I get the error in JavaScript console :
GET `http://localhost:3000/app/assets/data/flare.json 404 (Not Found)`
Anyone could please help me which is the correct way of specifying a file path in javaScript in Rails app ?
So let me get this right, you want to load a json file with d3? If this is the case, consider this: The in-browser javascript environment doesn't have access to file resources on the server side. You can load them by specifically exposing files via the server and then do AJAX requests to retrieve them with javascript. So for example:
Move the file to the public directory within your app and then change the javascript to
d3.json("/flare.json", function(error, root) {
.....
}
Put this in config/application.rb
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/something"

Categories