Solid Auto Routes (using vite)

This plugin is an abstraction of the official library solid-app-router, and all dependencies of the official plugin are required for this plugin to work.

This plugin was designed for the convenience of working with the definition of automatic routes, in the same way as frameworks like Next.js Nuxt.js, just define a provider around your application and call a hook

• Get Started
  • Set Up Vite Configuration
  • Set Up the Router

After setup the plugin, all other configuration use the oficial solid-app-router library, and the configuration guide its goin the same of the official repository

Get started

> npm i solid-auto-routes

Set Up Vite Config

In your vite.config.ts import a module AutoRoutes from solid-auto-routes put inside vite plugins array and passing the configuration as parameter

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import AutoRoutes from "solid-auto-routes";

const AutoRoutesConfig = {
  pagePath: "./src/pages",
  errorPath: "./src/errors",
  homeComponentName: "home"
};

export default defineConfig({
  plugins: [solidPlugin(), AutoRoutes(AutoRoutesConfig)],
  build: {
    target: "esnext",
    polyfillDynamicImport: false
  }
});

Configurations Parameters

pagePath*: is the path for your pages components
errorPath: is the path for your pages error components, like 404.{tsx, jsx}
homeComponentName: is the name of your home component, default is index.{tsx, jsx}

Set Up the Router

Install solid-app-router, then wrap your root component with the Router component:

import { render } from "solid-js/web";
import { Router } from "solid-app-router";
import App from "./App";

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("app")
);

This sets up a context so that we can display the routes anywhere in the app.

In your App component import the Route hook from app-auto-routes and put inside your main element

import { Route } from "solid-auto-routes";

const App = () => {
  return (
    <>
      <main>
        <Route />
      </main>
    </>
  );
};

export default App;