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

ncataland
Shopify Partner
2 0 1

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 ==================

app/

├── _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">
            <label>
              <span>Shop domain</span>
              <input type="text" name="shop" />
              <span>e.g: my-shop-domain.myshopify.com</span>
            </label>
            <button type="submit">Log in</button>
          </Form>
        )}
        <ul>
          <li>
            <strong>Product feature</strong>. Some detail about your feature and
            its benefit to your customer.
          </li>
          <li>
            <strong>Product feature</strong>. Some detail about your feature and
            its benefit to your customer.
          </li>
          <li>
            <strong>Product feature</strong>. Some detail about your feature and
            its benefit to your customer.
          </li>
        </ul>
      </div>
    </div>
  );
}

 

Replies 0 (0)