Overview

This document provides an analysis of a deprecated project called “Remix Shopify App”. The project has been deprecated by Shopify, and they have released an official remix stack for apps. The deprecated project was an all-in-one template for getting started with developing Shopify apps using the Remix.run framework.

Features

• Shopify Polaris react library
• OAuth 2.0 authorization flow for issuing access tokens on users
• Code formatting with Prettier
• Linting with ESLint
• Static types with TypeScript
• Docker and docker-compose.yaml file for starting an ngrok container
• Web server at localhost:4040 for monitoring the ngrok service

Installation

1. Obtain an ngrok auth token and set it in the .env file. You can use the .env.example file as an example.

   NGROK_SUBDOMAIN=myfoobar
   

2. Set your SHOPIFY_API_KEY and SHOPIFY_API_SECRET in the .env file. You can use the .env.example file as an example.

3. Replace the SHOPIFY_APP_PERMISSIONS value in the .env file with the required permissions for your app. Write them in the following format:

   SHOPIFY_APP_PERMISSIONS=read_products,write_products
   

4. Run the first build:

   npm run build
   

5. Start the development server:

   npm run dev
   

6. Type checking: To run type checking across the whole project, run the following command:

   npm run type-check
   

7. Linting: This project uses ESLint for linting. The configuration can be found in the .eslintrc.js file.

8. Automated formatting: Prettier is used for auto-formatting in this project. It is recommended to install an editor plugin, such as the VSCode Prettier plugin, to enable auto-formatting on save. You can also run the following command to format all files in the project:

   npm run format
   

Summary

The “Remix Shopify App” project has been deprecated by Shopify. It provided a template for developing Shopify apps using the Remix.run framework. The project included features such as the Shopify Polaris react library, OAuth 2.0 authorization flow, code formatting with Prettier, linting with ESLint, static types with TypeScript, and Docker support. The installation guide provided instructions for setting up the project and recommended additional configurations and tools for optimal development experience.