Recap

The last section covered the project setup. Before we begin, make sure your code generally syncs up with the project panel below.

PROJECT

config

develop.ts

plugins

app

pages

home.ts

views

home.tsx

plugin.ts

package.json

tsconfig.json

unocss.config.ts

develop.ts

home.ts

home.tsx

plugin.ts

package.json

tsconfig.json

unocss.config.ts

❐ Copy

If you are all caught up, then you can proceed to the next section.

2. Client Engine

The client engine is a dynamically generated library customized for your project. It is generated from an Idea schema file. The schema file is a parsable text file that contains a list of models and their columns. Model columns describe the structure of the data as it pertains to a database, form, filter, table, and view.

Parts of the Stackpress toolkit is built under the assumptions that there is a client engine in place. Tools like authentication, roles & permissions, and API rely on the client engine to generate its backend and interaction with the database.

2.1. Client Packages

Update the package.json file to include the following.

❐ Copy

The additonal packages and use are described below.

Package	Description	Usage
frui	Just React components	Imported from generated components and admin view templates.
@stackpress/idea-transformer	Transforms Idea files to generated code.	Imported from toolkit plugins to generate code from the schema.
fast-glob	Reads through files and folders.	Imported from the schema revision manager.
prettier	Prettifies code.	Imported from the terminal to prettify the final code (if compiling to typescript).
ts-morph	Typescript code builder.	desc

2.2. Configure Database

Update the config/develop.ts file to include the following and configuration.

❐ Copy

The following explains the configuration options.

Options	Notes
	Used to encrypt/decrypt data in the database.
	Where to store create and alter table migration files
	Cascading rules used when generating the database schema

The following explains the configuration options.

Options	Notes
	The name of the module that Stackpress will use to import the client
	The name of the client package that will be used when generating a during build
	Where to store serialized idea json files for historical purposes. Revisions are used in conjuction with push and migrate to determine the changes between each idea change.
	What tsconfig file to base the typescript compiler on

2.3. Create Idea File

Let's start by creating a new file called from your project root.

❐ Copy

The stackpress/stackpress.idea file includes schema definitions for user profiles (Profile), authentication (Auth), API applications (Application), and API sessions (Session). These model definitions describe how the database structure looks like, the interaction between server and database, and how it should be presented on the client side using React components. It even provides a working admin interface to manage the data of these models.

NOTE: You can learn more about modeling with Idea by visiting the Idea documentation.

2.4. Generate Idea

In Terminal, run .

If you open the node_modules folder in the project root, you should see a new folder called . The content of this folder is the generated client code that looks like the following list.

• Application - Model that manages the applications using the APIs of the project.
• Auth - Model that manages the authentication methods of the project.
• Profile - Model that manages user profiles (non-sensitive data).
• Session - Model that manages the users using the APIs of the project.

Each of these models includes typings, ORMs, events, components, admin routes and views you can access at anytime.

2.5. Check Point

In case you got lost, you can sync up your code with the project panel below.

PROJECT

config

develop.ts

plugins

app

pages

home.ts

views

home.tsx

plugin.ts

package.json

schema.idea

tsconfig.json

unocss.config.ts

develop.ts

home.ts

home.tsx

plugin.ts

package.json

schema.idea

tsconfig.json

unocss.config.ts

❐ Copy

The next section will cover setting up a database engine, pushing table schemas to the database, and initially populating the database.