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>
);
}
