What I wish someone to tell me when building a Shopify App with Django

Recently, I am trying to build a new app called BYOB (Build Your Own Bundle). I spent nearly 6 months and still waiting for the app review now. If you’re joining the gold rush on Shopify Apps, here are some watches you want to avoid:

1. The mainstream is Node and React

Shopify prioritizes updates for Node and React. Ruby is also good. Development Libraries and tooling are first released before any other languages like PHP, Python, Java, etc. If you are not a Node and React developer, you’ll probably have a hard time finding relevant examples. However, if you are a Node developer, your life will be easier. For example, you can scaffold a HelloWorld app in a minute and therefore you can focus on the real work instead of peripheral features like Authentication.

Also, the UI library Polaris is based on React. If you don’t like to work with a build system, you can stick with the CSS components. When I try to look at the codes, the HTML is just like a big chunk of spaghetti. Turn out I just stick with Tailwind UI + Vue for my frontend, Django for my backend. I prefer the CDN approach.

2. Standalone vs Embedded app

Shopify public apps are basically in 2 types: Standalone & Embedded (Private apps are tailor-made for clients).

Standalone is an ordinary website just like other web apps. When a user presses your app on the app list, your web app will be shown in a new tab. The embedded app is the opposite. Your app will be inside an iframe embedded into the Shopify Portal. That’s why it’s called the embedded app.

Both types can be submitted to App reviews and listed on the AppStore.

An embedded app is suitable if you want the users to have a consistent experience with the Shopify Portal. However, browsers are getting paranoid with 3rd party cookies, it causes a lot of problems for developers.

3. 3rd party cookies

Nowadays, 3rd party cookies are raising more concern for privacy. Browsers like Firefox and Safari already disabled the use of 3rd party cookies. And Chrome is following the trend soon. In May 2020, Chrome made it default to ban 3rd party cookies in incognito tabs.

It causes a huge problem since many web frameworks are relying on cookies to store session id. When I use Django, the cookie is simply removed by Chrome, the session id is gone. In other words, you cannot use the default session middleware easily as a simple web app. The session is not persistent under the iframe. Even the official sample Shopify Django app is not updated to handle the issue yet. If you cannot handle this issue, you can never pass through app review. It takes a week to discover why the tester is having the error.

If you want to develop an embedded app with Django, you’d better be careful.

4. The new authentication: Session token Auth (JWT)

Well, Shopify comes up with a solution in addition to the original OAuth, i.e. the new session token Auth. I’ll call it JWT for simplicity. Using JWT, you’ll send a token in your request header. When the server receives the header, it will parse the token to get the data to identify a user.

If you want to implement JWT, you’ll need the Shopify App Bridge to generate the token for you on the frontend. Think of it like a Google Authenticator, which helps to generate a short-live token for your web apps. Note that JWT is more suitable for SPA. If you’re using the Server-Side rendering (SSR) approach, Shopify suggests you use a tool called Turbolink. It generates a temp loading page for each page load. You can use App Bridge to get the token via Turbolink.

However, Turbolink is no longer in active development. I didn’t consider using it at all. For me, the new authentication just causes much more trouble than benefits for developers.

I just wonder why Shopify doesn’t encourage developers to develop standalone apps. It takes me weeks or even a month to study all of these. For Django, there are no hands-on examples. So you have to work on them yourself. Very painful experiences. Personally, I spend 1 day removing App Bridge & session token and turning my embedded app into a standalone app. Hopefully, I can pass the app reviews soon.

5. Reviews & Traffics

The Shopify AppStore is good since it gives you free traffics. However, large players are dominating the top ranks. They try to get lots of reviews to boost the rankings so you can hardly compete with them. Gone the good day when you can release an app and get many paid users for a long time.

6. Prepare for copycats

The game is getting difficult not only because the free traffics are gone. There are numerous developers waiting to wipe you off. When you release a successful app, they will copy everything (or slightly improve!) and get as many reviews as they can in a short time. So the AppStore ranking can be boosted with the reviews. The old SEO tricks come into plays again.

If you’re an indie developer, you must find out a niche not easy to copy by other developers. My Shopify app (SPO) is related to SEO but the category is getting crowded day by day. I feel the pressure but simply releasing more features cannot improve the situation. I probably need to work harder on marketing. Traffic is king anyway.

Update (21/4/2021)

Shopify staff has updated for a new Django sample app with Session token auth. I’ve tested the repo. It works perfectly like a charm even without 3rd party cookies. FYI, It’s based on Python 3.9.

By the time of writing, Shopify has approved my 2nd Shopify app BYOB to list on the AppStore. I am busy recruiting merchants to try. I’ll continue to share what I learn as usual!

Leave a Reply

Your email address will not be published. Required fields are marked *