RemixFast Jokes Tutorial

You have probably already done Remix Jokes Tutorial. We will be building a clone of same using RemixFast in less then 10 mins!

Steps:

Create an App
Create a Model
Add a Route
Test the App
Security
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: 'Jokes'

And click Create to create the app. Select the newly created app Jokes, 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, enter following:

Model Name: 'Joke'

Tab out and add two Fields with following Field Names:

name
content

name
content

Also enter following for Data Length:

name: 128
content: 512

name: 128
content: 512

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

Click Save to create new model.

Step 3 - Add Route

Click on Routes tab and enter following

View Template: 'Card List + Detail Form (Side By Side)'
Model: Select > 'Joke'
Label: 'Joke'

View Template: 'Card List + Detail Form (Side By Side)'
Model: Select > 'Joke'
Label: 'Joke'

You should now have UI with two columns, left column showing Joke card view and right column showing form view for Joke details.

Step 4 - Test

Click on Preview to test the app. This will open Preview dialog with test app. Select Joke tab and add new item by clicking Add button

This will open Add Joke view in the right plan. Enter following to create new catalog item:

Name: 'Frisbee'
Content: 'I was wondering why the frisbee was getting bigger, then it hit me.'

Name: 'Frisbee'
Content: 'I was wondering why the frisbee was getting bigger, then it hit me.'

Click Add to save item to database.

Repeat to add one more catalog item with following details:

Name: 'Hippos'
Number: 'Why don't you find hippopotamuses hiding in trees? They're really good at it.'

Name: 'Hippos'
Number: 'Why don't you find hippopotamuses hiding in trees? They're really good at it.'

Click Done to exit preview.

Step 5 - Security

Lets configure Security. We will let users create new jokes, but they won't be able to update or delete them.

Select Security tab in the main editor and click Roles. This will open Roles dialog. Let add a role by clicking Add button (bottom bar, left). In the Add Role dialog, enter following:

Label: User

Label: User

Click Add in Rights pane, this will open Add Role Rights dialog. Enter following:

Data Rights
Joke: Check (select)
Access Level: Select > Read,Create

Data Rights
Joke: Check (select)
Access Level: Select > Read,Create

Click Add to add Read,Create right to User role. Click Add to save User role.

Select Routes tab and Joke route. In the Form View, select Delete button. In Properties panel, select Display Condition. This will open Display Condition Editor dialog. Click Add Right Condition and enter following

Data Right
Right: select > 'Joke'
Select Access Level > 'Read,Create,Update,Delete'

Data Right
Right: select > 'Joke'
Select Access Level > 'Read,Create,Update,Delete'

Click Done. This ensure that only user with Read,Create,Update,Delete will be able to delete Joke.

Lets do same for Update button. (Update > Properties > Display Condition > Add Right Condition)

Data Right
Right: select > 'Joke'
Select Access Level > 'Read,Create,Update'

Data Right
Right: select > 'Joke'
Select Access Level > 'Read,Create,Update'

Click Done. This ensure that only user with Read,Create,Update will be able to update Joke.

Before previewing security, lets customize the form view. Select Components panel and drag Section component to form view and drop it on the top, just above Name field. Now drag Name field to newly added section.

Select Content field and in the Properties panel make following changes:

Type: Select > Multi Line Text
Rows: 4
Cols: 40
Max Length: 512

Type: Select > Multi Line Text
Rows: 4
Cols: 40
Max Length: 512

Click on Preview to test the app. This will open Preview dialog with test app. Select Joke tab. Select a joke and notice that as Admin you have rights to Update/Delete a joke. Change Role to User in top bar. You are now testing as a user with User role. Immediately Delete and Update button disappear as user only has right to create, not update or delete!

Step 6 - 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\joke.ts to view additional model details
\app\models\joke.server.ts to view Prisma CURD functionality
\app\routes\__app\joke.tsx route to view loader for getting data list
\app\routes\__app\joke\$jokeId.tsx route to view action methods for catalog model
\app\views\joke to check out views folder to view catalog list and form views.

click on Download Code to continue development in local editor!