This is the app builder package, it contains the main application code.
The application is built using the Remix framework. You can find the documentation here.
- Create you own
.envfile based on.env.example.
You can fill it with your own values but it should work locally with the default values.
-
launch the app in dev mode
2.1. VSCode users: we recommand to use the launch task: "Launch app-builder" to start the app in dev mode. The debugger should be automatically attached (work for both SSR and client parts).
2.2. CLI users: you can use the following command to start the app in dev mode:
# Start the builder app in dev mode bun -F app-builder dev
The app uses the flat routes convention to define routes. You can find the routes in src/routes/.
When adding a new route you need to run :
bun -F app-builder generate-routesThis script help you generate a type-safe getRoute function that you can use to navigate between routes in the app.
If the component is specific to a route, most of the time you need to create it directly in the same file.
If the component is part of the marble design system, you need to create it inside ui-design-system package. If not, you can create it inside the app-builder package. Two possibilities here :
-
The component is mostly "presentationnal" (not connected to external data source needing loaders/actions): create the new component inside
src/components/*. -
The component is considered a full-stack componente (connected to external data source needing loaders/actions): create the new component inside
src/routes/ressources+/*.
NB: in both cases, look at existing components to see how to structure your component and/or help you decide what feats your needs.
You may need to update the marble-api client. To do so, look at the marble-api package README.
Then, it depends on the use case :
Recommended: create adapters/use cases using the models/ repositoris/ services/ folders. Look at existing ones to see how to structure your code and/or help you decide what feats your needs.
For quick & dirty integration:: you can directly consume the endpoint in a loader/action using the apiClient returned by the authenticator like so:
const { apiClient } = await authenticator.isAuthenticated(request, {
failureRedirect: getRoute('/sign-in'),
});
const decisions = await apiClient.listDecisions();