Setting up a Shopify app with Netlify

[webmercator]

Building an app with Shopify is definitely a nightmare. I can not count anymore how many issues I have faced and how many times I have cursed Shopify because of things that are not well or at all documented or just really badly programmed. Also to the point I don’t understand why Shopify had the idea to reinvent the wheel with their liquid file format. There is really no point to it and is making every developers life terrible.

Anyways, if you have gotten to the point to deploy your app that you have created based on the remix+vite template and want to deploy it to Netlify (to be fair, this more of an issue with Netlify than Shopify), here are is how to do it:

1. Add the @netlify/remix-adapter/plugin to your vite.config.ts like indicated here https://docs.netlify.com/frameworks/remix/#create-a-new-remix-app-to-deploy-to-netlify

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
// ↓ add this
import { netlifyPlugin } from "@netlify/remix-adapter/plugin";

export default defineConfig({
plugins: [
remix(),
tsconfigPaths(),
netlifyPlugin() // ← add this
]
});

2. Dont forget to set the environment variables SHOPIFY_APP_URL, SHOPIFY_API_KEY, SHOPIFY_API_SECRET and SCOPES by using “shopify app env show” like described here Deploy to a hosting service
3. Set your “Publish directory” to your-app/build/client as the assets will be stored there

Hope this will help anyone facing the same issues

[rajweb]

@webmercator ,

I completely understand the pain of working with Shopify’s app development and the challenges of the Liquid file format. With over 8 years of experience in this field, I’ve definitely been through similar frustrations, so I know how tough it can be when things aren’t well documented or don’t work as expected.

feel free to reach out! I’d be happy to help based on my experience. Don’t hesitate to contact me!

Best Regards,

Rajat

[webmercator]

Hi @rajweb , that’s really nice, thank you!
8 years - I think you should at least send Shopify the bills of coloring the grey hair they probably have caused you

I was able to solve most of the challenges in the end, even though it took me much longer than I had planned. The biggest ones were (in the hope that the development team might read this and work on it someday):

1. The GraphQL-RestAPI maze with lacking documentation. Especially the process of uploading images or other files is crazy. First stage uploading with the GraphQL api, to then retrieve the temporary Google url, to then uploading with the RestAPI, to then again store the Urls with GraphQl seems overengineered. If yet such a process exists, there should be a proper tutorial for it to not spend days on solving it or else don’t provide the solution at all.

2. Metafields. It is not trivial to understand at first how to set and retrieve metafields. There is a lack of documentation on how to set app specific metafields and how to retrieve them and that you need the app specific id for it on the storefront. Also, there is for understanding how to set the right access scopes. It seems like solving a puzzle when going through the documentation and collecting the pieces from everywhere. Then, it is crazy that you have to first assign metafields to a liquid variable, to then use them in a script tag to send them via window.variable to your javascript asset.

3. Liquid in general. Liquid seem like trying to invent the wheel where it already exists. I understand that its difficult to change when everything is built around it but it seems to me like a mix of html and json with lack of debugging functionality. Especially the ladder makes developing hard as errors are only shown when deploying the app but not in dev mode. Similarly, script tags are not even logging in the console when some part of the script fails.

4. Polaris. Its nice to have an easy to use component library and that they want to keep their design clean. However, several components lack functionality and basic things like a proper modal are not really accessible. The issue then is when using another package like radix-ui, you have to match the styling of Polaris with missing documentation for it. But, to be fair, the react-based developing experience here is good and better then other parts.

5. Setting up the session storage db for deployment. I decided to use postgreSQL so I can only speak for that. But here, a basic functionality of passing a CA certificate for a proper SSL connection was missing. I ended up patching it myself. In case its helpful to anyone, I published it here: https://github.com/janneskruse/shopify-app-session-storage-postgresql_modified.

6. Hosting provider. Not that much of a deal, but it would be nice if they could cover popular providers like Netlify, Vercel or setting it up on a cloud provider using docker. Other people might struggle with it. I personally was required to use Netlify, so setting the Remix-Vite Netlify configuration up was a little challenging.

I think the only unresolved question is how to develop on an already published app. Is it really the case that I would need to have two different apps like indicated here?:

• https://community.shopify.com/post/2248877
• https://community.shopify.com/post/2123441