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.
Related
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.
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!
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.
Budo does great job to browserify and run with livereload. But it is using index.html by default. That makes it less convenient with several html files. Is it possible to run it against a custom html file?
It mentions to accept all browserify options but I couldn't find the relevant one.
You can use the dir flag to point to a custom path where you house a different index.html file:
eg: budo index.js --dir myCustomBudoDir
this will serve your index.html out of your myCustomBudoDir directory
If your launch dir has an index.html, budo will use that. I've got a super simple project here.
Currently, Budo has the name index.html baked in, so using separate directories is the way to go, see the dir option in the doc
I am trying to learn Derby.js and I am having a lot of trouble. I know I can include packages such as jQuery through npm and add it to the node_modules folder, but this isn't quite what I want to do. I want to be able to include these files like I do in normal HTML.
So I want to do something like <Head:> <script src="js/jquery.js"></script>. This does not work though because it cannot find the js directory. I expect this has something to do with the way node.js runs an app and that the app itself will not hold the js directory.
Any help would be appreciated!
Derby offers the Script: tag:
<Scripts:>
<script type="text/javascript" src="/components/jquery/jquery.js"></script>
The components directory is because of the usage of bower. Put the components directory into the public directory. According to the express FAQ, the static routes search below the given directory (which is public in derby's example application). Configure bower to put the files under public/components (Choose bower install directory).
The public directory is configured at lib/server/index.js: .use(gzippo.staticGzip(publicPath, {maxAge: ONE_YEAR})), where publicPath is configured above to path.join(root, 'public').
Be aware that the "idea behind the inline script is that it runs immediately, before any of the external scripts are loaded. This should only be used in rare cases where the script should run before the page is displayed in the browser, such as sizing something to the window or autofuocusing an element in browsers that don't support the "autofocus" attribute." Nate Smith in the derby google group.
Inline scripts should be placed in inline.js, located in the same directory as the application's index.js.
If you require jQuery to do something on the loaded page, following code snipped worked at my side (Firefox, Chrome) in inline.js:
window.onload = function() {
alert($(this));
}