Usage with http-server #712

rook2pawn · 2021-10-09T22:47:28Z

Expected behavior

from my package.json

"start": "http-server -o -c-1 -p 8080 --proxy http://localhost:8080/ ",

This indeed loads up the app properly at http://127.0.0.1:8080/
However

  function joinView(state, emit) {
    return html`<body>
      <div><h4>Join!</h4></div>
    </body>`;
  }
  function lobby(state, emit) {
    return html`<body>
      <div>
        <h4>Lobby</h4>
        <a href="/join">Join</a>
      </div>
    </body>`;
  }
  app.use(devtools());
  app.use((state) => {
    state.logger = false;
  });
  app.route("/join", joinView);
  app.route("/", lobby);
  app.mount("body");

If i click the link "Join" from within the app, the router properly pushStates to /join and renders the joinView
but if I reload so that the browser tries to request /join... i run into a loop because I'm trying to force http-server to do a catchall and serve my index.html which just has a simple div.

<html>
  <head>
    <script src="bundle.js"></script>
  </head>
  <body></body>
</html>

What precisely should I do to handle navigating directly to /join? Without the proxy statement /join doesn't exist because its not really something available outside the SPA.
@YerkoPalma

The text was updated successfully, but these errors were encountered:

rook2pawn · 2021-10-09T22:51:48Z

Ah, https://stackoverflow.com/questions/39744309/node-http-server-to-respond-with-index-html-to-any-request

has a good discussion on this topic and the question mark is really important here and will solve it.

http-server --port 8080 -P http://localhost:8080?

Do you think its worth having a section devoted to running a SPA server with choo?

I also want to point out that I use something like in my package.json

"start": "http-server ./web -o -c-1 -p 8080 --proxy http://localhost:8080?"

And that if you do something like this, make sure you point your src or other local lookups to / first otherwise the proxy would load src="bundle.js" to the proxied path.

   <script src="/bundle.js"></script>

Also, it is common to have a BE resource that you want proxied and I want to share how I did this for comment or to help others.

const http = require("http"),
  httpProxy = require("http-proxy");

const proxy = httpProxy.createProxyServer();
const server = http.createServer(function (req, res) {
  if (req.url.indexOf("/api/") > -1)  {
    proxy.web(req, res, { target: "http://127.0.0.1:5150" });
  } else {
    proxy.web(req, res, { target: "http://localhost:8080" });
  }
});

server.listen(5050);

Now your proxy sits behind a router where all requests go into your http/s server on 5050 then requests either go to http-server or they are marked as back-end with /api/. When requests go to http-server, the catch-all redirect works for your SPA. The only thing you have to manage is the cookie path in your set headers if you use cookies in your Backend node server and you rewrite the url after the if statement to check for /api/

Now you have both SPA with catchall redirect and BE proxying logic with http-proxy. The author of http-server don't really have a clear focus on serving SPA needs so I think this method might be fill in some needed gaps.

rook2pawn mentioned this issue Nov 7, 2021

The question mark in the proxy example in the doc -P http://localhost:8080? is causing issue http-party/http-server#645

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Usage with http-server #712

Usage with http-server #712

rook2pawn commented Oct 9, 2021

rook2pawn commented Oct 9, 2021 •

edited

Usage with http-server #712

Usage with http-server #712

Comments

rook2pawn commented Oct 9, 2021

Expected behavior

rook2pawn commented Oct 9, 2021 • edited

rook2pawn commented Oct 9, 2021 •

edited