RemixFast Starter App

Quick Walk through showing how to:

• Create an App
• Create a Model
• Add Relation
• View Code

Step 1 - Create App

• Create an App by clicking Create
• If you are doing this first time, click Create New App with your own database

On Create App dialog, enter following:

App Name: Asset Tracker Stater
Type: Starter App

App Name: Asset Tracker Stater
Type: Starter App

And click Create to create the app. Select the newly created app Asset Tracker Starter, this will take you to the Visual Editor for the app.

Step 2 - Create Model

Ensure you have Models tab selected.

On Models tab, click Add to create new model. This will open Add Model dialog. On the dialog enter following:

Model Name: Catalog

Model Name: Catalog

Tab out and add two Fields with following Field Names:

catalogName
catalogNumber

catalogName
catalogNumber

Check Is Required for catalogName field. Click Save to create new model.

Step 3 - Add Relation

On Models tab, click Add to create new model Inventory model. On the dialog enter following:

Model Name: Inventory

Model Name: Inventory

Tab out and add two Fields with following Field Names:

assetTag
status

assetTag
status

Check Is Required for assetTag field.

Click Add Relation, this will open Add Relation dialog.

Enter following:

Model: Select > Catalog

Model: Select > Catalog

Click Add to create new relation. Notice two new fields were added

catalogId
catalogName

catalogId
catalogName

catalogId was added as foreign key to Inventory table and catalogName is just related column from Catalog that will be included when reading Inventory table. (catalogName columns has Catalog as Table)

Click Save.

Step 4 - Code

Click on Export Code, to generate codebase for the app.

This will open Export Code dialog. Enter following

Version: 1.0.0

Version: 1.0.0

Click Export Code button. This will start code export. Once completed, select Code tab and view generated code

• \prisma\schema.prisma to view generated Prisma Schema
• \app\models\catalog.ts to view additional model details
• \app\models\catalog.server.ts to view Prisma CURD functionality
• \app\routes\app\catalog.tsx route to view loader for getting data list
• \app\routes\app\catalog\$catalogId.tsx route to view action methods for catalog model.

click on Download Code to continue development in local editor!