RemixFast Quick Start

Quick Walk through showing how to:

• Create an App
  Create App and Model Video - 40 Sec
• Create a Model
• Add a Route
  Add Route Video - 1 min
• Test the App
  Preview App Video - 40 Sec
• View Code
  Export Code Video - 2 min

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

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

Step 2 - Create Model

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

Model Name: Catalog

Tab out and add two Fields with following Field Names:

catalogName
catalogNumber

catalogName
catalogNumber

Check Is Required for catalogName field.

Click Add Audit Fields to add fields to track who created record and when was it last updated.

Click Save to create new model.

While adding Route is what allows you to shape and customize generated code, if you only want basic CRUD code, just click Export Code and check the generated \app\models\catalog.server.ts

Step 3 - Add Route

Click on Routes tab and enter following

View Template: Table List + Detail Form
Model: Select > Catalog
Label: Catalog

View Template: Table List + Detail Form
Model: Select > Catalog
Label: Catalog

You should now have UI with table view to show items and form view for item details.

Step 4 - Test

Click on Preview to test the app. This will open Preview dialog with test app.

Select Catalog tab and add new item by clicking Add button

This will open Add Catalog dialog. Enter following to create new catalog item:

Name: Windows Laptop
Number: WL

Name: Windows Laptop
Number: WL

Click Add to save item to database.

Repeat to add one more catalog item with following details:

Name: Windows Desktop
Number: WD

Name: Windows Desktop
Number: WD

Try updating an item or even delete it.

Click Done to exit preview.

Step 5 - 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
• \app\views\catalog to check out views folder to view catalog list and form views.

click on Download Code to continue development in local editor!