Is the app/_index/ folder included in the Shopify Remix template needed for embedded apps?

Shopify Partner
2 0 3

Hi there-- can someone help me understand the purpose of the app/_index/route.tsx file (see below) that is included in the Shopify Remix embedded app template?


It returns some boilerplate html but I am struggling to figure out if/where/when this would be rendered for the user or how to preview the page in development. The main landing page for my app is the app/routes/app._index.tsx file.


It looks like it might be a login page template but given apps aren't allowed to show a login page, would it be safe to delete the entire _index folder?

Thanks in advance.


=============== TEMPLATE APP FOLDER STRUCTURE ==================


├── _index/

  ├── route.tsx  <----------- This file

  └── style.css

├── auth.login/

  ├── error.server.tsx

  └── route.tsx

├── routes/

  ├── app._index.tsx

  ├── app.additional.tsx

  ├── app.tsx

  ├── auth.$.tsx

  └── webhooks.tsx

├── db.server.ts

├── entry.server.tsx

├── globals.d.ts

├── shopify.server.ts

└── root.tsx


// app/_index/route.tsx

import type { LoaderFunctionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Form, useLoaderData } from "@remix-run/react";
import { login } from "../../shopify.server";
import indexStyles from "./style.css";

export const links = () => [{ rel: "stylesheet", href: indexStyles }];

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);

  if (url.searchParams.get("shop")) {
    throw redirect(`/app?${url.searchParams.toString()}`);

  return json({ showForm: Boolean(login) });

export default function App() {
  const { showForm } = useLoaderData<typeof loader>();

  return (
    <div className="index">
      <div className="content">
        <h1>A short heading about [your app]</h1>
        <p>A tagline about [your app] that describes your value proposition.</p>
        {showForm && (
          <Form method="post" action="/auth/login">
              <span>Shop domain</span>
              <input type="text" name="shop" />
            <button type="submit">Log in</button>
            <strong>Product feature</strong>. Some detail about your feature and
            its benefit to your customer.
            <strong>Product feature</strong>. Some detail about your feature and
            its benefit to your customer.
            <strong>Product feature</strong>. Some detail about your feature and
            its benefit to your customer.


Replies 3 (3)

Shopify Partner
14 0 2

Wondering about this as well. When is this page shown?

Shopify Partner
6 1 2

It's a page which is shown when the app is not installed in the store.



  if (url.searchParams.get("shop")) {
    throw redirect(`/app?${url.searchParams.toString()}`);



This code basically checks "Are we in the store?" and if we are - redirects to the default /app route; if not - displays the page.


Comment out the redirect and go to store/your_store_name/apps/your_app_name, and you will see the page.


Hope this helps.

Shopify Partner
1 0 0

In theory, this makes sense. A page to show if an app is not installed. Commenting out the code does exactly as you described (with the app installed). However, once an app is uninstalled a user can't visit store/your_store_name/apps/your_app_name. I tested this and all you see is a 404 message. So maybe @ncataland has a point. There may be no need for it. This is my first time working with remix so maybe I'm missing something.

Screenshot 2024-04-25 at 10.48.00 AM.png