Although it can get confusing with a bunch of route.tsx files, especially if you're using a lot of tabs in your editor and you can't see the folder. You can quickly open files using Cmd+P and to partial match, so you can search for "dash index" and quickly open the "dashboard/_index/route.tsx" file. The extended route name was also added so you can type "main" or something like "about" to find the file.
It may be using Vite now. That's the problem with evolving frameworks. The tutorials quickly become outdated. If it is Vite config, it takes remix as a plugin. Put your config inside that remix plugin like so `plugins: [remix(remix config options object goes in here), tsconfigPaths()]`
If you're using Vite, simply move the `remix-flat-routes` route config into the `remix` Vite plugin. export default defineConfig({ plugins: [ remix({ ignoredRouteFiles: ['**/*'], routes: async defineRoutes => { return flatRoutes('routes', defineRoutes) }, }), ], }) One thing that I noticed in the video, was that the main `ignoredRouteFiles` option should not include the leading `.` This only ignores files that start with a leading `.` You want to ignore **EVERY** file in the routes folder with the default routing convention, then let `remix-flat-routes` define the routes, otherwise you'll end up with a mixture of route conventions that could cause problems. See the example above.
Thanks, great video
Awesome video. Sorry I didn't see it until now.
Great explanation Alex, thank you
Glad it was helpful!
Q: does it not get confusing when you call each folder route file route.tsx ?
I don't think so. This is how you (and Remix) know which of the files in the folder is you route's entry point.
@@alexrusin - Thank you! I'm just a few weeks into this journey so appreciate the response!
Although it can get confusing with a bunch of route.tsx files, especially if you're using a lot of tabs in your editor and you can't see the folder. You can quickly open files using Cmd+P and to partial match, so you can search for "dash index" and quickly open the "dashboard/_index/route.tsx" file.
The extended route name was also added so you can type "main" or something like "about" to find the file.
I cannot follow this tutorial as the config file does not match the latest config in 2.8.1
It may be using Vite now. That's the problem with evolving frameworks. The tutorials quickly become outdated. If it is Vite config, it takes remix as a plugin. Put your config inside that remix plugin like so `plugins: [remix(remix config options object goes in here), tsconfigPaths()]`
If you're using Vite, simply move the `remix-flat-routes` route config into the `remix` Vite plugin.
export default defineConfig({
plugins: [
remix({
ignoredRouteFiles: ['**/*'],
routes: async defineRoutes => {
return flatRoutes('routes', defineRoutes)
},
}),
],
})
One thing that I noticed in the video, was that the main `ignoredRouteFiles` option should not include the leading `.`
This only ignores files that start with a leading `.`
You want to ignore **EVERY** file in the routes folder with the default routing convention, then let `remix-flat-routes` define the routes, otherwise you'll end up with a mixture of route conventions that could cause problems. See the example above.
do you've the github repo?
I actually do: github.com/alexrusin/remix-practice/tree/route-folders
@@alexrusin thanks