Build a Shopify App with Remix Template Walkthrough

Summary

The provided content is a tutorial on how to build a Shopify app using the newly released Remix Template, which simplifies the development process.

Abstract

Shopify's Remix Template has been introduced as a significant advancement for developers, aiming to streamline the creation of Shopify apps. The tutorial guides developers through the necessary steps, starting with setting up a Shopify Partner account and a development store, to installing essential tools like Node.js, npm, Git, and a compatible web browser. It details the initialization of a Shopify app using the @shopify/app package, the setup process within the project directory, and the configuration of the app's URL. The guide concludes with instructions for previewing the app, installing it on a development store, and confirming its successful creation.

Opinions

The author expresses that the Remix Template represents a "significant breakthrough" for Shopify app development, suggesting a strong endorsement of the tool's impact.
The tutorial emphasizes the ease of creating a Shopify app with the Remix Template by providing a step-by-step walkthrough and screenshots for clarity.
The author's choice to include specific software versions indicates a preference for up-to-date development environments to ensure compatibility and optimal performance.
By guiding the reader through the installation process and providing visual aids, the author conveys a user-friendly approach to app development, potentially reducing barriers for new developers.
The use of imperative verbs like "Let’s create" and "Go to the directory" reflects an encouraging and instructive tone, suggesting the author's intent to actively engage and support the reader throughout the development process.

Pre Requirements

You’ve created a Partner account and a development store.

You’ve installed Node.js 18 or higher.

You’ve installed a Node.js package manager: Here we are going to use npm

You’ve installed Git 2.28.0 or higher.

You’re using the latest version of Chrome or Firefox.

npm init @shopify/app@latest

When you run the above command you will be prompted several questions. Then a basic Shopify app will be created. Following is the screenshot of questions and answers I gave.

Creating Shopify App

Then go to the directory with your project name you gave above. In my case, It is remix-quill-rich-text-editor.

Then run

cd remix-quill-rich-text-editor 
npm run dev

It will again asks you few questions. Remember to create this as a new app and also choose to automatically update the app’s URL. Following is the answers I gave while running the above command.

You will be prompted a Preview URL. Press p to follow that URL.

The You will be asked to install the app. Click on Install app.

Install app prompt

After installing you will be prompted to this screen.

After installing the app.

Hurrayy… You have created a new Shopify app.