Shopify App Nuxt Template

The Shopify App Remix template provides a whole load of functionality around embedded app auth that they don't really document (or give examples for) or provide for the agnostic SDK's. I wanted to use Nuxt + Polaris Vue, so I spent some time porting the various low-level functions to make them compatible with H3 and added the middleware + session authentication handlers so they can be used with the Nitro server.

Notes

Opinionated

I intend to use this for my own use, so this is an opinionated setup. I likely won't change it to be a generic boilerplate, but you can definitely duplicate the repository and adjust it as you need it.

Azure SWA

I frequently use Azure SWA to deploy websites, and Nitro even has a preset for this. However, there are some oddities when using the platform - in this case, specifically that the Azure SWA -> Functions App proxy sets an Authorization header to authenticate the traffic between the web app and the functions app. However, by default Shopify App Bridge also sets this header on our client-side fetch requests to add the Shopify ID token, which is used in the server to check for a valid session. As this gets overwritten by the SWA token, this causes the session verification to fail as it is now not a valid Shopify ID Token.

As a workaround till this is fixed, we use a custom fetch instance (/app/plugins/shopify.ts) to add a different header name with the value of an ID token, and check that header on our server instead of the Authorization header.

Session Storage

Sessions need to be saved in a database. As I deploy to Azure SWA, I also use Azure Cosmos as a DB, and so the fetchExistingSession & authenticateSession functions (see /app/server/utils/auth.ts) use a Cosmos client to fetch + save sessions. This can be replaced by any other client though - for example, you could instead use Nitro KV Storage for this.

Get Started

# Clone repo
npx degit github:travis-r6s/shopify-app-nuxt <directory>


# Install dependencies
pnpm install


# Add Nuxt ENV's
cp app/.env.example app/.env
code app/.env


# Create/link app config
pnpm config:link
pnpm config:use <config name used in previous step>


# Deploy initial version to Shopify to configure scopes
pnpm deploy


# Run development command
pnpm run dev

Make hay!

Build + Deploy

You'll need to deploy the Nuxt app to a hosting platform. I often use Azure SWA, so there is an example workflow for that in .github/workflows/example-swa-workflow.yml.

Once that is done, edit the shopify.app.prod.toml file to set the application_url to your deployed site, and update the redirect_urls array to add the site hostname with a pathname of /auth/callback.

application_url = "https://<deployed app hostname>"

[auth]
redirect_urls = [ "https://<deployed app hostname>/auth/callback" ]

Next, use the Shopify CLI to deploy the production config:

# Run the deploy command, specifying the production config file
pnpm run deploy -c prod

Now you can visit the app in the Partners dashboard, and either install it to a development store, or set the distribution method as needed.

Useful Links

• App ENV's

---

Have fun!

TODO

• Check if we can replace some of the string template responses (i.e. here) with server templates/assets instead.