Filesystem routing with webpack
📂

Filesystem routing with webpack

Tags
Technology
Description
Webpack plugin for next.js style routes
Published
Published March 18, 2022
 
Next.js has popularized the idea of file-system routing in the front-end space, though not a particularly new idea, it’s well adopted by the community and other meta frameworks (e.g. Remix.js). Next.js achieved this with its own router (i.e. next/router) which is inseparable from the framework itself. However, for apps built with React Router and Webpack, how can we have something similar?
 
A quick answer is to reverse engineer it. The end state is something everyone is already familiar with
import { Routes, Route } from "react-router-dom"; import Home from '../pages/index' import About from '../pages/about' import NoMatch from '../pages/404' <Routes> <Route path="/"> <Route index element={<Home />} /> <Route path="about" element={<About />} /> <Route path="*" element={<NoMatch />} /> </Route> </Routes>
We may just create it, and it’s in fact what we’ve done before, but it defeats the whole purpose of having the file-system based routes in the first place. Hence, it should be auto generated from a bunch of route files that may looks like this
pages/ index.tsx about.tsx 404.tsx
Then the question becomes how can we auto generate the above routes tree from individual route file that follows specific naming conventions?  
vite-plugin-pages
hannoeruUpdated Jun 2, 2024
does exactly this.
 
It’s great that we don’t have to reinvent the wheel. However, isn’t it a plugin designed for Vite, is it possible to port a Vite plugin to Webpack? 👋  to
unplugin
unjsUpdated Jun 3, 2024
.
 
In short, we can get a Webpack plugin that supports file-system based routing with React Router by remixing two existing solutions like 🔝.
 
Feel free to poke around with the idea, or roll out your own solutions 🥂