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
- 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
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:
Check Is Required for catalogName field.
Add Audit Fields to add fields to track who created record and when was it last updated.
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 Codeand check the generated
Step 3 - Add Route
Routes tab and enter following
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
Preview to test the app. This will open Preview dialog with test app.
Catalog tab and add new item by clicking
This will open Add Catalog dialog. Enter following to create new catalog item:
Name: Windows Laptop Number: WL
Add to save item to database.
Repeat to add one more catalog item with following details:
Name: Windows Desktop Number: WD
Try updating an item or even delete it.
Done to exit preview.
Step 5 - Code
Export Code, to generate codebase for the app.
This will open Export Code dialog. Enter following
Export Code button.
This will start code export.
Once completed, select
Code tab and view generated code
\prisma\schema.prismato view generated Prisma Schema
\app\models\catalog.tsto view additional model details
\app\models\catalog.server.tsto view Prisma CURD functionality
\app\routes\__app\catalog.tsxroute to view loader for getting data list
\app\routes\__app\catalog\$catalogId.tsxroute to view action methods for catalog model
\app\views\catalogto check out views folder to view catalog list and form views.
Download Code to continue development in local editor!