You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Internal and B2B tooling tend to have different trade-offs in customizability vs developer velocity compared to B2C applications. We target the former with this library.
Project scaffolding takes a lot of time. Time that is better spent building actual application content.
Templates contain a lot of boilerplate code. Code which gets added to the project once and never touched. Yet the code has to be maintained for the lifetime of the project. Integration of the different libraries need to be migrated as they progress through major versions.
How will we solve it?
We provide a project scaffolding CLI. This speeds up the setup time.
We will support the most commonly used frameworks.
Combine this with a set of high level components that abstract the highest level building blocks of the application. This is where it differs from templates. We provide high level components so that we can evolve and update these elements over time. It comes at the cost of customizability. Use a template if you need deep customization. High level components include:
Application layout
Authentication pages
We will make sure our abstractions allow for static generation, but allow you to use the underlying platform server runtimes if available.
The CLI
Initially we’ll start with a new mode on the create-toolpad-app CLI. Over time this can become the default.
// ./src/app/(dashboard)/layout.tsximport{DashboardLayout}from'@toolpad/core/layout';exportdefaultfunctionLayout({ children }){return<DashboardLayout>{children}</DashboardLayout>;}
We will add a render prop interface to override the most common UI elements:
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Which problem do we want to solve?
How will we solve it?
The CLI
Initially we’ll start with a new mode on the
create-toolpad-app
CLI. Over time this can become the default.The CLI asks questions:
After completion it generates the following layout in the file system (for Next.js app router):
Root layout:
The root layout wraps the whole app and provides app wide context.
Responsibilities:
The navigation interface:
Auth API
https://next-auth.js.org/configuration/initialization#route-handlers-app
We wrap
next-auth
and initialize itspages
property to our custom authentication pagesAuth pages
provides UI for MUI themed [auth pages](https://next-auth.js.org/configuration/pages). exempt from the dashboard layout by placing the latter in a
(dashboard)
route.This will supply
next-auth
pages for/auth/sign-in
/auth/sign-out
/auth/error
/auth/verify-request
/auth/new-user
We will provide a render prop interface to override the most common UI elements:
To provide defaults for each of these customization options we will also export a component per authentication page.
Dashboard layout
./src/app/layout.tsx
We will add a render prop interface to override the most common UI elements:
Theme
Beta Was this translation helpful? Give feedback.
All reactions