req.route always returns undefined about tinyhttp HOT 19 CLOSED

You need to enable req route by setting enableReqRoute to true in settings. See below

import { App } from '@tinyhttp/app';

const app = new App({ settings:{ enableReqRoute: true }})

app.get('/user/:id?', function userIdHandler(req, res) {
  console.log(req.route)
  res.send('GET')
})

app.listen(3000)

from tinyhttp.

Thanks for raising this issue.

from tinyhttp.

@atif-saddique-deel I pushed a fix to https://github.com/aarontravass/tinyhttp/tree/aaron/route

Can you try it out once?

from tinyhttp.

maybe that should be added into the docs then.
Thanks for quickly replying, I am going to test it out.

true, there should be a notice that it can be enabled with enableReqRoute. Docs need a fix.

from tinyhttp.

A minor version will be released once the pr is merged but you can build my branch and create a new file at the root which references App from ./packages/app/src/app.ts. Like this

import { App } from "./packages/app/src/app.ts";

const app = new App({ settings: { enableReqRoute: true } });

app.get("/ping", (_, res) => {
  res.send("pong");
});

app.get("/user/:id/api", (req, res) => {
  res.json({
    params: req.params,
    route: req.route,
    path: req.path,
    url: req.url,
  });
});

app.get("/", (_, res) => {
  res.send("Its working");
});

const port = 5500;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

To run this, run the following command

pnpx tsx watch server.ts

To build, here's a guide https://github.com/aarontravass/tinyhttp/blob/aaron/route/CONTRIBUTING.md#local-setup

from tinyhttp.

Hey @atif-saddique-deel the implementation is correct and I'll explain why but first, change the subRoute.get to the following

subRoute.get("/users/:id/api", (req, res) => {
  res.json({
    params: req.params,
    route: req.route,
    path: req.path,
    url: req.ur,
  });
});

Notice that the route.path is now users which means it is assigned correctly. Your code was still showing the correct route but 2 of the paths were identical.

Now coming to the why, when mounting an app, we don't prepend each path with the mount point. Rather, we let the subapp handle the routing. Essentially, the path you see is the path in the subapp not the full path. The full path, with the subapp mount point prepended, is req.url which is essentially the URL itself. This can be seen in

hope this helps! let me know if you have any more questions.

from tinyhttp.

from tinyhttp.

maybe that should be added into the docs then.
Thanks for quickly replying, I am going to test it out.

from tinyhttp.

Yes, I'll raise a PR and get it updated.

from tinyhttp.

I have tested and it doesn't seem to work as expected, it always return the first route, not the current route.
I am going to create a codesandbox demo example and share it in a while here.

from tinyhttp.

Here is the example to reproduce issue : https://codesandbox.io/p/sandbox/flamboyant-mirzakhani-cvndqy
Steps:

1. Open this codesandbox link
2. Hit this url in internal browser on right side in codesandbox: https://cvndqy-5500.csb.app/user/23/api
3. You will see that it returns route path of first initialised route only.
4. In order to confirm this, you can change the order of routes and put the ping route after user/:id/api

from tinyhttp.

Ok so the route matching technique is kinda faulty. It needs to check by the fullPath rather than handler name

from tinyhttp.

@aarontravass you can already submit a PR and I'll check out locally and run tests

if CI passes, we're good

we can also add additional tests

from tinyhttp.

@aarontravass is there a new minor version or something which I can use to test or I have to run locally and build it in order to test?

from tinyhttp.

by the way, setup says to use node 16 but its soon going to meet its end of life, so maybe it should be 18 atleast.
https://nodejs.org/en/blog/announcements/nodejs16-eol

from tinyhttp.

Its working as expected.
Thanks.

http://localhost:5400/hello/2/api/45

app.get('/hello/:id/api/:user', (req, res) => {
  res.json({
    params: req.params,
    route: req.route,
    path: req.path,
    url: req.url
  })
})

from tinyhttp.

@talentlessguy @aarontravass this issue is automatically closed but there is no new version available on npm with fix.
Could you please push the newer version to npm so that we can start using it?

from tinyhttp.

Hey @atif-saddique-deel, the new version has been released as 2.2.0. Please check it out
https://github.com/tinyhttp/tinyhttp/releases/tag/%40tinyhttp%2Fapp%402.2.0
https://www.npmjs.com/package/@tinyhttp/app

Apologies for the inconvenience.

from tinyhttp.

It solved the problem in main route but the issue in sub routes is still there.
Can we please reopen the issue?
I have updated the demo sandbox with sub route.
so If you hit this url: https://cvndqy-3000.csb.app/sub-route/user/23/api
you will see that the top level route is missing from route.path

import { App } from "@tinyhttp/app";

const app = new App({ settings: { enableReqRoute: true } });

app.get("/ping", (_, res) => {
  res.send("pong");
});

app.get("/user/:id/api", (req, res) => {
  res.json({
    params: req.params,
    route: req.route,
    path: req.path,
    url: req.ur,
  });
});

app.get("/", (_, res) => {
  res.send("Its working");
});
// ------- sub route -------------
// sub route will probably be in different file, but I put here for demo

const subRoute = new App({ settings: { enableReqRoute: true } });
app.use("/sub-route", subRoute);

subRoute.get("/user/:id/api", (req, res) => {
  res.json({
    params: req.params,
    route: req.route,
    path: req.path,
    url: req.ur,
  });
});

// -------end sub route ------------

const port = "3000";

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

cc @aarontravass @talentlessguy

from tinyhttp.