⚠️ This project is deprecated.

Shopify released the official remix stack for apps, you can find it here.

This project is now deprecated.

All in one Remix.run template to get started with Shopify App's.

Learn more about Remix Stacks.

npx create-remix@latest --template nullndr/remix-shopify

• Shopify Polaris react library
• OAuth 2.0 authorization flow to issue access tokens on users
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript

The docker-compose.yaml file starts an ngrok container.

For this you need to get an ngrok auth token and set it in your .env file (you can use the .env.example file as example).

The NGROK_SUBDOMAIN is your subdomain for the ngrok.io domain, for example if you set NGROK_SUBDOMAIN=myfoobar your app will be accessible at myfoobar.ngrok.io.

This service starts also a web server at localhost:4040 to monitor your ngrok service.

1. Write your SHOPIFY_API_KEY and your SHOPIFY_API_SECRET in the .env file (you can use the .env.example file as example).

2. Replace the SHOPIFY_APP_PERMISSIONS value in the .env file with the permissions your app needs.

Remember to write them with the following format:

SHOPIFY_APP_PERMISSIONS="read_customers,write_customers"

3. Run the first build:

   npm run build

4. Start dev server:

   npm run dev

This project uses TypeScript.

It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete.

To run type checking across the whole project, run the following:

npm run typecheck

This project uses ESLint for linting.

You can find it's configurations in .eslintrc.js.

We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.