I am trying to use axios for data loading. As I am new, i got confused where should I install axios js.I tried to install on client side. Is that alright?
Javascript files need to be hosted by a local (to the file invocation, not store) runtime engine. In a browser, for example, that might be the js v8 engine. Remotely, on a server, that server would have to have a local js runtime, presumably Node.js. The point is, if you want the js code to run in a browser, tag it in the html page, the browser will fetch the file from the web server, load it locally, and run the code. Otherwise, you an invoke it on the remote server, if the remote server has a runtime host such as Node, in the same way you invoke anything on a server; with a URI call (an example might theoretically be "https://......com/js-files/axios.js", and depending on if the server is configured to exec the resource, or fetch it, that's what it will do. Axios is isomorphic, so it can either run on the server in Node (if the server is correctly configured), or an HTML document can fetch it via a tag, and run the code locally, in the browser window/DOM. Is that clear?
You can do either or both! They are separate runtimes/environments.
According to the docs, Axios is a Promise based HTTP client for the browser and node.js. So it really depends on where you want to initiate the request.
If you want to do it on the browser consider adding the package in the HTML either via a script tag or a bundled js file:
See installation steps:
https://www.npmjs.com/package/axios#browser-support
Related
I'd like to find an easy way of reading and writing files (stored locally) from my program running on a localhost server. If I use const fs = require(fs) it can't find the Node module from the server. This makes sense. Is there any way of accessing that file from my javascript easily, with similar functionality to the fs module?
It appears that you aren't quite understanding how the client/server architecture works for an http server and the browser.
There's an http server that runs in nodejs. That has access to the local file system using the fs module. This is server-side code that runs in the nodejs execution environment.
There's an http client (the browser). It makes an http request to your server, the server sends back an http response and the browser gets that response and processes it. If the request is for an html page, then the browser gets that HTML, parses it, displays it and then runs any scripts embedded in the HTML page. The scripts running in the HTML page are running in the client/browser (not on the server).
Javascript running in the browser does not have access to nodejs modules like the fs module. It only has access to the libraries that the browser makes available. Absent special browser add-ons (with elevated privileges and associated security risks), scripts running in the browser in HTML pages do NOT have access to the local file system. This is for security reasons as you don't want random web pages that just happen to click on to have access to anything on your local hard drive.
So, you generally do not access local files from your browser Javascript. Instead, you either store data in LocalStorage and fetch the data from that or you store the data on the server (on behalf of the specific user) and that data is either included in the web page (so the Javascript running in the web page can use it) or the data can be requested from the server by the browser Javascript (using Ajax calls).
I'm making a new website with HTML, CSS, js for frontend and Java for backend (I don't know Java, my friend will do the java part) and I need to use frontend technologies (languages/frameworks) to use localhost
I am unable to find frontend technologies for this purpose. I have already tried python -m SimpleHTTPServer and node.js but as these are backend I can't use them. Also, I can't change my backend language
The important thing here is that you need to understand the terms backend and frontend.
A website is by definition something that can be loaded from a server with HTTP and it made of HTML and maybe CSS and/or Javscript.
Now by definition every code that runs on that server is the backend. All code that runs in the Browser of the user is considered the frontend. If the website only contains HTML and CSS that is generated by the server it does not make much sense to do this seperation. This means we only talk about frontend and backend if we have both.
This also means that the frontend code, that runs in the browser, must be delivered by the backend. A frontend without a backend can not exist.
Lets look on a little example. If a user enters example.com in the browser the browser will make a HTTP GET request to example.com. The server (and so the backend) will respond with a HTML file. This file now could embed a javascript file with <script src="/code.js">. Now the browser does another HTTP GET to example.com/code.js and the server (and so the backend) returns that file. In that file may be some frontend code that is executed in the browser.
Now maybe this file wants to load some data from the backend. So it does a fetch('/api/data). The browser does anotherHTTP GETtoexample.com/api/data` and the backend has to respond. Now while the backend was relativly dumb up to this point and only delivered files it now could actually execute some logic. Maybe load the data from a database or such. It then sends the data to the frontend which then can use that data to do something.
This means in production your backend has to deliver the frontend code. In this example the initial HTML file and the code.js file.
So what you want is by definition impossible. A frontend runs in the browser and so can not deliver code on localhost. If it could it would become a backend.
Now while its common that the real backend delivers the frontend code on production its not common for development. Its very common to have a seperate minimalistic server that is only used for development. python -m SimpleHTTPServer is such a tool and so would do the job.
Sometimes this is also done in production. Then your backend is for example on example2.com and your frontend is delivered by example.com. But this essential means that there runs a second backend just to deliver the frontend. Usually for production this is a full fledged web server like nginx, apache or IIS (you'll need CORS, see below). In contrast to them tools like python -m SimpleHTTPServer should not be used for production.
Now this means basically you can just use any kind of backend to deliver your frontend for development. Later you will give your code to your backend developer and he will then deploy it with his backend. However there is one open question:
How will your frontend and backend communicate?
In production your frontend can just fetch something and it will work if your backend delivers your frontend. But for development (and so testing) you probably already want to use the backend without actually starting it on your computer. For this basically there are two ways.
First your development backend could proxy unknown requests to the backend. This means if your real backend runs on example.com and you start a development server on localhost that server will proxy all requests that are not an existing file to example.com. So if you request localhost/code.js and the file code.js does exist your server will respond with that file. If you request localhost/data and you have no file named data your server should do a request to example.com/data and return that response. This is very common. Depending on the tools, libraries and framework you use for frontend development they have a integrated development server with that capability. For example if you develop with ember.js you can do ember server --proxy=http://example.com. And it will run a server on localhost:4200 with exactly that behavior. Other tools like create-react-app allow the same.
Second you can use CORS. This must be implemented by the backend and allows a frontend from another server to access the backend. This is also needed if you run your frontend and your backend from two different servers as I described before.
If the backend implemented CORS correctly you can just do fetch('example.com/data) to get your data, and this Javascript must not be delivered by example.com and it will just work. However CORS complicates security.
Maybe i'm misunderstanding how Node.js works but, I would like to use it just as a server backend for a web app, without it running as a service/listening a port.
I'm willing to hear ideas to better solve the issue, this app will only be available on our intranet.
Example of what i'm thinking :
backend server.js :
function connectDb(usr, pwrd){
//Some npm package code to connect to a db
return console.log("Sucessfully connected")
}
frontend javascript.js :
require("server.js")
$(".connect.button").on("click", function(e){
connectDb($(".connect.user").text(), $(".connect.pwrd").text())
})
There are two different aspects with your question and code example on which you could work to get a better understanding of the ecosystem.
Client / Server
When a client wants to get some resource from a server, it connects to a specific port on that server, on which the back-end application is "listening". That means, to be able to serve resources coming from a database, you must have a Node process listening to a port, fetching the requested resources from the database, and returning them. The perfect format for that kind of data exchange is JSON.
To get a better understanding of this process, you may want to try and write a simple Node app sending a piece of JSON over the network when it receives a request, and try to load it with an XHR in client code (for example with JQuery's AJAX method). Then, try and serve a dynamic piece of JSON coming from a database, with a query based on the request's content.
Module loading
require("server.js") only works in Node, and can't be used in JavaScript that is running in a client's browser (Well, at least for now. Maybe some kind of module loading could be normalised for browsers, but that's another debate.).
To use a script in a client browser, you have to include it in the loaded page with a <script> tag.
In node, you can load a script file with require. However, said script must declare what functions or variables are exposed to the scripts that require it. To achieve it, you must export these variables or function setting module.exports.
See this article to get some basic understanding, and this part of Node docs to master all the details of module loading. This is quite important, as this will help you structure your app and avoid strange bugs.
For one thing, node itself isn't a web server: it's a JS interpreter, which (among other things) can be used to write a web server. But node itself isn't a web server any more than Java is.
But if you want things to be able to connect to your node program, in order to do things like access a database, or serve a webpage, then, yeah, your program needs to be listening on some port on the machine it's running on.
Simply having your node program listening to a specific port on your machine doesn't mean that anyone else can access it; but that's really a networking question not a programming question.
I'm pretty new to web development, so bear with me if these questions seem pretty fundamental.
My use-case is as follows: I am hosting a server using ngrok which allows me to allow clients to securely tunnel to a server I host locally, using a public http(s) URL that ngrok generates.
Currently the server I am running locally is the simplest possible python web server (I literally just invoke 'python -m SimpleHTTPServer 8080').
Let's say I have a file "simplescript" located in the local directory where I instantiate the Python server. I would like to put in php code in "simplescript" so that when somebody fetches the file by using the browser to access "https://ngrokURL.ngrok.io/simplescript", then my server will execute the php code in the script directly and return the return value (if one is generated) to the client requesting my file.
Right now, when I try to do this, the client accessing my file only receives the actual text content of the script, and so it seems that the script is not being executed at all.
Question:
Is my use-case something that can be achieved using the Python simple HTTPserver, or do I need other tools?
How can I make my scripts executable for my server (if that is something I have to do)?
Thanks for the help!
I was wondering if I can call nodejs as script src="nodeapp.js" and render for example an image or a piece of another javascript retrieved by node app?
No. You cannot do that directly.
A script tag loads a script to be run in the browser in the browser environment.
Node apps run on the server in the server-side node environment.
You can create a server-side app (powered by node if you want) that will respond to a client-side request and produce the image you want to show. But, the server-side code will run on the server-side, not in the browser. Thus you make a request of the server and it does the work server-side and then delivers the result to the client. It does not download the server-side code to the client and run it in the browser.