How To Create An App With Windows

Create an app

You're ready to create a new app. You want to set up your development environment so that you can start coding.

In this tutorial, you'll use Shopify CLI to create a Node.js embedded app. Shopify CLI generates starter code for building your app and automates many common development tasks.

Scenario

You want your app to embed in the Shopify admin inside an iframe. Since this is your first time creating a Shopify app, you want to start with some boilerplate code that makes your programming experience easier and more efficient.

By creating an embedded app, you're able to add features to certain parts of Shopify's user interface and online stores. You'll also deliver the best merchant experience because your app will be closely integrated with Shopify.

What you'll learn

After you've finished this tutorial, you'll have accomplished the following:

Set up your local development environment
Generated starting code for building your app
Installed your app on a development store

Screenshot showing a simple embedded app in the Shopify admin

Requirements

You've created a Partner account and a development store.
You understand how apps fit into Shopify and the different types of apps you can build.
You've installed the latest version of Node.js.

Step 1: Install Shopify CLI

Start by installing Shopify CLI on your computer. You can install Shopify CLI on Windows, macOS, or Linux. Use your computer's command line to install Shopify CLI from one of the supported package managers.

Shopify CLI requires Git and Ruby 2.7 or higher to run.

Windows
macOS
Linux

If you want to use Shopify CLI natively on Windows 10, then first make sure that you've installed Ruby+Devkit using RubyInstaller for Windows (version 2.7 or higher).

Alternatively, you can use Shopify CLI using Windows Subsystem for Linux, in which case you need to install the following:

Windows Subsystem for Linux
Ubuntu VM

After you install the prerequisites, you can install Shopify CLI as a Ruby gem using the RubyGems.org package manager. In a new terminal window, navigate to your home directory and run the following command:

Verify the installation

To verify that Shopify CLI is installed properly, run the following command:

The command returns a version number.

Shopify CLI is available for macOS through either RubyGems.org or Homebrew.

RubyGems.org

In a new terminal window, navigate to your home directory and run the following command:

Homebrew

You need to add Shopify's third-party repositories to Homebrew before you can install Shopify CLI.

Verify the installation

To verify that Shopify CLI is installed properly, run the following command:

The command returns a version number.

Shopify CLI is available for Linux distributions through RubyGems.org, as well as through apt or yum.

RubyGems.org

In a new terminal window, navigate to your home directory and run the following command:

apt (Debian, Ubuntu)

On Debian-based Linux systems, Shopify CLI is available to install with apt.

Download the latest Shopify CLI .deb file from the releases page on GitHub. Note the file's location for the next step.
Run the following command. Make sure to replace /path/to/download/shopify-cli-x.y.z.deb with the path to your file's location.

yum (CentOS 8+, Fedora, Red Hat, SUSE Linux)

On RPM-based Linux systems, Shopify CLI is available to install with yum.

Download the latest Shopify CLI .rpm file from the releases page on GitHub. Note the file's location for the next step.
Run the following command. Make sure to replace /path/to/download/shopify-cli-x.y.z.rpm with the path to your file's location.

Verify the installation

To verify that Shopify CLI is installed properly, run the following command:

The command returns a version number.

Step 2: Create a new project

After you've installed Shopify CLI, you're ready to create a new project.

Navigate to the directory where you want to create your project.
Run shopify login. This command authenticates you with Shopify CLI.
Run shopify app create node. This command scaffolds a new Node.js app in a subdirectory and creates your app in the Partner Dashboard.

GIF showing how to create a project

Step 3: Start a local development server

After your app is created, you can work with it by starting a local development server.

Shopify CLI uses ngrok to create a tunnel that allows your app to be accessed using a unique HTTPS URL, which is mandatory when creating an app.

To start a local development server, run the following commands:

Authenticate with ngrok:
Start the server:

GIF showing how to start a local development server

Step 4: Install your app on your development store

With the server running, open the URL that your terminal printed out in the previous step. When you open the URL, you're prompted to install the app on your development store.

GIF showing how to install your app on your development store

You now have a development store running with your new app installed.

Next steps

Start building your app by populating data to test your app against, designing your user interface with Polaris, interacting with Shopify's APIs, and configuring a webhook so that your app stays in sync with changing data.