DEV Community: OscarDOM

How to use 'Nested Layouts' without 'Nested URLs' in Remix

OscarDOM — Sat, 12 Aug 2023 16:30:44 +0000

In today's ever-evolving web development sphere, we constantly look for ways to optimize and make our applications more maintainable. If you've been using Remix, you might have wondered, "How can I share layouts among different routes without adding to the URL path?" Well, I've got good news for you. I recently refactored my Remix app to do just that. In this blog post, I'll share a strategy to achieve nested layouts without the nested URLs, also known as "Pathless Routes".

The Problem:

In my previous setup, I rendered a <Header> component directly in the root.tsx. However, as my app evolved, this approach made it harder to manage, especially when dealing with login/logout logic. This complexity made updates challenging and increased the risk of bugs..

The Solution: Pathless Routes

Remix offers a fascinating solution to this: the _leading` underscore. With this, you can group routes under a common layout without adding any extra segments to the URL. It’s like giving these routes a shared home without changing their address!

⚠️ The solution I'm sharing is based on Remix v2 Route File Naming. Remix v1 covers this use-case but the way it's done is different. You can read more about it in Remix's docs page.

Here's a basic structure before refactoring:

app/ ├── routes/ │ ├── login.tsx │ ├── register.tsx │ ├── _index.tsx │ ├── concerts.$city.tsx │ └── concerts.tsx └── root.tsx

Breaking it down (before refactoring):

URL / would render /_index.tsx with the layout of root.tsx.
URL /login would directly match login.tsx and use the layout from root.tsx since there isn't a specific layout just for it.
Similarly, /register directly corresponds to register.tsx, using the root.tsx layout as well.

In the original structure, without the leading underscore (Pathless Routes) approach, each route directly reflects the filename, and all routes lean on the root.tsx for the layout unless specified otherwise.

And here's how the file tree looks like after applying pathless routes:

app/ ├── routes/ │ ├── _auth.login.tsx │ ├── _auth.register.tsx │ ├── _auth.tsx │ ├── _index.tsx │ ├── concerts.$city.tsx │ └── concerts.tsx └── root.tsx

Breaking it down (after refactoring with pathless routes):

URL / would render _index.tsx with the layout of root.tsx.
URL /login would match _auth.login.tsx and take its layout from _auth.tsx.
Similarly, /register maps to _auth.register.tsx, also using _auth.tsx as its layout.

By using a _leading underscore, you essentially hide the filename from the URL, giving you the ability to share a layout amongst different routes seamlessly.

Benefits:

Decoupling Logic: By moving shared components like <Header> out of root.tsx, I can keep the login/logout logic isolated, making the codebase cleaner and easier to maintain. Now my root.tsx loader() function is simpler and focused on high-level layout.
Improved Organization: Grouping related routes under a shared layout improves the organization of your project, making it more intuitive for developers.
Flexible URLs: With pathless routes, you get to dictate the URL structure without being tied down by your file or folder naming conventions.

Final Thoughts:

Adopting this pattern has significantly improved the structure and maintainability of my Remix app. The _leading underscore might seem like a small, inconsequential change, but its impact on the project's architecture is substantial.

If you've been struggling with managing shared layouts in Remix or just looking for ways to improve your app's structure, give this method a try. Remember, in the world of web development, it's often the small tweaks that lead to the most significant improvements.

Happy coding 🤓!

This post was initially published on my blog. Come by and check other publications I have at https://oscardom.dev or say hi to me on Twitter: @oscard0m_

Faster and colourful Command-Line tools 🌈⚡

OscarDOM — Sun, 25 Sep 2022 17:52:16 +0000

Today is Sunday, and I decided I wanted to look into some of the Command-Line tools written in Rust out there. Some of them have a lot of stars ⭐ on GitHub, so I have a good feeling these will be tools I will enjoy as a user and improve my productivity.

Rust is a programming language I want to get involved with. I came up with the idea of integrating some Command Line tools written in Rust in my day-to-day could be an excellent opportunity to get in touch with them as a user and, from there, maybe get involved in opening a new issue or drafting a Pull Request. Why not!

Here's the list of Command-Line tools I installed today on my personal computer:

bat: A cat(1) clone with wings. It offers Syntax highlighting and Git integration
bandwhich: A terminal bandwidth utilization tool. This CLI utility displays current network utilization by process, connection and remote IP/hostname.
bottom: A customizable cross-platform graphical process/system monitor for the terminal.
delta: A syntax-highlighting pager for git, diff, and grep output.
dust: A more intuitive version of du in Rust.
exa: A modern replacement for ls.
fd: A simple, fast and user-friendly alternative to 'find'.
hyperfine: A command-line benchmarking tool.
prox: A modern replacement for ps written in Rust.
ripgrep: ripgrep recursively searches directories for a RegEx pattern while respecting your .gitignore. Similar to popular search tools like The Silver Searcher, ack and grep.
sd: Intuitive find & replace CLI (sed alternative).
tealdeer: A very fast implementation of tldr in Rust. A more approachable complement to traditional man pages.
zoxide: A smarter cd command. Supports all major shells. Thanks for this one Stefan! @buckstefan

Some of these tools promise to give a better performance ⚡ than the common UNIX commands they are replacing. Others expand its functionality and improve the colouring 🌈 and presentation of the outputs, which is something I'm already enjoying.

To make them more traction, I added some aliases in my .bash_profile to ensure I use them in my daily work. Here's the snippet of bash just in case you want to apply the same aliases I did:

defineAlias () {
   type "$2" >/dev/null 2>&1 && alias "$1"="$2"
}

defineAlias cat bat
defineAlias ls exa
defineAlias top btm
defineAlias du dust
defineAlias find fd
defineAlias ps procs
defineAlias grep rg
defineAlias sed sd

The defineAlias() function does not define the alias if the command does not exist. It is handy if we decide to uninstall one of these tools and forget to remove the alias from our bash profile. I found this code snippet in this StackOverflow post.

This post was initially published on my blog. Come by and check other publications I have at https://oscardom.dev or say hi to me on Twitter: @oscard0m_