The ecommerce market is growing. And there are a lot of ideas coming up for building online stores. The demand for creating digital products is increasing and one of the easiest ways to develop them is with Shopify. In this guide, we tell you how to build your first Shopify app in 4 steps.
Before starting
What if you have that cool solution when your store is one in a million and you want to share it with the world? And, why not get some money out of this cool solution?
Well, if you are here, I suppose you know about Shopify App Store. But if you don’t, you can learn more about it in this post.
Talk is cheap! Show me the code…
Let’s get started with the process.
Step 1
For this process, we will use NodeJS. First, be sure you have it. If you don’t, get it here.
node -v Now, create and navigate into a folder to store your app locally.
cd my_shopify_app Then, start a new Node project. This will create your package.json file.
npm init -y Ok, so far there is nothing strange. Now, let’s create our project. We will use React for the frontend, but you can use some other options. Shopify uses React when creating apps, so we are working based on the recommended stack. Run the following:
npm i --save react react-dom next This command will create a base structure to follow in your new app. As you can see, we are using NextJS oo, a very cool framework to work with React. 😎
By using Next, your app routing will be easier as you can create the starting page for your project really fast. You just have to create this route in your project folder:
/pages/index.js
Time to test our app. To do so, add the run commands into your package.json file
/package.json
Then run:
npm run dev
If all this works you will display your app at http://localhost:3000/
Step 2
Ok, at this point we can test our app. The next step is to embed our app in Shopify.
You can deploy your app into your favorite hosting or server, but let’s connect your local app to the store for testing cases.
For this, we can use Ngrok. You can get it here or directly install it by using the following command:
npm install ngrok -g
Now, let’s run Ngrok in the app port. For this example, we are using the 3000:
ngrok http 3000
Or, if you download the file, go to the directory and run the script :
~home/Downloads/./ngrok http 3000
Cool! Now we have a local environment ready to be displayed in our store.
Step 3
Now, we need to set up our app in the store. To do this, you need a Shopify account as a Partner and a store already created.
We will need to get keys from Shopify to allow access to our app. For this, we need to go to Apps > Create App, and select your preferred option.
In order to continue with the setup process just select one of the following options. Then, add the public URL from Ngrok. It is important to add the secure one and an URL redirection because here you will set up your app.
We will use /auth/callback
We just created our custom app!!
Step 4
Ok. Now let’s test our app.
Do you remember the auth callback? It is time to finish this setting.
In your app, create an .env file and add the following.
You can get the keys from your app details page.
For the authentication of the app, Shopify recommends using Koa as a router for Node. But, you can use your favorite one; let’s add the required dependencies.
npm install --save koa @shopify/koa-shopify-auth dotenv @koa/router@8.0.8 isomorphic-fetch
We need to create a Node server to run the app, so create a server.js file into your root folder.
This file will look like this one.
Update your package.json to run the server.
Perfect, we can test our app now in a store.
Select the store for testing.
If all works, you will see this screen.
Note: this screen is displayed because we don’t create routes, or views, only the installation.
How to be sure about my app is installed, go to your store, and Apps section.
Perfect!! Your first Shopify App is ready to get more skills.
You can get more details about Shopify Apps on their official page
Thanks for reading 🙂
