As a Front End Developer, Here’s How to Build a Shopify App

As a front end developer, I understand how difficult it can be to transition from front end to app growth. App creation necessitates a specific collection of talents, not to mention the various moving parts and technologies involved. But that doesn’t rule out the possibility. In this post, I’ll describe my experience as a front end developer transitioning to Shopify app growth. We’ll look at what resources are available, where the application should be hosted, and how the submission process works. But, most importantly, I’d like to illustrate that you don’t need to be a full-stack backend developer to do so. You can build Shopify apps regardless of what sort of production you do. Now, let’s get started. What are the benefits of Shopify applications for front-end developers? I work as a front-end developer for a living.

It’s something I’ve been doing since tables were invented. My first line of code was written on a ZX Spectrum. I worked in print design, Flash, SEO, web typography, felt MooTools was revolutionary, and used jQuery as my gateway to JavaScript. I first came across Liquid seven years ago and was immediately enamoured with its simplicity. It’s a great combination of markup and logic, and I found it very simple to understand. Liquid, in my opinion, is still not getting the credit it deserves. Nowadays, I mostly write front-end code for both small and large businesses. My programming is restricted to building CSS and Javascript architectures on a daily basis, with the aim of making code as performant and open as possible. I don’t have any experience with backend programming and never have. Servers are frightening—I panic when I run npm-install and see thousands of files installed that I have no knowledge of. I’m just a front end developer who’s been doing what I enjoy for a long time. However, as I worked more with Liquid and Shopify shops, I realised that without apps, you can only go so far. While Shopify is a flexible platform, I’ve noticed that focusing solely on the storefront has limited the number of client projects I can take on. “While Shopify is a flexible platform, I’ve discovered that focusing solely on the storefront restricts the types of client projects I can take on.” I realised that apps could enhance and supplement the services I offered to my clients. Making the transition to app creation, on the other hand, proved to be a challenging task.

There are so many innovations involved, and so many questions, that it can be overwhelming. React, KOA, Next, GraphQL, and Polaris are only a few examples. I was terrified of everything. However, I’ve discovered that adding apps to my developer toolkit has opened up a whole new world of possibilities for me. In addition to being able to offer additional services to my clients that include app creation, I currently have two apps listed in the Shopify App Store and am currently working on my third. The Shopify App CLI, Polaris, and Koa are all built using the same development workflow and have similar setups. It’s simple to reuse components once you’ve finished your first app. Your coding will improve as you progress from app to app. Starting out can be difficult, but once you get going, things will become much easier and simpler. This article is for you if you are unfamiliar with AWS, Heroku, Ngrok, Polaris, React, JSX, KOA, GraphQL, Apollo, Next, Webpack, NPM, CLI (or any of the other cryptically called technologies), and simply enjoy basic stuff like JavaScript, CSS, HTML, and Liquid. Front end developers have a lot of options when it comes to developing Shopify applications, and I hope this article provides you with a starting point and answers some of your questions. The Shopify web App CLI tool is the most straightforward way for a front-end developer to begin developing an app.

It enables you to build Node.js and Ruby on Rails applications with a React/Polaris front end in a matter of minutes. In just a few minutes, I had a simple application that uses OAuth to authenticate and a “Hello World” page with Polaris components using the CLI. By providing almost all I needed to get started, the Shopify App CLI took care of all the heavy lifting. Koa.js is the programming language used by the server. This is a Node.js application that takes care of things like routing and API calls. The front end is made up of Shopify’s Polaris modules, which are wrapped in the Next.js app framework. This isn’t too far out of our comfort zone for front end developers. JavaScript is used on the backend, and React is used on the front end. I still use ES5 or ES6 on the majority of my Shopify clients. Not all stores have transpilers in place for their build processes. There were a few things I wanted to learn more about and become more familiar with. I strongly advise you to look at the following items before you begin: The destructuring assignment is imported and exported using the async/await function module.

the fundamentals of React A front end developer should be familiar with everything on this list. I figured I had these topics covered, but if you don’t use them in development on a regular basis, you’ll have a hard time understanding your application code. There are numerous videos available online to help you brush up on these skills, but FrontendMasters provided me with all I needed in one convenient location. I took two courses in particular: Kyle Simpson’s The Recent Parts, which covers topics like destructuring, spread operators, and async functions (which almost anything your app does, like API calls and server functions, would depend on); and Steve Kinney’s State Management in Pure React v2, which covers React hooks, state management, and context, allowing you to work with React and Polaris. Putting a few days into training so I could really grasp the nitty-gritty bits of what I was doing saved me so much time in development hours, regardless of which courses or tutorials you select.