Ideas for an efficient development workflow

Solved
mert86
Tourist
11 1 21

I am currently working on developing my first Shopify App, and have run into a few issues that are really slowing down the development process. I followed this guide (https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react) to build a sample app, and am using that as a starting point for developing my own app. The instructional focuses on building the app with Node and React. The development process feels painfully slow however, and it feels like it could be faster if I addressed the following basic challenges:

1. Each code update compiles and re-renders the app in the Shopify development store, served up from my system via ngrok. The whole process seems to take anywhere from 15-30 seconds per update, and over time this workflow is really slowing down the development process. Is there a way to run my app outside of the store, potentially on my local machine while still being connected to the development store so that the app can fetch products, customers, etc? Or a way to speed up the connection? I am running a 300mbs down, 5mbs up internet connection, so I am assuming that the bottleneck occurs elsewhere. Even if I could shave this down to 5-15 seconds per update, life would be a lot easier. I am using the free version of ngrok and am going to pay for a Pro account so maybe that will speed things a long a bit.

2. If I make a mistake in my coding somewhere, the app seems to continually try to re-render in the browser window until I fix the error; the entire time it continually displays the same error message(s) in dev tools. Currently, it seems to be doing this over and over until the browser tab freezes up, dev tools becomes unusable, and I have to close out of it and re-try. Is there a way to configure the app so that it doesn't continually throw errors until I fix the issue?

My background is primarily in PHP development, so this transition has involved taking a few courses in React and brushing up on my JS programming skills. I may be off-base on some of my terminology or understanding of Shopify development in general, so feel free to let me know if it seems like I am fundamentally missing something. Thanks for your time and your help!!

0 Likes
mert86
Tourist
11 1 21

This is an accepted solution.

A few days into this, and I have come up with a few time savers answer my own questions and to help with my workflow:

 

1. I paid for an ngrok account so that I can reserve a subdomain for my app
I want to develop locally, so at this point I need a service like ngrok to serve my app up at a web address. By reserving a subdomain, I don't have to update my urls in app settings each time I open a new tunnel. I would also have to update my proxy each time. I have to say, the connection does appear slightly faster but that could just be wishful thinking. Definitely worth the $8 a month (or whatever it was)

 

2. Installed and configured nodemon so that my server automatically restarts when I make updates versus manually restarting the server a million times

I wanted to install this locally, and only use it for my development server. Here is how to install:

- Run npm install --save-dev nodemon in your app root directory

- Add the following to your "scripts" object in package.json:

"nodemon": "nodemon ./server.js",

- Restart the server with npm run nodemon

3. Took a step back and gained a better understanding of what I am trying to accomplish

This may seem silly, but its easy to get tunnel vision when developing something. Most of my experience comes from Wordpress plugin and theme development, as well as general PHP web application development and various API integrations. Coming into this, I conceptually assumed that a Shopify App is kind of like a plugin. Well, it really isn't lol. Its a full blown application (they weren't kidding when they called them "apps" huh?). So knowing that, you can focus on a lot of the standard stuff you might already be used to in order to get a minimum viable product online and understand how to connect your app to Shopify. You will have to host this app and maintain it entirely. From an admin perspective, you are really just injecting an iFrame into the admin area. From a storefront perspective, you are really just connecting to scripts that you host and using those to interact with pages/products/etc. Of course, its more complicated then that, but it helped me to zoom out and see what it really is that I am doing so that I can organize a workflow that is efficient and enjoyable.

Hopefully these tips help someone!

Cheers!
-mert

jai-sandhu
New Member
1 0 0

I followed all the steps as per the accepted solution but it takes 5-6 minutes to reflect each code change. I don' believe I'm getting throttled as I paid for an Ngrok account. I know I'm used to hot reloading but is this really the standard development experience that everyone is living with? 

0 Likes
Gordon_Chan
Shopify Expert
17 0 5

Hi @mert86 , my background is also a PHP developer, I believe if you use Node/React and follow the guide to build the app, it would be less effective than if you use PHP to get the concept of building Shopify App. As ultimately it is about how to make Shopify API call to achieve various purpose, like retrieve products or orders data, query data with cursor-based approach etc.

I use Laravel as the application framework with `osiset/laravel-shopify` to facilitate making Shopify API call. I am also using MAMP to easy setup localhost web server. With Laravel well built command, I can watch the scss/js change and compile. As I often build embedded app, it takes time on loading the whole admin panel sometime, so you may no to enable embedded app approach.

http://gordon-chan.net
I am a Freelance Web Engineer. Dedicated my life to e-commerce development.
0 Likes
sper
New Member
2 0 0

A bit late to the party but after going through the same frustration, I published a post explaining how to make your app development workflow way faster https://blog.abuiles.com/blog/2021/02/07/speeding-up-your-shopify-app-development-workflow/

0 Likes