Skip to content

Commit 71bce0d

Browse files
committed
started new discounts tutorial sample
1 parent 2112628 commit 71bce0d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+10660
-0
lines changed

sample-apps/discounts/.dockerignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
web/node_modules
2+
web/frontend/node_modules
3+
web/frontend/dist

sample-apps/discounts/.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Environment Configuration
2+
.env
3+
.env.*
4+
5+
# Dependency directory
6+
node_modules
7+
8+
# Test coverage directory
9+
coverage
10+
11+
# Ignore Apple macOS Desktop Services Store
12+
.DS_Store
13+
14+
# Logs
15+
logs
16+
*.log
17+
18+
# ngrok tunnel file
19+
config/tunnel.pid
20+
21+
# vite build output
22+
dist/
23+
24+
# extensions build output
25+
extensions/*/build
26+
27+
# Node library SQLite database
28+
web/database.sqlite

sample-apps/discounts/.npmrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
engine-strict=true
2+
auto-install-peers=true
3+
shamefully-hoist=true
4+
@shopify:registry=https://registry.npmjs.org
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"recommendations": [
3+
"shopify.polaris-for-vscode"
4+
]
5+
}

sample-apps/discounts/Dockerfile

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
FROM node:18-alpine
2+
3+
ARG SHOPIFY_API_KEY
4+
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
5+
EXPOSE 8081
6+
WORKDIR /app
7+
COPY web .
8+
RUN npm install
9+
RUN cd frontend && npm install && npm run build
10+
CMD ["npm", "run", "serve"]

sample-apps/discounts/README.md

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
# Shopify App Template - Node
2+
3+
This is a template for building a [Shopify app](https://shopify.dev/apps/getting-started) using Node and React. It contains the basics for building a Shopify app.
4+
5+
Rather than cloning this repo, you can use your preferred package manager and the Shopify CLI with [these steps](#installing-the-template).
6+
7+
## Benefits
8+
9+
Shopify apps are built on a variety of Shopify tools to create a great merchant experience. The [create an app](https://shopify.dev/apps/getting-started/create) tutorial in our developer documentation will guide you through creating a Shopify app using this template.
10+
11+
The Node app template comes with the following out-of-the-box functionality:
12+
13+
- OAuth: Installing the app and granting permissions
14+
- GraphQL Admin API: Querying or mutating Shopify admin data
15+
- REST Admin API: Resource classes to interact with the API
16+
- Shopify-specific tooling:
17+
- AppBridge
18+
- Polaris
19+
- Webhooks
20+
21+
## Tech Stack
22+
23+
This template combines a number of third party open-source tools:
24+
25+
- [Express](https://expressjs.com/) builds the backend.
26+
- [Vite](https://vitejs.dev/) builds the [React](https://reactjs.org/) frontend.
27+
- [React Router](https://reactrouter.com/) is used for routing. We wrap this with file-based routing.
28+
- [React Query](https://react-query.tanstack.com/) queries the Admin API.
29+
30+
The following Shopify tools complement these third-party tools to ease app development:
31+
32+
- [Shopify API library](https://github.com/Shopify/shopify-node-api) adds OAuth to the Express backend. This lets users install the app and grant scope permissions.
33+
- [App Bridge React](https://shopify.dev/apps/tools/app-bridge/getting-started/using-react) adds authentication to API requests in the frontend and renders components outside of the App’s iFrame.
34+
- [Polaris React](https://polaris.shopify.com/) is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
35+
- [Custom hooks](https://github.com/Shopify/shopify-frontend-template-react/tree/main/hooks) make authenticated requests to the Admin API.
36+
- [File-based routing](https://github.com/Shopify/shopify-frontend-template-react/blob/main/Routes.jsx) makes creating new pages easier.
37+
38+
## Getting started
39+
40+
### Requirements
41+
42+
1. You must [download and install Node.js](https://nodejs.org/en/download/) if you don't already have it.
43+
1. You must [create a Shopify partner account](https://partners.shopify.com/signup) if you don’t have one.
44+
1. You must [create a development store](https://help.shopify.com/en/partners/dashboard/development-stores#create-a-development-store) if you don’t have one.
45+
46+
### Installing the template
47+
48+
This template can be installed using your preferred package manager:
49+
50+
Using yarn:
51+
52+
```shell
53+
yarn create @shopify/app
54+
```
55+
56+
Using npm:
57+
58+
```shell
59+
npm init @shopify/app@latest
60+
```
61+
62+
Using pnpm:
63+
64+
```shell
65+
pnpm create @shopify/app@latest
66+
```
67+
68+
This will clone the template and install the required dependencies.
69+
70+
#### Local Development
71+
72+
[The Shopify CLI](https://shopify.dev/apps/tools/cli) connects to an app in your Partners dashboard. It provides environment variables, runs commands in parallel, and updates application URLs for easier development.
73+
74+
You can develop locally using your preferred package manager. Run one of the following commands from the root of your app.
75+
76+
Using yarn:
77+
78+
```shell
79+
yarn dev
80+
```
81+
82+
Using npm:
83+
84+
```shell
85+
npm run dev
86+
```
87+
88+
Using pnpm:
89+
90+
```shell
91+
pnpm run dev
92+
```
93+
94+
Open the URL generated in your console. Once you grant permission to the app, you can start development.
95+
96+
## Deployment
97+
98+
### Application Storage
99+
100+
This template uses [SQLite](https://www.sqlite.org/index.html) to store session data. The database is a file called `database.sqlite` which is automatically created in the root. This use of SQLite works in production if your app runs as a single instance.
101+
102+
The database that works best for you depends on the data your app needs and how it is queried. You can run your database of choice on a server yourself or host it with a SaaS company. Here’s a short list of databases providers that provide a free tier to get started:
103+
104+
| Database | Type | Hosters |
105+
| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
106+
| MySQL | SQL | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-mysql), [Planet Scale](https://planetscale.com/), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/mysql) |
107+
| PostgreSQL | SQL | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-postgresql), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/postgres) |
108+
| Redis | Key-value | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-redis), [Amazon MemoryDB](https://aws.amazon.com/memorydb/) |
109+
| MongoDB | NoSQL / Document | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-mongodb), [MongoDB Atlas](https://www.mongodb.com/atlas/database) |
110+
111+
To use one of these, you need to change your session storage configuration. To help, here’s a list of [SessionStorage adapter packages](https://github.com/Shopify/shopify-api-js/tree/main/docs/usage/session-storage.md).
112+
113+
### Build
114+
115+
The frontend is a single page app. It requires the `SHOPIFY_API_KEY`, which you can find on the page for your app in your partners dashboard. Paste your app’s key in the command for the package manager of your choice:
116+
117+
Using yarn:
118+
119+
```shell
120+
cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME yarn build
121+
```
122+
123+
Using npm:
124+
125+
```shell
126+
cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME npm run build
127+
```
128+
129+
Using pnpm:
130+
131+
```shell
132+
cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME pnpm run build
133+
```
134+
135+
You do not need to build the backend.
136+
137+
## Hosting
138+
139+
When you're ready to set up your app in production, you can follow [our deployment documentation](https://shopify.dev/apps/deployment/web) to host your app on a cloud provider like [Heroku](https://www.heroku.com/) or [Fly.io](https://fly.io/).
140+
141+
When you reach the step for [setting up environment variables](https://shopify.dev/apps/deployment/web#set-env-vars), you also need to set the variable `NODE_ENV=production`.
142+
143+
## Known issues
144+
145+
### Hot module replacement and Firefox
146+
147+
When running the app with the CLI in development mode on Firefox, you might see your app constantly reloading when you access it.
148+
That happened in previous versions of the CLI, because of the way HMR websocket requests work.
149+
150+
We fixed this issue with v3.4.0 of the CLI, so after updating it, you can make the following changes to your app's `web/frontend/vite.config.js` file:
151+
152+
1. Change the definition `hmrConfig` object to be:
153+
154+
```js
155+
const host = process.env.HOST
156+
? process.env.HOST.replace(/https?:\/\//, "")
157+
: "localhost";
158+
159+
let hmrConfig;
160+
if (host === "localhost") {
161+
hmrConfig = {
162+
protocol: "ws",
163+
host: "localhost",
164+
port: 64999,
165+
clientPort: 64999,
166+
};
167+
} else {
168+
hmrConfig = {
169+
protocol: "wss",
170+
host: host,
171+
port: process.env.FRONTEND_PORT,
172+
clientPort: 443,
173+
};
174+
}
175+
```
176+
177+
1. Change the `server.host` setting in the configs to `"localhost"`:
178+
179+
```js
180+
server: {
181+
host: "localhost",
182+
...
183+
```
184+
185+
### I can't get past the ngrok "Visit site" page
186+
187+
When you’re previewing your app or extension, you might see an ngrok interstitial page with a warning:
188+
189+
```text
190+
You are about to visit <id>.ngrok.io: Visit Site
191+
```
192+
193+
If you click the `Visit Site` button, but continue to see this page, then you should run dev using an alternate tunnel URL that you run using tunneling software.
194+
We've validated that [Cloudflare Tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/run-tunnel/trycloudflare/) works with this template.
195+
196+
To do that, you can [install the `cloudflared` CLI tool](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/), and run:
197+
198+
```shell
199+
# Note that you can also use a different port
200+
cloudflared tunnel --url http://localhost:3000
201+
```
202+
203+
Out of the logs produced by cloudflare you will notice a https URL where the domain ends with `trycloudflare.com`. This is your tunnel URL. You need to copy this URL as you will need it in the next step.
204+
205+
```shell
206+
2022-11-11T19:57:55Z INF Requesting new quick Tunnel on trycloudflare.com...
207+
2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+
208+
2022-11-11T19:57:58Z INF | Your quick Tunnel has been created! Visit it at (it may take some time to be reachable): |
209+
2022-11-11T19:57:58Z INF | https://randomly-generated-hostname.trycloudflare.com |
210+
2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+
211+
```
212+
213+
Below you would replace `randomly-generated-hostname` with what you have copied from the terminal. In a different terminal window, navigate to your app's root and with the URL from above you would call:
214+
215+
```shell
216+
# Using yarn
217+
yarn dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
218+
# or using npm
219+
npm run dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
220+
# or using pnpm
221+
pnpm dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
222+
```
223+
224+
## Developer resources
225+
226+
- [Introduction to Shopify apps](https://shopify.dev/apps/getting-started)
227+
- [App authentication](https://shopify.dev/apps/auth)
228+
- [Shopify CLI](https://shopify.dev/apps/tools/cli)
229+
- [Shopify API Library documentation](https://github.com/Shopify/shopify-api-js#readme)

sample-apps/discounts/SECURITY.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Security Policy
2+
3+
## Supported versions
4+
5+
### New features
6+
7+
New features will only be added to the master branch and will not be made available in point releases.
8+
9+
### Bug fixes
10+
11+
Only the latest release series will receive bug fixes. When enough bugs are fixed and its deemed worthy to release a new gem, this is the branch it happens from.
12+
13+
### Security issues
14+
15+
Only the latest release series will receive patches and new versions in case of a security issue.
16+
17+
### Severe security issues
18+
19+
For severe security issues we will provide new versions as above, and also the last major release series will receive patches and new versions. The classification of the security issue is judged by the core team.
20+
21+
### Unsupported Release Series
22+
23+
When a release series is no longer supported, it's your own responsibility to deal with bugs and security issues. If you are not comfortable maintaining your own versions, you should upgrade to a supported version.
24+
25+
## Reporting a bug
26+
27+
All security bugs in shopify repositories should be reported to [our hackerone program](https://hackerone.com/shopify)
28+
Shopify's whitehat program is our way to reward security researchers for finding serious security vulnerabilities in the In Scope properties listed at the bottom of this page, including our core application (all functionality associated with a Shopify store, particularly your-store.myshopify.com/admin) and certain ancillary applications.
29+
30+
## Disclosure Policy
31+
32+
We look forward to working with all security researchers and strive to be respectful, always assume the best and treat others as peers. We expect the same in return from all participants. To achieve this, our team strives to:
33+
34+
- Reply to all reports within one business day and triage within two business days (if applicable)
35+
- Be as transparent as possible, answering all inquires about our report decisions and adding hackers to duplicate HackerOne reports
36+
- Award bounties within a week of resolution (excluding extenuating circumstances)
37+
- Only close reports as N/A when the issue reported is included in Known Issues, Ineligible Vulnerabilities Types or lacks evidence of a vulnerability
38+
39+
**The following rules must be followed in order for any rewards to be paid:**
40+
41+
- You may only test against shops you have created which include your HackerOne YOURHANDLE @ wearehackerone.com registered email address.
42+
- You must not attempt to gain access to, or interact with, any shops other than those created by you.
43+
- The use of commercial scanners is prohibited (e.g., Nessus).
44+
- Rules for reporting must be followed.
45+
- Do not disclose any issues publicly before they have been resolved.
46+
- Shopify reserves the right to modify the rules for this program or deem any submissions invalid at any time. Shopify may cancel the whitehat program without notice at any time.
47+
- Contacting Shopify Support over chat, email or phone about your HackerOne report is not allowed. We may disqualify you from receiving a reward, or from participating in the program altogether.
48+
- You are not an employee of Shopify; employees should report bugs to the internal bug bounty program.
49+
- You hereby represent, warrant and covenant that any content you submit to Shopify is an original work of authorship and that you are legally entitled to grant the rights and privileges conveyed by these terms. You further represent, warrant and covenant that the consent of no other person or entity is or will be necessary for Shopify to use the submitted content.
50+
- By submitting content to Shopify, you irrevocably waive all moral rights which you may have in the content.
51+
- All content submitted by you to Shopify under this program is licensed under the MIT License.
52+
- You must report any discovered vulnerability to Shopify as soon as you have validated the vulnerability.
53+
- Failure to follow any of the foregoing rules will disqualify you from participating in this program.
54+
55+
\*\* Please see our [Hackerone Profile](https://hackerone.com/shopify) for full details
56+
57+
## Receiving Security Updates
58+
59+
To receive all general updates to vulnerabilities, please subscribe to our hackerone [Hacktivity](https://hackerone.com/shopify/hacktivity)
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/target
2+
Cargo.lock
3+
.output.graphql
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
[package]
2+
name = "product-discount"
3+
version = "1.0.0"
4+
edition = "2021"
5+
6+
[dependencies]
7+
serde = { version = "1.0.13", features = ["derive"] }
8+
serde_json = "1.0"
9+
shopify_function = { version = "0.2.4" }
10+
graphql_client = { version = "0.12.0" }
11+
12+
[profile.release]
13+
lto = true
14+
opt-level = 'z'
15+
strip = true
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Shopify Function development with Rust
2+
3+
## Dependencies
4+
5+
- [Install Rust](https://www.rust-lang.org/tools/install)
6+
- On Windows, Rust requires the [Microsoft C++ Build Tools](https://docs.microsoft.com/en-us/windows/dev-environment/rust/setup). Be sure to select the _Desktop development with C++_ workload when installing them.
7+
- Install [`cargo-wasi`](https://bytecodealliance.github.io/cargo-wasi/)
8+
- `cargo install cargo-wasi`
9+
10+
## Building the function
11+
12+
You can build this individual function using `cargo wasi`.
13+
14+
```shell
15+
cargo wasi build --release
16+
```
17+
18+
The Shopify CLI `build` command will also execute this, based on the configuration in `shopify.function.extension.toml`.

0 commit comments

Comments
 (0)