About 9 month ago I was commiting to make and lauch an app on Shopify. At that time I kew Python pretty well but had about one hour total of Javascript experience under my belt. Here is what I learned on the way.
I specifically chose an Shopify app after reading how about even some very niche apps manage to make more then 2000 USD of monthly recurring revenue and I knew that I wanted to create an web-app because the learned skillset can be broadly utellized. I however have no professional programming background and was working fulltime during this time. The key was for sure consistency but also the pandemic related shift to remote work made some more time in my day.
First of all I needed an idea and a problem that my app should solve: A while ago I had unsuccessfully run a Shopify store and a Facebook Ad-campain. I however noticed that Facebook-Ads can be target so called “Custom Audiences”. A Custom Audience is basically a box full of Facebook profiles, to which an ad can then be shown. The key feature is, that a Custom Audience can be filled using your hashed customer profiles. This step was the idea for the app.
Since I knew Python figuring out the backend process was a relatively straight forward process. But this assumed that one was already authenticated to Facebook. To “app-ify” it I needed a lot of time to understand about OAuth and how this went along with an frontend.
Since I was committed to using Python for backend the server choices narrowed down to Django or Flask. Since I never worked with Django I started using Flask. The problem with Flask however is that it is quite flexible but a lot of time one feels like reinventing the wheel. However i found that the book Flask Framework Cookbook contains some helpful patterns and practices. For hosting Pythonanywhere suited my needs. Cheap, easy to use and good customer support if needed.
For the frontend I tried to get away with using Bootstrap, but since I’m a visually inclined person I wanted to provide a consistent look and feel with the Shopify admin area. Which basically means you need to use React.js
I found learning React actually surprisingly easy and within a few hours of Youtube tutorials and examples from the Shopify documentation I knew enough to be dangerous. So I implemented the app using a Flask and React. Basically I had a React frontend which then loads the data using Rest-Api calls to Flask. Flask in turn responds with JSON.
Now since it basically worked I started going through the app review processes. On one side Facebook, on the other Shopify.
After describing a bit of what the app does and some screencasts, Facebook approved me.
Now Shopify, and here the facade starts to crack. Third party cookie issues. What followed was a deep dive into cross-origin ressource sharing. The next issues was having some kind of feedback chat, to help my customers with any possible issues. Since my users would have to authenticate with Facebook anyways Facebook customer chat was the obvious choice. But I just would not get it to work. After unsuccessful trial and error I started investing into my development infrastructure. One thing learned is that 1 hour invested in setting up your debugging environment correctly will save you 10 hours in trial and error. But I only learned this later.
For now my conclusion was that what I had to hacked together had to much technical debt and I needed a reboot. I was devastated I felt like back to square one.
This time I would sit down and study the basics. My plan was to rewrite the frontend and use GraphQL instead of the REST-Api on the backend side. For this I bought two books I would recommend. The first one is The Road to React and the second one is The Road to GraphQL. I would definitely recommend these two books and also in this order.
Next I worked on my debug environment in order to catch errors more easily. Since Shopify apps are inside an IFrame, using React-devtools is not straight forward to use, but I have documented the process for anyone interested. Secondly I built a development environment in which Flask works together with the React development server.
Thirdly, since I rewrote the backend part from a REST-Api to a GraphQL-Api, I also got rid of session cookies by using JSON-Web-Tokens as supported by the new Shopify-App-Bridge. This now seems to become to prefered way to make authenticated calls from an Shopify app frontend to an backend.
After finishing this I finally felt confident enough to go through the Shopify app review process and went life.
Lauching and onbording of my first user felt quite exciting: Sentry told me it didn’t work! So I quickly reached out by email in order to not “endanger” my so far most valuable customer and promised to quickly fix the issue. Hindered by some travel I had to do at that time one day later the issue was fixed and the customer happy.
So what’s next?
My next steps are to learn about marketing and keep and dialog with my customers to add features or improve where needed. Altogether I am quite satisfied with the result and also plan to write about technical aspects that others might find helpful.
If you want have Shopify store and want to give it I try, head head over to Custom Audience Sync.