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!