Node.js serving a HTML file on a remote network

Question

I'm a Node.js newb, so I'm not sure if it's possible to do what I'm trying to accomplish. Here is my configuration:

I have a Node.js server running on a Raspberry Pi on my home network. I have an HTML file on an external IP. I wish to render React components on this HTML file.

From what I've seen, people have used Node servers to display js on a local HTML file, so the path would normally look like this, assuming the directory is called 'dir':

const express = require('express');
const app = express();

// Static Routes
app.use('/dist', express.static(path.join(__dirname, 'dir')));

// App Route
app.get('/', (req, res, next) => res.sendFile(path.join(__dirname, 
'index.html')));

Which, to my knowledge, transfers the HTML file found at the previously specified path. But where is this transferred to? Any way I can specify the path name based on an external IP + user + password, and file path?

What do you mean by 'render Node.js components'? That simply doesn't make sense. — Rubydesic, Oct 10 '18 at 20:21
The thing is, if the "file" is not in the local file system, you can't really treat it as a file. If it is available remotely, there has to be a way to fetch that remote resource, and it explodes the scope of the question drastically. Assuming that the "file" is available over HTTP, you might want to make an HTTP request to it and pipe the response to that request back to the user. — rishat, Oct 10 '18 at 20:44
@RubyJunk Sorry, what I meant to say was, "render React components." — pmcg521, Oct 10 '18 at 22:06
@rm- I feel like I have greatly overthought this. It is available over HTTP. For example, I am able to run wget on my target index.html file. Is it enough to manually run wget on the index.html file every time it is updated? — pmcg521, Oct 10 '18 at 22:30
The thing is, HTML has nothing to do with React. React component _is not_ HTML and HTML is not sufficient to represent a React component. We need to rethink the whole problem. If it is HTML, then you can fetch it over HTTP (think [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)) and [dangerously set innerHTML](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml). Could you maybe add more detail to the question? It seems a bit all theoretical discussion to me, which makes it hard to give a confident answer. — rishat, Oct 11 '18 at 12:09
@rm- Thanks for your input. I don't know much about all this. I was following this tutorial: https://blog.cloudboost.io/how-to-run-a-nodejs-web-server-on-a-raspberry-pi-for-development-3ef9ac0fc02c which adds a "hello world" html tag through a React component (I think). I know this is a useless function but I thought it'd help me learn the basics of React. I wish to use React for creating UI components. But I just wanted to add it to my existing domain/index.html page, and not create a new html to be hosted on my Pi's IP address (which the tutorial accomplishes). — pmcg521, Oct 11 '18 at 17:08

score 1 · Answer 1 · answered Oct 10 '18 at 20:25

1

You can not achieve it directly for the files stored on remote machine. Express static path works with local file system only.

Possible way for this could be, fetch file from the remote machine every time you get a new request. But no one does this.

answered Oct 10 '18 at 20:25

Sanket

945
11
24

1

This is close, but the answer isn't complete. Could you please improve it, give an piece of code as an example? – rishat Oct 10 '18 at 20:38
I feel like you and @rm- are on the right track. I can make a HTTP request to get the index.html file. How would I go about writing a script that does this each request? And could you explain why I would need to fetch a new html file for each request? – pmcg521 Oct 10 '18 at 22:32
I'll add that there will not be many new requests. And can you explain why "no one does this"? It seems like a reasonable option for someone who has a html file hosted on a domain which they do not maintain or own – pmcg521 Oct 10 '18 at 22:54

score 1 · Accepted Answer · answered Oct 11 '18 at 08:45

Which, to my knowledge, transfers the HTML file found at the previously specified path. But where is this transferred to?

It transfers the file contents from disk to the client's network connection, when they request it (i.e. not when the server starts up).

Any way I can specify the path name based on an external IP + user + password, and file path?

Not with express.static. If you want to make your server serve an external page (proxying), you can do that: https://stackoverflow.com/a/10435819/7011366. Since you'll have access to the url & cookies, you can do whatever you like with the path/user/password.

app.post('/my_url', function(req, res) {
  var options = {
    host:   MY_DOMAIN,
    path:   '/' + req.query.username,
    method: 'GET',
  };
  var req = http.request(options, function(res) {
    // etc...
    // send response to client
  }).on('error', function(e) {
    // handle error...
  }).end();
});

This above example makes a request to the external page every on every request. If you don't want that, you can store it in memory and only update it periodically.

let myHtml = "";
let fn = () => {
  var options = {
    host:   MY_DOMAIN,
    path:   '/' + req.query.username,
    method: 'GET',
  };
  var req = http.request(options, function(res) {
    // etc...
    // save response to myHtml as string
  }).on('error', function(e) {
    // handle error...
  }).end();
};
setInterval(fn, 60000);
fn();
app.post('/my_url', function(req, res) {
  res.end(myHtml);
});

Thanks, this led me in the right direction! I was able to get the index and files I wanted via http. However, although all files used by my index.html (css, js, fonts, images) come back with a 200 (OK) status with GET, when I access my page on a browser, the text is there with no style, no photos, and no JS. How can I fix this? — pmcg521, Oct 12 '18 at 22:39

Node.js serving a HTML file on a remote network

2 Answers2