We Keep Coding

Dynamic routing nextjs react

Help me please.
i am working with next js, i need to make this structure in url sitename/catalog/category/group/product
category, group, product pages are created dynamically, after that I need to generate static pages with ready-filled html markup in the out folder via the 'next export' command. I want to get all category, group, product pages to make a completely static site. In the documentation, I did not find information about a large nesting. Please tell me how to do it. Here is my current structure and what next js generates for me
Is it possible to do this?
my file structure
pages
catalog
index.tsx
[category]
index.tsx
[group]
index.tsx

You need to create dynamic URL using [slug] for all dynamic variable in your URL component.
Check the documentation: https://nextjs.org/docs/routing/dynamic-routes
Once you use dynamic URL, you need to serve getStaticProps (for data as props) and getStaticPaths (for diff routes) method on page to serve the data.
Note: above method are only executed on build time, in case of next export also.

Nuxt JS dynamic param on nested page

I'm trying to create a dynamic param for one of my nuxt JS pages and am struggling to figure out the correct folder structure, the URL I need will be something like:
https://example.com/landing/123
Where 123 is my dynamic param that I need to grab using this.$route.
I've tried the following folder markups:
pages/_landing/index.vue
pages/landing/_index.vue
How can I achieve this?
I still need the page to load even if my param isn't supplied

use the [ ] syntax
pages/landing/[paramName].vue
further read
https://v3.nuxtjs.org/guide/directory-structure/pages#dynamic-routes

If 123 is the id, you need to save the file as _id.vue then you can get the value of id using this.$route.params.id
Edit: You directory structure will be pages/landing/_id.vue

Get root url with subdirectories in Angular

So I have this application with multiple libraries installed on them, each with their own api. I want to retrieve the url for every library that will look something like http://hostname.com/subdir1/subdir2/exampleRoute without the route ('exampleRoute') because subdir 2 is my root folder, and add /libraryname after it so it will look something like http://hostname.com/subdir1/subdir2/libraryname. The amount of subdirs are not fixed, could be more, so if I have 3 subdirs, my root url would be http://hostname.com/subdir1/subdir2/subdir3.
I used to do this with window.location.href in the root component of my routes, and manually cut the last segment off but this is not the best solution, as I have to be able to get these urls in components that do have a route.

Your can easily use
document.head.baseURI to get what you want.

Putting component assets inside its own directory

I'm using Angular 6.
I know how to access images in the following way:
http://localhost.com:4200/assets/image.png
by putting that image on the path:
/src/assets/image1.png
but right now I'm doing a component which is on the path:
/src/app/components/mycomp
then I want to use another image2.png which is gonna be used only by this component. Then I don't want to put this image on a global directory like on the first case. Instead, I want to put that image on this location:
/src/app/components/mycomp/assets/image2.png
The goal is to make this component easily portable.
Also, on the file: mycomp.component.css I'm gonna reference that file.
Is anyway to do this?
On this project I will have many of individual components, each of them with multiple different assets and I don't want to mix all these assets. I want each component has his own space/directory.
Is anyway to achieve this?

You could solve your task by encoding your images using base64 converter (for example https://www.base64-image.de/).
If your images can be converted to SVG - you can also embed them into your templates.
Hope this will help you.

Is it possible to reload the router in a running ember.js app in order to update the path strings of routes?

I'm implementing multi-language support in my app, and I guess this is the last thing that I would need in order to be able to change between languages without reloading the whole app/page. (I already have a solution with full page reload.)
For a simple example let's say this is how my router looks:
Router.map(function() {
this.route('search', { path: t('search') });
this.route('item', { path: `${t('item')}/:id`);
});
The t function would be getting the correct translation for the given strings in the currently active language.
The structure of the route hierarchy won't change, the only things that need to be updated are the path strings. Application state should be kept, of course.
I'm wondering whether this is possible to do.

I am not %100 sure about the correctness of what I wrote but Router.map is executed and resources with the definitions given within this method is transformed to a DSL instance and that is then passed to the actual router maintained by Ember.Router itself. In order to achieve what you want I believe what we need is dynamic modification to the router even if it is just the paths you need yo modify not the whole route structure.
If you look at the following github issue, Ember.js no more supports dynamically adding routes (hence no dynamic modification to the existing ones I believe). With all that said, I believe what you want is not possible without reloading the whole app (hence losing the application state).