Shopify made in incredibly easy for you to create a shopify app in 2022. All you have to do is update your shopify cli and run the latest version. You can checkout you shopify CLI version by typing in shopify version in your terminal. If you run version 2.7.3 or higher then you can be sure that the shopify app CLI is available to you.
Now cd into the directory where you want to install your app. Now just type in
this will create a new laravel project. Shopify also provides the ability to create a node.js project or a ruby project right from the CLI!
You might think that you can instantly open your app by typing in shopify app open. But unfortunately that won't work yet. Some configuration is still necessary.
First you have to make sure that your ngrok connection is authenticated. So you will have to create an account and open your dashboard at ngrok. In there you can navigate to your Auth token and copy that value.
Now go back to your terminal and type in
Now your ngrok connection is authenticated. Your shopify application needs ngrok to connect to your shop. Now you can start your app by typing in
This command will automatically start a new tunnel via ngrok and start a local development server.
The CLI will ask you if you want to update your application url. If you have no other reason why you shouldn't update your app url, then click yes.
This step is important, because every time you restart your application you will get a new ngrok-url. This means your local application is now reachable under a new url. That's why you would have to update your app url in your partners dashboard again. But the shopify CLI will do that for you automatically.
Your terminal should now look something like this:
If you press command or ctrl and click on the link in the console then you will be taken to installation window of shopify. That page will look something like this:
If you click on install unlisted app then you should see something like this:
Congrats! You just created a shopify app in a matter of minutes.
https://l4webdesign.de/wp-content/uploads/2021/12/onur-binay-aJE97FULn_g-unsplash.jpg12801920LeeKlopfershttps://l4webdesign.de/wp-content/uploads/2020/07/L4_Bildmarke_4C_Türkis.pngLeeKlopfers2021-12-27 19:01:172022-01-12 17:19:37How to create a shopify app in 2022
You’ve made it! You successfully created your shopify app. Now it’s time to deploy it! I want to write a step by step guide about laravel app deployment. We will deploy an app to heroku which is completely free.
there are some prerequisits for you to follow along:
If you take a look at the Procfile, you can see that we are referencing a nginx_app.conf file. We also have to create that and set it up
2. Setting up nginx config file
type touch nginx_app.conf to create the config file. Then paste in these settings:
3. Login to Heroku
To log into Heroku, type heroku login. Your browser will open and you will be redirected to a login page where you can enter your credentials. If everything worked then you’re logged in and you can now use the heroku CLI.
4. Create heroku application
Let’s switch back to our terminal so we can use the heroku-cli. As a side note: we are still at the root of our project. type heroku create name-of-app. If you don’t put a name for the app, Heroku will create a random name and URL for it. It should look something like this:
Now if you go to your dashboard on heroku you can see that your app was created succesully.
If you type in git remote -v then you will see, that heroku has already created a git repo for you.
Now any time you will push to that repo, heroku will trigger a new deployment. In this guide we will push to herokus repo directly, but it is also possibe to connect your github account with heroku. That way you can always push to your github repo and it will trigger a deployment as well.
5. Push your code to Heroku
Push your code from the command line just like you would push it to github, but instead of the remote origin, push your changes to the remote heroku branch:
notice the flag --allow-empty This might come in handy at some time, when you want to trigger a deployment, but you haven’t made any changes to your code.
6. Checkout and debug deployed app
Your app should be deployed now, so let’s check it out! go to https://l4-shopify-app.herokuapp.com/ and take a look! You should now see something like this:
This is good and bad at the same time. It’s good because the deployment worked but it’s bad because the app is not running yet. In order to see what causes our error, we can add APP_DEBUG=true to our .env file.
Important: when you copy all of your .env files, make sure that you update your APP_URL. Also make sure that you enter the correct values for SHOPIFY_API_KEY and SHOPIFY_API_SECRET. Otherwise the hmac will not be calculated correctly and you will see an error.
There are two ways to set up your .env file. Either on your heroku dashboard, or right on your CLI:
Edit .env on heroku Dashboard: From your dashboard, navigate to Settings and click Reveal Config Vars. Now you can set up all your environment variables.
Edit .env on CLI If you prefer the CLI you can use the command heroku config:add ENV_CONFIG=value So in this example I could have typed in
heroku config:add APP_DEBUG=true
This will give you the same results. If you want to add a little vim magic, you could add the command heroku config:add to the beginning of every line (checkout How to insert text at beginning of a multi-line selection in vi/Vim ) and you would have a script to add all of your environment variables.
7. Create Database
If we refresh our app on heroku we will see the following error page:
It says that the connection was refused. That happened because we haven’t set up a database yet. So let’s do this right now.
If you go to Resources you can search for resources for your app. Here you can search for your database. You can chose any database you want, like MySQL, MariaDB, MongoDB. I would recommend to use Heroku Postgres since they provide best offer. Here you can use up to 1GB of storage which I haven’t seen on any of the other databases.
Add this add-on and you will see, that postgres is now attached as your database.
8. Database credentials
In order to set up our database we need setup our database credentials. We will get all of the required properties by typing heroku pg:credentials:url in the command line.
We can now copy and paste all of the credentials to our environment variables. Remember how we did it in step 6a) or 6b) ?
Remember to add DB_CONNECTION=pgsql to your environment variables, since this was not on the output of our terminal.
You now have two options to create your migration:
run heroku run php artisan migrate --seed
run heroku run bash -a app-name Now you have access to the bash of your app. from there you can now run php artisan migrate --seed as well.
10. Create a public app at shopify dashboard
Set up a public app in shopify. If you don’t know how that is done, then you can watch my video here or read my article.
Don't forget to setup all of the environment variables in your heroku app.
11. You’re done 🎉
Congrats! You deployed your app to heroku!
You should now see your embedded shopify app if you install your app in a development store
https://l4webdesign.de/wp-content/uploads/2021/12/L4-Webdesign-shopify-app-deployment-heroku.jpeg12801920LeeKlopfershttps://l4webdesign.de/wp-content/uploads/2020/07/L4_Bildmarke_4C_Türkis.pngLeeKlopfers2021-12-03 17:55:002021-12-06 22:43:08How to deploy a Laravel app to Heroku in 10 steps
We may request cookies to be set on your device. We use cookies to let us know when you visit our websites, how you interact with us, to enrich your user experience, and to customize your relationship with our website.
Click on the different category headings to find out more. You can also change some of your preferences. Note that blocking some types of cookies may impact your experience on our websites and the services we are able to offer.
Essential Website Cookies
These cookies are strictly necessary to provide you with services available through our website and to use some of its features.
Because these cookies are strictly necessary to deliver the website, refusing them will have impact how our site functions. You always can block or delete cookies by changing your browser settings and force blocking all cookies on this website. But this will always prompt you to accept/refuse cookies when revisiting our site.
We fully respect if you want to refuse cookies but to avoid asking you again and again kindly allow us to store a cookie for that. You are free to opt out any time or opt in for other cookies to get a better experience. If you refuse cookies we will remove all set cookies in our domain.
We provide you with a list of stored cookies on your computer in our domain so you can check what we stored. Due to security reasons we are not able to show or modify cookies from other domains. You can check these in your browser security settings.
Google Analytics Cookies
These cookies collect information that is used either in aggregate form to help us understand how our website is being used or how effective our marketing campaigns are, or to help us customize our website and application for you in order to enhance your experience.
If you do not want that we track your visit to our site you can disable tracking in your browser here:
Other external services
We also use different external services like Google Webfonts, Google Maps, and external Video providers. Since these providers may collect personal data like your IP address we allow you to block them here. Please be aware that this might heavily reduce the functionality and appearance of our site. Changes will take effect once you reload the page.
Google Webfont Settings:
Google Map Settings:
Google reCaptcha Settings:
Vimeo and Youtube video embeds:
Other cookies
The following cookies are also needed - You can choose if you want to allow them: