Build the app frontend
This section is part of a larger tutorial to build a QR code example app. You need to read the overview section before starting these tasks.
At the end of this section of the tutorial, the frontend of the app will be complete and you'll be able to see it working using mock data.
What you'll learn
Anchor link to section titled "What you'll learn"In this section, you'll use Node.js, React, Shopify App Bridge, and Polaris components to build your app frontend.
The frontend consists of three pages:
- The app home page: Uses the Polaris List component to display saved QR codes.
- The Create QR code page: Enables merchants to create a new QR code that targets either a product page or populated cart, add a discount code to the QR code, preview the QR code destination, and download the QR code as an image file.
- The Edit QR code page: Enables merchants to modify and delete existing QR codes.
Step 1: Start your development server
Anchor link to section titled "Step 1: Start your development server"You can view and test your frontend components in the Shopify admin as you build them. To do so, start a local development server for your app:
Navigate to your app directory.
Either start or restart your server to build and preview your app:
With the server running, press
p
to open your app's preview URL in a browser.
Step 2: Add an empty state and loading markup to the app home page
Anchor link to section titled "Step 2: Add an empty state and loading markup to the app home page"The home page is the first page that the merchant interacts with when they open an app. To start, you'll create a custom empty state for this page.
The empty state displays in the home page when there are no saved QR codes, and acts as an introduction to the app for new users. The empty state includes a button that lets merchants create a new QR code.
You can also include loading markup on the home page to indicate to users that your app is loading content.
The home page empty state and loading markup uses the following components. We strongly recommend clicking through to the documentation for each component to understand what they are and how they're used.
Component library | Components |
---|---|
App Bridge | useNavigate, TitleBar, Loading |
Polaris | Card, EmptyState, Layout, Page, SkeletonBodyText |
Create your home page with an empty state
Anchor link to section titled "Create your home page with an empty state"- Open
/web/frontend/pages/index.jsx
. Because there are multiple files namedindex.jsx
, ensure that you're working in the correctindex.jsx
file. - Delete the contents of the file.
Add the following code:
In your browser, verify that the loading markup appears:
In
/web/frontend/pages/index.jsx
, setisLoading
tofalse
.In your browser, verify that the empty state appears in the app:
Step 3: Create the QR code form
Anchor link to section titled "Step 3: Create the QR code form"The QR code form component enables merchants to create and edit QR codes.
The form enables merchants to do the following:
- Select a product for the QR code
- Select whether the QR code will point to a product page or populated cart
- Include a discount code in the QR code
- Preview the QR code destination
- Download the QR code as an image file
- Delete a QR code
Add a dependency
Anchor link to section titled "Add a dependency"You need to add @shopify/react-form to your dependencies. It's used to manage React forms by providing custom hooks, and is therefore required to build your form component.
In a terminal, navigate to your app's directory, and then navigate to the
/web/frontend
directory:Run your package manager's install command to install the dependencies:
Create the form component
Anchor link to section titled "Create the form component"The form component uses the following components:
Component library or package | Component |
---|---|
React | useState, useCallback |
Polaris | Banner, Card, Form, FormLayout, TextField, Button, ChoiceList, Select, Thumbnail, Icon, IndexTable, Stack, Text, Layout, EmptyState |
App Bridge | ContextualSaveBar, ResourcePicker, useAppBridge, useNavigate |
Polaris Icons | ImageMajor, AlertMinor |
hooks | useAuthenticatedFetch This is a custom hook that's included in the Shopify Node app template. |
@shopify/react-form | useForm, useField, notEmptyString notEmptyString is used to check that form values are strings that contain at least one meaningful character. |
- In the
/web/frontend/components
directory, create a new file calledQRCodeForm.jsx
. Add the following code to the file:
Include the form component in the component index
Anchor link to section titled "Include the form component in the component index"Update the app's component index to export the new QRCodeForm
component that you created.
- Open
/web/frontend/components/index.js
. Add an export statement for the new
QRCodeForm
component:
Step 4: Create the QR code pages
Anchor link to section titled "Step 4: Create the QR code pages"An app can contain several pages. The QR code app has two pages in addition to the index:
Page | Description | URL path |
---|---|---|
/web/frontend/pages/qrcodes/new.jsx |
Used to create new QR codes. | /apps/[app-name]/qrcodes/new |
/web/frontend/pages/qrcodes/[id].jsx |
Used to view and edit existing QR codes. | /apps/[app-name]/qrcodes/[id] , where id is the unique identifier for the QR code.Example: /apps/{app-name}/qrcodes/42 |
Next, you'll add the new
and [id]
pages. Each page contains the QRCodeForm
component that you created in the previous step.
About routing in the Node app template
Anchor link to section titled "About routing in the Node app template"The Node app template uses file-based routing to make creating new pages easier. Any .jsx
file that you add to /web/frontend/pages
becomes a URL. Each of these files must contain a default export that is a component.
If the URL entered in the app can't be matched to a file in the pages
directory, then /pages/NotFound.jsx
is rendered.
This functionality is powered by Vite import.meta.glob and React Router.
Remove the template example page
Anchor link to section titled "Remove the template example page"The Node app template contains an example page. You can delete this page, and remove the NavigationMenu
component from the app, since it won't be used by the QR code example app.
- From the
/web/frontend/pages
directory, deletepagename.jsx
. - Open
/web/frontend/App.jsx
. Remove
NavigationMenu
:
The page is removed from the sidebar.
Add a page to create new QR codes
Anchor link to section titled "Add a page to create new QR codes"The Create new QR code page enables merchants to create new QR codes. It uses the following components:
Component library | Components |
---|---|
App Bridge | TitleBar |
Polaris | Page |
App components | The QRCodeForm you created in a previous step |
- In the
/web/frontend/pages
directory, create a new directory calledqrcodes
. - In the new directory, create a new file called
new.jsx
. Add the following code to the file:
In your browser, from the app home page, click Create QR code to navigate to the New QR code page.
An empty form appears. You can set a title, select a product, and view the QR code destination.
Add a page to edit QR codes
Anchor link to section titled "Add a page to edit QR codes"The Edit QR code page enables merchants to view and edit QR code details.
This page is very similar to the Create new QR code page. However, the Edit QR code page includes loading markup that displays while QR code information is being fetched by the backend. You can mock this state using a temporary variable declaration.
Because the app isn't connected to a backend, you can also use mock data to make sure that the page displays QR code data as expected.
The Edit QR code page uses the following components:
Component library | Components |
---|---|
App Bridge | TitleBar, Loading |
Polaris | Card, Layout, Page, SkeletonBodyText |
App components | The QRCodeForm you created in a previous step |
- In the
/web/frontend/pages/qrcodes
directory, create a new file called[id].jsx
. Add the following code to the file:
In your browser, from the app home page, update the browser URL to navigate to the Edit QR code page:
https://{shop}.myshopify.com/apps/{app-name}/qrcodes/1
The page should look like the following screenshot. Note the progress bar at the top of the page, which is provided using the App Bridge Loading component.
In
/web/frontend/pages/qrcodes/[id].jsx
, setisLoading
tofalse
to preview the page populated with placeholder data. Refresh the page.The page should look like the following screenshot:
Step 5: Add a list component to the home page
Anchor link to section titled "Step 5: Add a list component to the home page"The list component contains the QR codes built by your app.
Add dependencies
Anchor link to section titled "Add dependencies"Add some additional dependencies that are required to build your list component:
In a terminal, navigate to your app's directory, and then navigate to the
/web/frontend
directory:Run your package manager's install command to install the dependencies:
Create the list component
Anchor link to section titled "Create the list component"The list component uses the following components:
Component library or package | Component |
---|---|
App Bridge | useNavigate |
Polaris | Card, Icon, IndexTable, Stack, Text, Thumbnail, UnstyledLink |
Polaris Icons | DiamondAlertMajor, ImageMajor |
@shopify/react-hooks | useMedia |
Day.js | dayjs |
- In the
/web/frontend/components
directory, create a new file calledQRCodeIndex.jsx
. Add the following code to the file:
Include the list component in the component index
Anchor link to section titled "Include the list component in the component index"Update the app's component index to export the new QRCodeIndex
component that you created.
- Open
/web/frontend/components/index.js
. Add an export statement for the new
QRCodeIndex
component:
Include the list component in the home page
Anchor link to section titled "Include the list component in the home page"After you create your list component, you can include it on your app's home page.
In /web/frontend/pages/index.jsx
, add the following:
Import the
QRCodeIndex
component:Add a variable to set the QR codes directly after
const QRCodes = []
:Include the QR codes index markup in your page:
- add
fullWidth={!!qrCodesMarkup}
to the<Page>
component. This line controls whether to display the page using a full width layout depending on whether a QR code exists. If a QR code exists, then the page will use a full width layout. - add
{qrCodesMarkup}
inside of<Layout.Section>
- add
Your file should look like this:
Test the list component with mock data
Anchor link to section titled "Test the list component with mock data"Because the app isn't connected to a backend, you can use mock data to make sure that the home page and list components work as expected.
In
/web/frontend/pages/index.jsx
, replaceconst QRCodes = []
with the following:In the browser, view your app in your development store. The page should look like the following screenshot:
Click on one of the QR code listings. The Edit QR code page loads with the same placeholder data from the previous step.
Build the backend of the QR code example app.