How can i use the multi route "app.static()" from express - express

I wanna use two routers express.static() but only "/" router apply express.static() function.
I don't know why. help me pls.. below this is my project folder.
app.use(express.static("src/assets"));
app.use("/", globalRouter);
app.use("/users", userRouter);

You need to flip your app.use statements
app.use("/users", userRouter); // Try to match 1st
app.use(express.static("src/assets")); // Try to match 2nd
app.use("/", globalRouter); // Try to match last
Express will now try to match from the /users route before matching from static, then if it cannot find a match in either /users or static it will then try the global router.

Related

Dynamic url segments with ExpressJS

When I needed to add a dynamic segment to the URL, the first thing that came to mind was to try the following:
app.get('/one/*/two/*/three', (req, res, next) => {
// req.params as any)[0] - first dynamic segment
// req.params as any)[1] - second dynamic segment
});
Turns out, the code above works perfectly. What confuses me, however, I cannot find it anywhere in the official documentation, and any answer here about dynamic segments with ExpressJS suggests different things, none of them suggest use of asterisks.
Am I doing something wrong here? Or what am I missing?
From the official documentation about Routing:
Route paths
Route paths, in combination with a request method, define the
endpoints at which requests can be made. Route paths can be strings,
string patterns, or regular expressions.
The characters ?, +, *, and () are subsets of their regular expression
counterparts. The hyphen (-) and the dot (.) are interpreted literally
by string-based paths.
And:
This route path will match abcd, abxcd, abRANDOMcd, ab123cd, and so
on.
app.get('/ab*cd', (req, res) => { res.send('ab*cd') })

Vue 3 router with long url-param including special chars not working as intended?

I have a router in Vue looking like this:
{
path: '/temporaryList/:tempUrl',
name: 'temporaryList',
component: () => import('../views/TemporaryListView.vue')
}
I want to send a value for the "tempUrl"-param that could for example look like this:
https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B
(this value is coming from encodeURIComponent() function, so it should be able to be used in the URL)
This does not seem to work for some reason, When I try to access this page I get:
"There was no web page at the URL: http://localhost:3000/temporaryList/https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B "
I have built this exact same solution with node and express where this didn't seem to be an issue. I don't know if the value of the param I send is to long for Vue? It also seems like Vue does not like when a params includes a "%" for example.
Is there any way you can make Vue routers allow this type of param-value?
Vite uses the decodeURIComponent function on the request URL. The value of the param i sent had "%" included in it which made Vite read every "%" as a "/". That made Vite searchfor a location that did not exist.
This npm-package solved my issue: https://github.com/ivesia/vite-plugin-rewrite-all

vue router.push in nuxt using route.name

I use nuxt and have following Problem. My old code looks like this:
this.$router.push({path: "about/me"})
Now I need to make the same call with some params:
this.$router.push({path: "about/me", params: {sendNotification: "1"}})
This obviously doesn't work since vue-router only allowes to use params with name and not path, so it has to look like:
this.$router.push({name: ..., params: {sendNotification: "1"}})
I could do it with query instead of params but I don't want my url to look ugly.
The problem with nuxt is, or at least this is my understanding of nuxt, that it generates the route names using folder structure and in my case also the locale. So the name of this route is actually: "personal-about-me__en".
So my question: Is there a way to get the route.name dynamically, so I could write something like:
this.$router.push({name: getRouteNameByPath("about/me"), params: {sendNotification: "true"}})
The name of the route path is matching the name prop that you can give to the .vue file. So, write is as name: 'AboutMe' key property and use it in the router with { name: 'about-me' }.
Also, vue devtools have a router tab with the name of all the available routes.
This obviously doesn't work since vue-router only allowes to use params with name and not path.
Why do you need to pass params alongside the path? You are supposed to add the params to the path itself, which is why vue-router doesn't allow a separate params object.
So for e.g. assuming your dynamic route is about/me/:sendNotification, you can either provide params with the named route:
this.$router.push({name: ..., params: {sendNotification: "1"}});
which directs you to about/me/1.
OR you can push the entire path including the params
this.$router.push({ path: 'about/me/1' });
Both will produce the exact same result.

Can vue-router use regex route matching and pass the match as a named parameter

Under the hood, I understand the vue-router uses path-to-regexp to handle route matching.
If I use the route format:
/app/:collection(/^cases$?)/:id
This matches the route /app/cases/abc123 and directs to the component just fine but doesn't store { collection: 'cases' } on the $route.params object which is what I also need. Is there another way to do this?
My bad, I misunderstood the syntax of path-to-regexp in the docs.
The route matching should have been:
/app/:collection(cases)/:id
.. then you get the route matching with the parameter passed.
I'm unclear if its appropriate to answer the question as correction or delete it. I'm sure someone will let me know ;)

Use route parameters with `app.use` on Express

I cannot use route parameters with app.use on Express 4.16.2.
I have a statement like this:
app.use('/course-sessions/:courseSessionId/chapter-sessions', chapterSessionsRouter)
And, in chapter sessions router:
// Index.
router.get('/', ...resource.indexMethods)
When I got '/course-sessions/0/chapter-sessions/', I have 404.
Then I am trying a statement like this:
app.get('/course-sessions/:courseSessionId/chapter-sessions', ...chapterSessionResource.indexMethods)
Now I have the result I want. So route parameters don't work with app.use.
While I am researching, I got this GitHub issue and this pull request which closes the issue. But it seems that the issue is still around here. Or do I make something wrong?
You have to setup your router in a different way, try using mergeParams to access parameters in parent routes.
let router = express.Router({ mergeParams: true });
See docs: http://expressjs.com/en/api.html
I’d do only app.use('/course-sessions/', chapterSessionsRouter) and handle the id inside the router.