how to build a shopify plugin

all right guys so today fastest way to,build a shopify app from scratch,which at this point might also be the,best way to start your own,system as a service business or a sas,business because,it's actually way easier to build a,profitable shopify app,than would be to let's say create the,next profitable android,or ios app and that's mainly because,your main target audience,is purely merchants who have money to,invest in their business,and if your app solves a problem for,them you can justify a higher price,point,now before we get there i absolutely,need to understand,what you're getting into here because,app development,is quite advanced and it's not even,remotely as beginner friendly as,freelancing for example,and that's why i put together this,extremely important comparison,just to give you a better overview and,some more realistic expectations,so here we are in the powerpoint of,truth and justice where we have apps,versus freelancing and we're going to,start with freelancing because there's a,little less to cover,and if you want to get into that you,would need to learn html css and,javascript,which is basically the web development,stack and then you would also need to,learn,shopify liquid as shopify's back-end,templating language,and on top of that you would also need,to learn all the ins and outs,of shopify as a platform so that is to,say,configuring all the settings like taxes,shipping creating stores from scratch,setting up good looking or professional,looking front ends,knowing about the best themes you can,use knowing about different apps for,different use cases,or delivering services like store speed,optimization,migrations code customizations and theme,customizations,so then you would need to learn about,theme files shopify sections all these,kinds of things,but once you become good at all of these,you're pretty much ready,to hit the market and from there you,would need to learn how to find clients,how to talk to them how to position,yourself,how to send a good proposal how to price,your services,which can be a bit tricky or,overwhelming especially in the beginning,but i believe if you commit to learning,all of these,that's one of the fastest ways how you,can get to a sustainable income online,okay now how does this compare to apps,on this side the first thing you would,need,is a good idea or to be more precise you,need to solve an,in-demand problem because otherwise your,app won't be in demand,and you also don't want to be guessing,what the market wants,uh you need some sort of data or,reference on this,and there are actually different ways to,accumulate that but honestly one of the,easiest ways,would be that you have worked with real,world clients before,because then you see or you get to,experience first hand,what merchants struggle with and if you,notice the same issue across multiple,clients,then it's very likely that there's like,a bigger audience or a bigger pool of,people,having the same issue and that would be,the easiest market,to tap into okay now given that you have,a good idea,then follows the technical,implementation and,you would need to learn html css and,javascript as well,although i would say you need to learn,javascript in much greater detail but it,depends a bit on the type of application,you build,and then you would also need to learn,about shopify as a platform,not as much in detail as with,freelancing but you want to learn about,theme files different features and the,different apis,and then you would also need to learn,one back-end technology or back-end,language,and this could either be nodejs or ruby,on rails,basically it could be any back-end,technology could also be php or,something,but these two are the most popular in,the shopify space,so i would recommend picking one of,these and then you might also want to,learn,a front-end framework like react because,that helps to build the interface of,your app,and then you also need graphql in order,to make api calls,so then you can communicate with the,shopify system,and update or fetch data and speaking of,data,your app also might need a database if,you need to store customer data for,example,but then you also want to get into the,basics of security,because you don't want to publicly,expose that data or,leak customer data and then lastly you,would need to figure out your own,hosting,because your app has to run on a,dedicated server,so all of this is pretty much the,technical implementation,and from there you can hit the market so,then your main tasks become,marketing you want to get your app in,front of as many people as you can,you need to do customer support as soon,as you get the first few installs,and it's going to be a little less if,your app solely acts on the back end,and it's going to be a bit more if it,also works on the front end,because then it has to seamlessly,integrate with a lot of different themes,and eventually later down the road you,can build a team to outsource that or,automate that or have something like a,first or second level support,but in the beginning you're going to do,it all by yourself,and then you will have maintenance like,fixing smaller bugs,or you might also want to deploy new,features yeah so that's it for apps,so as you can see this whole apps topic,is quite complex,and that's also why inside free mode we,focus on the right half side of things,because,there we can get your results much more,consistent and predictable,and i mean we literally guarantee that,we have a 30-day money-back guarantee in,place,if anything feels off you get your money,back so there's like zero incentive for,me,to sell you something that doesn't work,so keep an eye on that,and with that i think we've accomplished,the longest intro in the history of this,channel,but i think it was super important so,let's get started,hey jan here codingthen.com let's get,straight to the meta at hand,here's the infrastructure of what we're,building today so we're going to have,the shopify site,we're going to have our local pc and we,will have a dedicated,server where our app runs so for example,this could be,myapp.com and yes you can imagine this,to be just a regular website,and the only thing special about it is,that only shopify sites can log in here,and once they do so they get to their,dashboard which contains all the,functions and numbers and whatnot,and even though this might look similar,to the shopify admin dashboard,we always have to keep in mind it's not,it's myapp.com and it's a completely,detached website,and it only looks similar to create this,cohesive design experience,and like the best user experience and,when someone goes to the admin dashboard,and clicks on apps and then opens our,demo app,what really happens behind the scenes is,all this authentication process,and then shopify just embeds our website,myapp.com,into their website with an iframe,so they just display our website inside,their website,and that way as a user we can kind of,interact with both,and we will get more into the technical,details but for now this will be good,enough to get started,okay now besides that we also need to,prepare a couple of things in advance,and one thing is your shopify partner,account you can sign,up for free and then you also want to,create,a development store that's a store where,you can test your app,mine is called how to write an app and,as you can see,i currently don't have any apps,installed and then the last thing we're,going to need,is the shopify app cli that's an,additional piece of software,that helps to prototype these kinds of,apps and here you can find the,installation process and the,requirements,so for example you need to have ruby,installed on your pc,and don't get confused here we are not,building a ruby on rails app,we are building a node.js and react app,but the app cli is just built on ruby,so in order for us to use that we gotta,have ruby installed,and then you can just follow the,installation process for your operating,system,and just like with every other,installation there are certain things,that can go wrong,certain warnings certain error messages,but then you would just have to research,these,because with every project there's a,certain amount of research involved,and you really have to get into this,problem-solving,engineering type of mindset that's super,important or actually it's a minimum,requirement,and then you're also going to need a,local code editor you can use pretty,much anything except windows notepad,so i'm using visual studio code which is,pretty much industry standard,okay so now with all of that in place i,have a new folder on my desktop,and now i'm gonna open that with visual,studio code this has the main benefit,that as soon as i bring up the terminal,the working directory will be set to my,new folder,so let me show you that so you could,either hit ctrl shift and p,or you could also click on this little,gear icon command palette,and then i want to view the integrated,terminal,so you can see my working directory is,set to desktop slash app,and then as a first command we want to,type shopify,create we want to build a node.js app,now we have to enter an app name so,maybe we could just go with demo app for,now,you can decide whether you want to build,a custom or public app,we will go with public app,now it gives you this url to authorize,with your partner account so let's,follow that,so now i just log into my partner,account,authenticated successful we can now,close this page let's do it,and then you can select the specific,partner account because i have two in,here,so for all the youtube videos it will be,coding with yun and then you want to,select the demo store,so for me that's how to write an,app.myshopify.com,and now we just have to wait for all of,that to finish can take a couple seconds,or even minutes,so i'll see you then and now it already,registered the app,inside our partner dashboard but not,inside our development store yet,so what i want to do next is type,shopify serve,that brings up,ah sorry we have to navigate into our,demo app folder first,so let's do cd demo app,and then let's run shopify server again,so this looks a lot better and what i,was about to explain is,that shopify serve brings up our app,server,and the only difference is that for now,we don't have this myapp.com domain,and we're actually hosting it on our,local pc,but once you deploy the app you want to,push it to heroku,or any other web hoster and here it's,asking us,to create a tunnel to our local pc,because we don't have the public web,server yet so let's hit yes,so now our server is running and we can,install our app by clicking this link,here,and actually this angry url is our,myapp.com domain only looks a bit,different,and you got to use your imagination but,yeah that's the tunnel to your local pc,so let's click on that,so here it redirected me to our,development store and let's go ahead and,install that app,so there we have it our very first,shopify app with node and react,first how cool is that second i could,also show you the iframe,so let's go to inspect and there we have,it,an iframe pointing to our local pc,through the ngrok tunnel and let me also,show you what happens when you try to,bring up this url,outside of a shopify store so let's get,a new incognito,and try to visit that then you would,immediately see,shop undefined and then it can't access,the site,okay so far so good pretty cool but,what's next,you may be asking excellent question and,it really depends on,what you want to do next so,if you never used node.js before i,highly recommend checking out my video,on automated testing frameworks because,there i have like a small introduction,to node and mpm i could tell you more,about the different packages used here,we can talk more about the shopify app,bridge which is used,to enable communication between this,frame and the mainframe,because usually iframes can't easily,communicate with each other,or we could talk about graphql like,making graphql calls with the apollo,client,we could talk about routing with next js,we could talk more about react like how,we can modify the content of this page,so you could add a little test here,and then it would appear right here we,can talk more about polaris which is a,collection of different,react components that will help you to,build these shopify looking interfaces,and elements,or we could also talk more about react,in general,or i could tell you more about the,server side of things,we could set up our own routes and maybe,even build our own api we could talk,about web hooks,so there are a thousand different things,that we could cover and just let me know,what you want to learn next,i also have a few other videos planned,but we can have an app video,in between every now and then would,actually be a lot of fun and then i,would say this was a pretty good start,and i hope that was something and,helpful,if you're looking to become a freelancer,keep an eye on free mode for a more,structured and guided format,and then i also found this very,insightful article on,how to like a youtube video and i don't,think we need this part here,so make sure to check that out and then,i'll see you in the next bye

Congratulation! You bave finally finished reading how to build a shopify plugin and believe you bave enougb understending how to build a shopify plugin

Come on and read the rest of the article!