https://github.com/bluebeel/nextjs-shopify

This repository contains the app without webhook for the Build a Shopify app with Node and React tutorial.
https://github.com/bluebeel/nextjs-shopify

nextjs shopify shopify-app shopify-app-bridge

Last synced: 2 months ago
JSON representation

This repository contains the app without webhook for the Build a Shopify app with Node and React tutorial.

• Host: GitHub
• URL: https://github.com/bluebeel/nextjs-shopify
• Owner: bluebeel
• License: mit
• Created: 2020-12-06T17:25:36.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2022-04-05T16:40:22.000Z (over 3 years ago)
• Last Synced: 2025-03-27T19:14:53.853Z (9 months ago)
• Topics: nextjs, shopify, shopify-app, shopify-app-bridge
• Language: JavaScript
• Homepage: nextjs-shopify-bluebeel.vercel.app
• Size: 439 KB
• Stars: 74
• Watchers: 1
• Forks: 24
• Open Issues: 4
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# shopify-nextjs

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)

This repository contains the app without webhook for the [Build a Shopify app with Node and React](https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react) tutorial.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fbluebeel%2Fnextjs-shopify&env=NEXT_PUBLIC_HOST,HOST,SHOPIFY_API_SECRET,SHOPIFY_API_KEY&envDescription=Your%20shopify%20API%20Key%20%26%20Secret%20and%20the%20public%20url%20of%20your%20vercel%20deployement%20or%20domain%20name%20of%20your%20app)

## Using demo app

If you plan to use this completed app, then make sure that you first complete these setup instructions:

1. [Install the latest stable version of Node.js.](https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/set-up-your-app#install-the-latest-stable-version)

2. Install npm packages (run: npm install).

3. [Expose your dev environment.](https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify#expose-your-dev-environment)

4. [Get a Shopify API key and Shopify API secret key.](https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify#get-a-shopify-api-key)

5. [Add the Shopify API key and Shopify API secret key.](https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify#add-the-shopify-api-key)

6. Add `HOST='http://{your_forwarding_id}.ngrok.io'` 

7. Start your app (run: npm run dev).

8. [Authenticate and test your app.](https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify#authenticate-and-test)

9. [Set up your app navigation.](https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris#set-up-your-app-navigation)

10. [Add your ngrok url as Host.](https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/charge-a-fee-using-the-billing-api#set-up)