How to Host Your Shopify App STEP BY STEP | Fly.io, Heroku, and DigitalOcean

hey everyone my name is Alex and today we're going to be taking a look at hosting for your Shopify app it's a necessary step before you can actually launch your app and put it on the App Store and there are a ton of different options for you to choose from so today I'm going to be going over three different options that are really popular and really great and one of them that I use myself personally and a couple of them that are recommended by Shopify in their documentation so the three providers that we're going to be going through today are fly.io Heroku and digital ocean and I'm going to be going through the Shopify documentation with you step by step show you exactly how to do it for each of these services so the very first step and we can just jump right in the very first step is to create a new app and I'm just going to create a new app using the CLI and then we'll take that app we won't customize it or make any code changes or anything but we'll take that up and just go right into hosting so you can see exactly how it's done so the first step when you are creating an app you can do it through either the partner dashboard or directly through the terminal and I prefer doing it through the terminal so let's go ahead and copy this command which is npm init at Shopify app at latest and that will install a new Shopify app uh using the CLI and let's go with just a random name and we're going to be using the node template so we'll wait for that to finish up okay so that has finished up let me move this over here and then I'm just going to go ahead and CD into the new directory just created and then run npm run Dev to do the initial setup of the app and this will get it running locally for us so we want to select yes create it as a new app same name and then it's going to ask us which store we want to use to test out our project okay and then once it finishes doing that Dev startup then it gives you an option to open a directly in your browser let's just open it up just to show you that this is a very default app you see we're installing it on this store here okay and here we see just the default app like I said I haven't made any code changes or anything to it you saw me just install it and open it up and this is what it looks like and this is served just locally off this NG Rock link so what we're going to do right now is take this app and instead of serving it locally off of our machine we're going to host it on these different Services that'll serve the app for us so that we don't have to do anything on our own machine or locally run it or anything and it'll be accessible to everyone at that point so the next thing I'm going to do just to make the steps in the future a bit easier I'm going to create a new repo for this and push it up to GitHub so I'm gonna go to GitHub and just create this new repository for it all right so I got the repo pushed up to GitHub and so now we are ready to actually dive into the documentation and start deploying our app the first service we're going to look at is fly.io and I should mention that fly.io and Heroku are actually the ones that are mentioned in the Shopify docs and they give instructions on how to host and deploy them so they are probably the most popular options we're going to start with fly.io and fly.io is a free option it has a free tier so if you're just starting out you want to push up an MVP and just kind of get something up to test it out then this will be a great option for you so we're on this page to pull your web app in the Shopify Dev docs and I'll put a link in the description to everything we go over today but it's pretty straightforward the first step is set up hosting and the first thing you need to do is install fly CTL and sign up for fly.fly.io account so let's head over to this documentation for fly.io we'll come here so I'm on Mac so I'm going to follow these instructions to install it using Homebrew and if you are on a different operating system Linux Windows they have instructions for you as well alright so now that we have installed fly CTL which is command line utility for fly.o you can go ahead and sign up for fly.io if you have not already and they have a pretty easy instructions here if it's your first time copy this and paste that into your terminal and then it'll help you set up an account with email or GitHub and then once you have that set up and I already have that so I'm just going to go to my dashboard but once you have that set up then we can go back to the documentation for deploying your app on shopify.dev the next step after installing this command line utility uh navigate to your directory we're already there so now we need to run this fly CTL launch command so we'll come over here run that in the terminal and then we'll just kind of do the default options here we don't want to set up any databases right now and we don't want to deploy yet so we'll say no for that okay and then like I said it does have instructions for Heroku as well but we're going to come back to that so now we're just going to move to step two which is retrieving the environment variables so you can just go ahead and copy this and then paste that into your terminal you can also get these from your partner dashboard under the app setup you can see all the API keys and API secrets okay so here are the environment variables for my app you should never expose these keys or Secrets they're obviously here in the video but the app's going to be deleted before this video goes up so now we're going to go to step three which is setting the environment variables so we're going to just basically use those values that we just spit out in the terminal for fly.io there is a fly.tomo file that we need to update in our project and I'm going to do that in vs code so I have a shortcut to open up vs code and this just opens up our code for the app so I'm going to come in here find this fly.tomel file and then you can see there's this section here that says EnV for environment variables and in the documentation it shows you what it should look like and these are the values that we need to add so I'm just going to copy this over put that right there and then switch it up for R values so here we need to switch out the API key so we'll do that here and then Scopes is going to be the same right products the port we're going to leave at 8081 and then for the host you can actually go to your dashboard for fly.io and it should be up here so this this is another app that I have and then this is the one that we just barely set up by launching by using the fly CTL launch command it started setting that up for us so you can find the hostname here it's not deployed yet there's nothing on this but it at least has the host name so we can go ahead and copy that and then put that in our host value here in the fly.tomo file okay so we'll go ahead and save that and then let's go back to the Shopify deploy documentation to see what's next and we need to set the environment secrets so we're going to copy this command head back over to the terminal and then copy the secret and replace this placeholder here with our Shopify API Secret cool okay so now we can move on to the next step which is actually deploying the app so if we come down here to step four it gives us a command that we just throw right into our terminal to actually deploy the application and you can see that one of the arguments here is the Shopify API key so again we can just copy that from right here where it gave it us before and we'll just replace that and we'll let it run and deploy into its thing all right so that has finished looks like it was successful so let's go back to our fly dashboard now and we'll just refresh this page and this is our app it should be hosted so if we click on this link okay this is exactly what you want to see when you open up an embedded app in Shopify without it being actually in the Shopify admin then it'll just give you this message no shot provided so this is a good sign this is exactly what we want to see here so if we go back to our store with the app this is what it was running on before it was running on NG Rock we stopped that server so when I refresh it should just give us an error okay so yeah again that's expected um it can't find the entry NG Rock URL because we have stopped the server so now if you go into your partner's dashboard the next step is to go into your app and switch out the app URLs to our new hosted urls so we'll come in here in this URL section let's come back and copy this new host URL and we'll replace these existing ones the only redirection URL you need by default is the slash API slash off slash callback so we'll leave that in there okay so now when we save that and then we can come back refresh our app page and we should see what we saw before the starter app but this time it will be hosted from the fly.io okay so there we go we see it and then just to make sure that we are seeing the right thing if we come into the network tab and then let's look at this fetch call yeah so we can see it is hitting that new URL we put in so it is hitting our fly dot IO hosted application so that's for fly.io it's all hosted it was completely free to get it set up and started this would be the same process for any application that you have obviously this is a starter one there's no code changes yours will be very different to this but the hosting process will be practically exactly the same you'll probably have some extra environment environment variables and what not to add in there but for the most part you can just follow this documentation exactly and do all the commands and everything and you'll have a hosted app within just a few minutes it took us five to ten minutes to get that all set up all right so now that we have gone through the fly.io setup which is again it's a free they have a free tier so it's a completely free way to get your app hosted and set up let's move on to Heroku now um which again is also documented here in the hosting and deploy documentation on Shopify so it'll be a very similar process we'll go through set up the hosting add the environment variables and deploy it and it'll be pretty quick as well so let's just jump right into it we have the step one setup hosting so we'll scroll down to where it says setup hosting with Heroku this time and we will just go through these steps so the first thing you need to do is make sure that you have the Heroku CLI and Docker installed so the Heroku CLI you can install here for you know Windows Mac OS whatever operating system you have just follow those instructions I do have it installed already so I'm going to skip that step and then whoops for Docker you just want to select the docker desktop version and then you'll want to have that running before we get started with the rest of the steps so you can see I have it running here Docker desktop all right so let's close out of that so once you make sure that you have those two installed then you can follow on with follow along with the rest of the steps let's go to step three we're already in our app directory so now we need to log into the Heroku CLI so we'll go back to our terminal let's clear this out and then we'll just paste in this Heroku login command okay and it'll take us to the browser to log in if you don't have a Heroku account then you'll need to get that set up as well okay so I'm already logged in so it was very quick process let's go back to the documentation okay now we need to log into the Container registry and for the most part again you can just copy these commands and paste them a new terminal this one you want to make sure that your Docker desktop is running before typing this in okay so that login succeeded and then now we're just going to create the app in Heroku paste this in and then just swap out my app name for our app okay and then we'll let that run okay and it created it for us okay so now we're going to go down to step two which is retrieving the environment variables this is the same step that we did before let's put in the terminal here though just so the values we have them right here it'll give us the API key Secret and the Scopes okay so let's continue down to step three uh come down to the Heroku section all right so now we need to go into our code base real quick and add in a heroku.yml file our yaml file so let's pull this up and then we're just going to add a new file here okay and then we'll copy this over and paste that into our new file we're going to replace this placeholder here with our actual Shopify API key save that and then we'll come back and all we're doing here is just basically making the commit since we've added that new file so I'm just going to commit it through the vs code interface and then push that up okay so the next step is setting the environment variables and the documentation shows you how to do it through the terminal you can also do it through your dashboard through the Heroku dashboard which is where I'm going to do it just because it's a bit easier to work with so I'm going to come in here to my account I can open up this is our new app that we just created and then you'll go to settings and then in here it's called config vars so you're going to reveal config vars and then you can go ahead and add in all of those that you need which are host Scopes API key and API Secret so first We'll add in the host and the host is actually going to be this if you scroll down a little bit it gives you the domain for your app right here so this is actually what we're just going to copy over and put that directly in there for the host we'll add that okay the next key we need is scopes so we'll come in here and then that's just going to be right to products we'll add in the Shopify API key and that one let's grab that from our terminal and then the Shopify API secret is going to be the last one that we need in here and again we can just grab that from the terminal okay so those are added um like it says here it already adds the port variable and sets that up so we don't need to add that and the next step is just deploying the app so we'll come down to Heroku and we just need to do this command git push Heroku Main so we'll copy that over come over in the terminal paste that there and then we're just going to wait a few minutes for this to run all right so that has finished now so now we can go back to our Heroku dashboard right here we'll come back to the main page of our app and we can see that it deployed successfully it gives you all the activity here so we can see the build succeeded and it deployed so let's go back to settings just so we can get this URL we'll click on that and again this is exactly what we want to see the no shot provided since we're not opening it in the admin through the embedded app so now that we have that set up our app is hosted on Heroku now and it's hosted at this link right here um so we're gonna do the same thing that we did with the fly Dio hosted um app and we're just going to copy this address this URL and we're going to swap those out in the app URLs in the Shopify Partners dashboard so yeah we're going to remove the fly.io ones and then just add in the Heroku ones and it should work exactly the same it's the same exact app just hosted in two different spots so it should look exactly the same for us so we'll save that we'll come over to our application running on our test store and then clear this out so we can view the network and then we can verify that it is actually coming from Heroku so let's refresh the page Perfect all right so we see the exact same thing and then we can just double check that it is coming from Heroku and there it is you can see our new Heroku URL being used there so again it's the same app just hosted on two different spots right now and all we needed to do was you know a few minutes of setup and then switch out the app urls so you can see how quick it is to really just get started from having your app only locally to get it hosted and taking the next step towards releasing your app it just takes a few minutes and all we did was follow the Shopify documentation and now we have our app hosted on these two different services fly.io and Heroku which again are recommended by Shopify here as examples in their documentation so I did mention the fly.io has a free tier so it's free just to get up and running Heroku unfortunately is not free they used to have a free tier but it's not free anymore and that one will be seven dollars a month on the minimum plan so that's what you'll be looking at which is still you know a really great price for hosting your application considering you could probably get pretty far with just seven dollars a month you could easily make that back if your app if you're charging for your app you can get quite a few merchants on your application without needing to upgrade um for a good while so the last hosting provider we're going to be looking at is digitalocean they are another really popular option and they're I actually use them for a lot of my apps both inside and out of the Shopify ecosystem let's dive into the digital ocean setup now and this one is not documented within Shopify so um we're just going to go through this one together and let's go ahead and go to digitalocean.com if you haven't if you don't have an account just sign up for an account okay once you're signed in you'll see a dashboard that looks like this and then you're going to want to come up here to create and then you'll click on the apps section all right so for digitalocean you do need to have a repo hosted somewhere GitHub is probably what most people will be using and that's what I use so that's where we're going to be pulling the source code from but it does need to be hosted somewhere if this is your first time on digitalocean you'll probably need to hook up your GitHub to the application so that you can give it permissions to access your repo and that will look something like this if you go through the setup for the first time it'll take you to your GitHub and you'll be able to select which repos you wanted to access and then once you set up your permissions it'll take you back to digitalocean and you'll be able to select the repository that you want to access from this drop down here okay so once you have that set up you can go ahead and click next this Auto deploy is a great feature that I would just keep checked just so that every time you push to your main branch then your application is going to just redeploy automatically all right so on this resources tab there are a couple ways to do it typically if I'm just starting out an app and just want to get it up bare minimum you'll see that there's two items here just remove the last one you want to keep the one that says Docker file here and then you can go ahead and click edit on actually edit plan here and then if you go to basic and then you can click this drop down and go to the lowest option which is five dollars a month so that's going to be the minimum that you'll be paying on digitalocean and again five dollars a month even five dollars a month will get you pretty far as far as hosting your app and even getting your app up and running merchants on it I've hosted apps on this five dollar a month plan that are still on there so this will be fine especially for testing in the MVP stage it's totally fine to just stay on the base plan all right so now we're going to go to the next step which is environment variables so this is going to be similar to the other steps where we added in our environment variables they have this bulk editor option where you can just paste it in so let's come back and find where these were given to us and we'll just go ahead and paste that in here and then we'll want to add the host as well and for the host um since it hasn't given us the host uh URL you can use yet you can just use any URL I'm just going to use Google here and then we'll we'll want to change it out basically as soon as this is deployed for the first time it'll give us a URL and so we'll just go through and replace that host environment variable okay so we'll save that click next everything looks good next and then we'll go ahead and create the resources so click that and then now our app is building so we'll wait for that to build and you can go check out the build logs if you want um I have a neat interface you can see all the logs coming out but overall it's a pretty smooth process you just hook it up to your GitHub repo and then since the Shopify apps I'll have a Docker file it'll kind of take care of that and just take only the environment variables and get it set up from there all right so that has finished uh building and deploying and so we can actually come up here and just check out the app again this is exactly what you want to see what we saw in all the other ones um the no shot provided and it now has our host link here so let's go ahead and copy that and then we'll go into the environment variables which is under settings here edit that and then we'll just change out the host to be our new app URL so we'll save that and then it's going to go ahead and push another deployment and so now we can go to our Shopify partners and again just switch out the app URLs for our new app urls just like that we'll save and then we'll wait a minute for this to finish before actually testing it on the app all right so that has finished building again so we can come over here and let's just refresh our app on our test store and make sure that everything's working as expected great okay there we go so our app um again this is exactly what we want to see it's the same app hosted this time on digitalocean and we can verify that coming over here the network yep and we can see it's coming from our digital ocean hosted app now so that was a quick overview of Hosting your Shopify app how to do it we went through step by step for fly.io Heroku and digitalocean and then just a reminder fly.io is free they have a free tier Heroku starts at seven dollars a month and digital ocean starts at five dollars a month they're all really great options so you can test them all out see which one works best for you or there are a ton of other options like I mentioned apart from just these ones that you can choose from as well if this video was helpful for you at all please leave me a comment let me know leave a like and if you want to see more videos like this in the future then go ahead and subscribe to my channel and you can let me know in the comments if you have any other questions related to hosting or anything else there will be links in the description to these three hosting providers that we went over a lot of times they do promos where you can sign up and you get a certain amount of credits for free so definitely be on the lookout for those and for digitalocean I will give a link that will give you a 200 sign up credit for 60 days and then I also get a small credit Kickback from that as well thank you so much for watching and if you have any questions or anything you can leave a comment you can shoot me an email or you can find me on Twitter as well

Channel: Dev With Alex

Views: 9,542

Keywords: Aleksander Vitkin, Coding With Jan, Codingphase, chris the freelancer, getting started with shopify app development, how to build shopify apps, how to make a shopify app, nodejs, react, shopify, shopify app, shopify app dev, shopify app developers, shopify app tutorial, shopify apps, shopify apps 2021, shopify apps how to, shopify coding, shopify developer, shopify devs, shopify tutorial, weeklyhow, build a shopify app, build a shopify app with node and react, shopify structure

Id: HOysnl2Yo4s

Length: 27min 24sec (1644 seconds)

Published: Sat Apr 01 2023