How to Create a Shopify App for Its Website with Remix and Prisma

Shopify, as a leading eCommerce platform, offers extensive opportunities for developers to create customized applications that enhance user experience and business operations. In this guide, we'll explore how to leverage Remix and Prisma to build a robust Shopify app from scratch.

Remix Framework: Building Modern Shopify Apps

Remix is a versatile framework known for its ability to develop fast, interactive web applications. When applied to Shopify app development, Remix streamlines the process by prioritizing performance, seamless integration with Shopify APIs, and an exceptional developer experience.

Key benefits of using Remix for Shopify apps include:

Performance: Optimizes navigation and rendering for smooth user experiences.
Integration: Seamlessly connects with Shopify APIs, facilitating data management and authentication.
Developer Experience: Simplifies coding with features like auto code splitting and intuitive APIs.
Flexibility: Adaptable to various app structures and data management needs.

Development Prerequisite

Shopify Partner Account
Shopify Development Store
Ruby 3.2.2
Node v18 or above
NPM v9.5.0
Any editor you like.

Getting Started with Remix for Shopify Apps

To begin building your Shopify app using Remix, follow these steps:

Install the Remix Template: Start by installing the Remix template using the command:

npm init @shopify/app@latest

Customize your app directory name(remixapp) during setup.

Connect to Your Testing Store: run “npm run dev” in your app's root directory using the command prompt

Follow prompts to set your app name and connect to your testing store. Once configured, you'll receive an installation link to set up your app on Shopify.

Creating Navigation Pages: Create new pages like "Studentsdata" by navigating to the remixapp/app/routes directory and setting up a file named app.studentsdata.jsx. Here's a basic structure to get started:

import { json, redirect } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";
export let loader = async () => {
return json({ data: [] });
};
export let action = async ({ request }) => {
// Handle form submissions and database updates
return redirect("/app/studentsdata");
}; export default function StudentsdataPage() {
let { data } = useLoaderData();
return (
< div>
< h1>Students Data
< Form method="post">
{/* Form fields */}
< button type="submit">Save
< /Form>
< div>
{/* Display data */}
< /div>
< /div>
);
}
For comprehensive documentation, refer to Remix Docs. And we have to add path link “< Link to="/app/studentsdata">studentsdata page” inside “function App()”

Prisma for Shopify Apps: Efficient Data Management

Prisma complements Remix by offering robust backend database management capabilities. It simplifies data storage, retrieval, and manipulation from Shopify's backend, ensuring efficient operations and scalability as your app grows.

Key advantages of using Prisma for Shopify apps include:

Efficient Data Management: Streamlines database operations for quick and reliable data handling.

Developer Ease: Enhances coding efficiency with intuitive tools and straightforward APIs.

Scalability: Supports app growth by managing data seamlessly.

Integration: Easily connects with Shopify's ecosystem for authentication and data flow.

Reliability: Ensures consistent and secure data operations.

Integrating Prisma with Your Shopify App

Follow these steps to integrate Prisma into your Shopify app:

Database Setup with Prisma: Create a schema.prisma
file in the remixapp/prisma directory with the following content:

Database Setup with Prisma: Create a schema.prisma file in the remixapp/prisma directory with the following content:
// remixapp/prisma/schema.prisma
model Settingstable {
id Int @id @default(autoincrement())
name String
phone String
email String? // Optional field
description String? // Optional field
}

Apply Database Migration:

Run the migration command to create the database and apply the necessary changes:
npm run prisma migrate dev -- --name studentsdata-table
This generates a studentsdata-table folder inside prisma/migrations with the relevant SQL file.

Accessing the Database:

Use “npm run prisma studio” to access and manage the
database through Prisma's user-friendly interface.

Creating Interactive Forms with Prisma and Remix

Here's an example of how to create a form that allows users to save and display data on the "Studentsdata" page: // remixapp/routes/app.studentsdata.jsx
import {
Box, Card, Layout, Link, List, Page, Text, BlockStack, InlineGrid, TextField,
Divider, useBreakpoints, Button,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { useState } from "react";
import { json } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";
import db from "../db.server";
export async function loader() {
let data = await db.Settingstable.findMany();
return json({data});
}
export async function action({ request }) {
let formData = await request.formData();
formData = Object.fromEntries(formData);
await db.Settingstable.create({
data: {
name: formData.name,
phone: formData.phone,
email: formData.email,
description: formData.description,
},
}); return json({ message: "Data added to DB"});
} export default function Studentsdata() {
const {data} = useLoaderData();
const [formState, setFormState] = useState({});
return (
< Page>
< TitleBar title="Studentsdata page" />
< BlockStack gap={{ xs: "800", sm: "400" }}>
< InlineGrid columns={{ xs: "1fr", md: "2fr 5fr" }} gap="400">
< Box
as="section"
paddingInlineStart={{ xs: 400, sm: 0 }}
paddingInlineEnd={{ xs: 400, sm: 0 }}
> < BlockStack gap="400">
< Text as="h3" variant="headingMd">
FORM :
< /Text>
< Text as="p" variant="bodyMd">
Fill the form and submit
< /Text>

< Card roundedAbove="sm">
< Form method="POST">
< BlockStack gap="400">
< TextField label="Name" name="name" value={formState?.name}
onChange={(value) => setFormState({...formState, name:value})} />
< TextField label="Phone" name="phone" value={formState?.phone}
onChange={(value) => setFormState({...formState, phone:value})} /> < TextField label="Email" name="email" value={formState?.email}
onChange={(value) => setFormState({...formState, email:value})} />
< TextField label="Description" name="description" value=
{formState?.description} onChange={(value) => setFormState({...formState, description:value})} />
< Button submit={true}>Save
< /BlockStack>
< /Form>
< /Card>
< Box
as="section"
paddingInlineStart={{ xs: 400, sm: 0 }}
paddingInlineEnd={{ xs: 400, sm: 0 }}
> < BlockStack gap="400">

Data : Here you can see all the data.....

Name: {data.name}
Phone: {data.phone}
Email: {data.email}
Description: {data.description}

); }

In this code:

The loader function fetches data from the database and returns it.
The action function handles form submissions, adding data to the database, and redirecting back to the "Studentsdata" page.
The form inside the section allows users to submit new data, which is then displayed on the page.

Conclusion:

Creating a Shopify app with Remix and Prisma allows developers to harness the full potential of Shopify's platform by building fast, interactive applications with efficient data management capabilities. Remix ensures a superior frontend experience with its performance optimization and seamless integration features, while Prisma simplifies backend data operations, ensuring scalability and reliability. Together, they provide the tools needed to create modern, data-driven Shopify apps that meet both user and business requirements.

This comprehensive guide equips you with the essential steps and tools to create a successful Shopify app using Remix and Prisma. Whether you're starting a new project or enhancing an existing one, leveraging these frameworks will help you deliver robust, efficient, and user-friendly Shopify applications.