Build the app frontend

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.

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:

1. Navigate to your app directory.

2. Either start or restart your server to build and preview your app:

3. With the server running, press p to open your app's preview URL in a browser.

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.

1. Open /web/frontend/pages/index.jsx. Because there are multiple files named index.jsx, ensure that you're working in the correct index.jsx file.
2. Delete the contents of the file.

3. Add the following code:

4. In your browser, verify that the loading markup appears:

   

5. In /web/frontend/pages/index.jsx, set isLoading to false.

6. In your browser, verify that the empty state appears in the app:

   

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

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.

1. In a terminal, navigate to your app's directory, and then navigate to the /web/frontend directory:

2. Run your package manager's install command to install the dependencies:

The form component uses the following components:

1. In the /web/frontend/components directory, create a new file called QRCodeForm.jsx.

2. Add the following code to the file:

Update the app's component index to export the new QRCodeForm component that you created.

1. Open /web/frontend/components/index.js.

2. Add an export statement for the new QRCodeForm component:

An app can contain several pages. The QR code app has two pages in addition to the index:

Next, you'll add the new and [id] pages. Each page contains the QRCodeForm component that you created in the previous step.

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.

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.

1. From the /web/frontend/pages directory, delete pagename.jsx.
2. Open /web/frontend/App.jsx.

3. Remove NavigationMenu:

The page is removed from the sidebar.

The Create new QR code page enables merchants to create new QR codes. It uses the following components:

1. In the /web/frontend/pages directory, create a new directory called qrcodes.
2. In the new directory, create a new file called new.jsx.

3. Add the following code to the file:

4. 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.

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:

1. In the /web/frontend/pages/qrcodes directory, create a new file called [id].jsx.

2. Add the following code to the file:

3. 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.

   

4. In /web/frontend/pages/qrcodes/[id].jsx, set isLoading to false to preview the page populated with placeholder data. Refresh the page.

   The page should look like the following screenshot:

   

The list component contains the QR codes built by your app.

Add some additional dependencies that are required to build your list component:

1. In a terminal, navigate to your app's directory, and then navigate to the /web/frontend directory:

2. Run your package manager's install command to install the dependencies:

The list component uses the following components:

1. In the /web/frontend/components directory, create a new file called QRCodeIndex.jsx.

2. Add the following code to the file:

Update the app's component index to export the new QRCodeIndex component that you created.

1. Open /web/frontend/components/index.js.

2. Add an export statement for the new QRCodeIndex component:

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:

1. Import the QRCodeIndex component:

2. Add a variable to set the QR codes directly after const QRCodes = []:

3. 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>

Your file should look like this:

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.

1. In /web/frontend/pages/index.jsx, replace const QRCodes = [] with the following:

2. In the browser, view your app in your development store. The page should look like the following screenshot:

   

3. 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.