running command npm run dev throws this error

ERROR in ./~/@shopify/polaris/styles.css
Module parse failed: H:\Samples\Shopify\shopify-node-app-master\node_modules\@shopify\polaris\styles.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @-webkit-keyframes Polaris-global--skeletonShimmerAnimation{
|   0%{
|     opacity:0.45; }
 @ multi react-hot-loader/patch webpack-hot-middleware/client @shopify/polaris/styles.css ./client/index.js

We need some internal developers to take the completed boilerplate and README for a spin.
@jamiemtdwyer can you start looking around for some people who might be interested?

We will ask for feedback after the Boilerplate Beta milestone is complete.

We need a production webpack config that actually builds out the bundles. I think it needs to be for the beta.

Use redux-thunk?

title

Right now, if you execute yarn run pretty, it will only target files at the second depth level of client and server`.

For example:
client/store/index.js gets processed because it is two levels deep
client/App.js **does not` get processed because it is one level deep

Here is the weird part. If you test the glob pattern in the shell it seems to be fine:

➜  shopify-node-app git:(master) echo {client,bin,config,server}/**/*.js
client/App.js client/actions/index.js client/index.js client/store/index.js bin/www.js config/webpack.config.js server/index.js server/persistentStore/index.js server/routes/shopifyApiProxy.js server/routes/shopifyAuth.js

What do we need to do to make this thing recurse properly? This is driving me insane.

cc @kevinhughes27 @TheMallen

We should add CI to increase our confidence when merging

We still need to write tests #11 but we could leverage CI for things like Yarn check #59 as well.

We should hide our data implementation behind a repository pattern if we can.

It might also be worth it to switch our default implementation to sequelize.

We need to set an explicit react-hot-loader version so that it doesn't annoyingly ask about which version you want every time you yarn install

I'm adding it to the beta milestone because I don't think it's acceptable to ship with an annoying thing like this, and cus it should be easy to fix.

We should either get SSR working or address why it's not important for an embedded app in our readme (or at least remove the checkbox).

When we shipped #47 we removed the original interface demo (a searchable collection of products using ResourceList) for an API console (so meta!).

The API console allows us to demo some basic components and data flow. It also allows us to give people the chance to immediately start interacting with Shopify API endpoints. However, I don't think it does a stellar job of showcasing common Polaris components and UI patterns.

Let's come up with some simple ideas for fleshing out the UI demo and add a router so that app developers can see a more typical set up. As part of this feature it would be good to look at some current popular apps for inspiration.

One simple idea could be to bring back the original product listing idea and then add a link to the API console. That way devs could search products and see ResourceList in action > toggle to the API console and POST a new product > toggle back and see that new product in the list.

cc @jamiemtdwyer @TheMallen

Code we distribute like this should probably be under a pretty permissive license - see with legal or @2xbass?

Breadcrumbs are broken in the version of Polaris being used, the issue was fixed in 1.7.0:
Shopify/polaris#116

https://github.com/Shopify/shopify-node-app/blob/master/shopify-express/shopStore/RedisStrategy.js#L15

I got it working by changing done(null, clientToken); to done(null, shopData);

After installing the app, the following errors are displayed:

GET https://886af3d7.ngrok.io/assets/main.js net::ERR_CONTENT_LENGTH_MISMATCH
jquery.min.js:2

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://fyndle-favorites.myshopify.com" from accessing a cross-origin frame.
at contents (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/core/vendor/jquery.min.js:2:5166)
at Function.map (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/core/vendor/jquery.min.js:1:14863)
at oe.fn.init.oe.fn.(anonymous function) [as contents] (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/core/vendor/jquery.min.js:2:5282)
at HTMLIFrameElement.eval (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/components/ActivityMonitor/views/overlay/ActivityMonitorOverlayView.js:1:2037)
at Function.each (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/core/vendor/jquery.min.js:1:14055)
at oe.fn.init.each (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/core/vendor/jquery.min.js:1:11918)
at e.bindActivityDetectors (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/components/ActivityMonitor/views/overlay/ActivityMonitorOverlayView.js:1:1853)
at e.init (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/components/ActivityMonitor/ActivityMonitorController.js:1:257)
at onLoaded (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/core/content.js:1:979)
at eval (chrome-extension://laankejkbhbdhmipfmgcngdelahlfoji/core/ComponentFactory.js:1:943)

App URL where this occurs:

https://fyndle-favorites.myshopify.com/admin/apps/2520896c910c08e6ad606d30c15bf348/?hmac=491bed9aca25060f263856eff3ad4e8ef4861a45c62cb72defa737056c24c894&locale=en&protocol=https%3A%2F%2F&shop=fyndle-favorites.myshopify.com&timestamp=1514584220

Is this related to the node modules installed or the yarn installation instructions? I have cloned the repo today and have followed installation instructions to the letter.

See if their is an appetite to make this a next step for devs after API client creation.

We created the proper hook for after install but we didn't complete the example of how to create a webhook:

https://github.com/Shopify/shopify-node-app/blob/master/server/index.js#L33

We're trying to keep the server code simple so I think we should do this without an api client library and write a plain web request to do this.

https://help.shopify.com/api/reference/webhook

When I run the app with yarn dev or yarn run start the following message is printed in my terminal:

You are using Node "7.7.3" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || ^8.0.0"

When trying to set the project up with dev, I also got a warning there that this node version wasn't compatible with dev.

The current api proxy is super hacky. We need to make it better. The existing express middlewares I found all had one or more flaws (mostly around rewriting the target url with the correct shop), but there is probably a way to get it working. Worst case this thing should still be replaced or at least extended to be more of a true proxy and less of a hack.

ShopifyApp has useful classes for ensuring the required webhooks, scripttags etc are added to the shop. We should port those classes here.

https://github.com/Shopify/shopify_app/tree/master/lib/shopify_app/managers

withWebhook is an express middleware that validates the the presence of a valid HMAC signature

This should probably explain what it's meant to be used for, eg. withWebhook is ... for use in routes meant to respond to webhook requests form shopify

title

https://jamie-ds-emporium.myshopify.com/admin/oauth/authorize?client_id=199268859c17ed3b6a96570498c52f37&scope=write_orders,%20write_products&redirect_uri=https://jamied.ngrok.io/auth/shopify/callback

write_orders,%20write_products

should not contain a space character, scopes should be separated only by commas

yarn check is throwing a bunch of errors, mostly related to polaris. We should make sure the lockfile is properly up to date to avoid these.

Ideally we would have this check run in CI.

I got this error when authoring with client store. The app is deployed to Heroku with current repo's configuration:
2017-12-10T16:35:12.051144+00:00 app[web.1]: (node:20) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot set property 'accessToken' of undefined 2017-12-10T16:35:12.051267+00:00 app[web.1]: (node:20) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Hello, I am a shopify partner to develop shopify app with node.js and react.js.
I would like to use this source btw there is an error after installation.

GET /?hmac=dbe08f9c3c07d114ec0840fa21130108b9abafc5bb9c289b219ac41a83e413fd&shop=mydevstore.myshopify.com&timestamp=1513876062 200 0.972 ms - 1115 GET /assets/main.js 200 5.067 ms - 2334380
This is the result in terminal when click app in my dev store apps tab.
Please let me know what is the solution.
Thanks

Leaving this here as a reminder, but it seems like this would be a small project within the repo or something not just one issue.

The Auth module is pretty self contained. We should take a pass at cleaning it up and then pull it out into it's own npm package under the @shopify namespace

@jamiemtdwyer pointed out that a lot of developers might not be familiar with Redux. Since this project aims to teach more about Polaris and Redux, I believe a really effective way to do that quickly is to add code comments that explain key parts of the UI.

Rails does a very good job at this when it generates new files and I think we should borrow heavily from them.

We should tackle #75 before this issue.

Kill this error with fire

Console dump:

╭─jamied@hyperion  ~/dev/shopify-node-app  ‹master›
╰─$ yarn install                                                                     1 ↵
yarn install v1.3.2
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "webpack > [email protected]" has unmet peer dependency "ajv@>=4.10.0".
[5/5] 📃  Building fresh packages...
[-/4] ⠐ waiting...
[-/4] ⠐ waiting...
[3/4] ⠐ v8-debug: http GET https://node-inspector.s3.amazonaws.com/debug/v1.0.1/
[4/4] ⠐ v8-profiler: http GET https://node-inspector.s3.amazonaws.com/profiler/v
error /Users/jamied/dev/shopify-node-app/node_modules/v8-profiler: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build
Arguments:
Directory: /Users/jamied/dev/shopify-node-app/node_modules/v8-profiler
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | x64
node-pre-gyp info check checked for "/Users/jamied/dev/shopify-node-app/node_modules/v8-profiler/build/profiler/v5.7.0/node-v57-darwin-x64/profiler.node" (not found)
node-pre-gyp http GET https://node-inspector.s3.amazonaws.com/profiler/v5.7.0/node-v57-darwin-x64.tar.gz
node-pre-gyp http 404 https://node-inspector.s3.amazonaws.com/profiler/v5.7.0/node-v57-darwin-x64.tar.gz
node-pre-gyp ERR! Tried to download(404): https://node-inspector.s3.amazonaws.com/profiler/v5.7.0/node-v57-darwin-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI) (falling back to source compile with node-gyp)
node-pre-gyp http 404 status code downloading tarball https://node-inspector.s3.amazonaws.com/profiler/v5.7.0/node-v57-darwin-x64.tar.gz
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'node-gyp clean' (Error: spawn node-gyp ENOENT)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/jamied/dev/shopify-node-app/node_modules/node-pre-gyp/lib/util/compile.js:77:29)
node-pre-gyp ERR! stack     at emitOne (events.js:116:13)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:211:7)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:196:12)
node-pre-gyp ERR! stack     at onErrorNT (internal/child_process.js:372:16)
node-pre-gyp ERR! stack     at _combinedTickCallback (internal/process/next_tick.js:138:11)
node-pre-gyp ERR! stack     at process._tickCallback (internal/process/next_tick.js:180:9)
node-pre-gyp ERR! System Darwin 16.7.0
node-pre-gyp ERR! command "/usr/local/Cellar/node/8.9.1/bin/node" "/Users/jamied/dev/shopify-node-app/node_modules/v8-profiler/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/jamied/dev/shopify-node-app/node_modules/v8-profiler
node-pre-gyp ERR! node -v v8.9.1

yarn cache clean didn't fix for me.

Removing node-inspector from package.json was the only thing that worked for me.

README doesn't mention the storage engine options available.

Use prettier <3

Once in the hostname and once in the port option – seems superfluous. I had to remove the port from the hostname in order to get things working.

Hi there, many thanks for your amazing work here;

I'be been trying to wrap my head around webhooks using the provided example. I started by registering a new webhook as follows (I omit less meaningful parts of code with [...], they haven't been changed).

const shopifyConfig = {
  host: SHOPIFY_APP_HOST,
  [...]
  afterAuth(request, response) {
    [...]
    registerWebhook(shop, accessToken, {
      topic: 'orders/create',
      address: SHOPIFY_APP_HOST + '/order-create',
      format: 'json'
    });
  },
};

And then use the original example (by manually creating an order, setting it to paid in order to move from "drafted" to "created") to no avail.

app.get('/order-create', withWebhook, (request, response) => {
  console.log('We got a webhook!');
  console.log('Details: ', request.webhook);
  console.log('Body:', request.body);
});

In the console appears a POST to /order-create with an 404 error as a result. Btw, i'm using yarn run start to spin everything, ngrok as a tunnel and everything else is working fine - i have even created some routes of my own - so we can assume auth and express.js are working fine.

It sounds strange to me that a POST request is handled by an app.get so i changed the code to

app.**post**('/order-create', withWebhook, (request, response) => {
  console.log('We got a webhook!');
  console.log('Details: ', request.webhook);
  console.log('Body:', request.body);
});

Now is a 500 error; but if i drop the "withWebhook"... I get all the JSON data displayed on my console.

app.post('/order-create', (request, response) => {
  console.log('We got a webhook!');
  console.log('Details: ', request.webhook);
  console.log('Body:', request.body);
});

However, deleting the withWebhook feels incorrect and not the way this is supposed to be handled.

Am I missing something?

Make it sparkle ✨

In the callback route https://github.com/Shopify/shopify-node-app/blob/master/shopify-express/routes/shopifyAuth.js#L40, the hmac validation process doesn’t follow the same steps listed in our docs (https://help.shopify.com/api/getting-started/authentication/oauth#verification).. Specifically, our docs say The list of key-value pairs is sorted lexicographically.
Not doing this doesn’t seem to be an issue where it’s used in this app, but if I copy the code and use it on another request sent by shopify (the one that includes the protocol property), the validation fails

title

We'll want to do this sooner rather than later so that it's easier to pull them out and they don't become entwined in our implementation. (We'll probably need to un-entwine some things).

We should bump the engine field of package.json to the new LTS release.

If we do this we can easily switch a number of our promise invocations to use async / await.

Also nvm won't keep getting mad about my node versions :)

Client token was always a hack, what if we just use the cookie to get access to our session in the fetch requests? It would simplify most of the auth and data layers and make things less convoluted.

I cloned the project, did yarn install and then ran yarn dev.
The Shopify app loads fine in the admin, but I get the following errors in the chrome console:

React Hot Loader: It appears that "react-hot-loader/patch" did not run immediately before the app started. Make sure that it runs before any other code. For example, if you use Webpack, you can add "react-hot-loader/patch" as the very first item to the "entry" array in its config. Alternatively, you can add require("react-hot-loader/patch") as the very first line in the application code, before any other imports.

and

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.

[HMR] - ./client/App.js

Lmk if there is any other info I can share.

Hello,
I'm building an application with shopify-node-app (thanks for your work!) but I can't create any scriptTags and have strange result when I try to read them.

Here is my function client-side :

export const injectScript = () => {
  return fetch(`/api/script_tags.json`, {
      method: 'POST',
      headers: {
        'Content-type': 'application/json'
      },
      credentials: 'include',
      body: JSON.stringify({
          event: 'onload',
          src: `${window.location.origin}/script/snapcall.js`
      })
    })
    .then(response => response.json())
    .then((json) => {
      console.log(json);
    })
    .catch(error => {
      console.error(error);
    });
};

which result in {"error":"419: unexpected token at 'object Object]'"},

so I tried to see what happened in shopify-express (shopifyApiProxy.js) and changed fetchOptions to this :

let b = JSON.stringify(body);
const fetchOptions = {
  method,
  b,
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Access-Token': accessToken,
  },
};

after that I get {"errors":{"script_tag":"Required parameter missing or invalid"}}.

Also, when I try to read my scriptTags I get {"script_tags":[]}, but if I go to https://myshop.myshopify.com/admin/script_tags.json, I get one scriptTag :

{"script_tags":[{"id":8011808800,"src":"\/\/productreviews.shopifycdn.com\/assets\/v4\/spr.js","event":"onload","created_at":"2017-11-03T06:35:03-04:00","updated_at":"2017-11-03T06:35:03-04:00","display_scope":"all","app":"Product Reviews"}]}

Am I doing this wrong ?
Thanks.

I tried updating the .env with my data and installed the application on my demo shop. It installs successfully, but everytime I visit the app from the admin screen, it shows the "Shopify Node App – Installation" page.

From ngrok, I do see that it first tries to access "GET /", and then "GET /assets/main.js" and then "GET /install".

I was expecting to see the contents of "app.ejs" but somehow, it keeps getting redirected to "install.ejs". Is that really how it's supposed to work? Or is this a bug? If it's a bug, where can I find clues to resolve this?

After following the guides instructions. There seems to be a disconnect with the service. I've built the simple application that Shopify provides here with success. However, when running yarn run start|dev, and after having to remove npm-inspector from the settings.json, I'm left with:

secret option required for sessions

Error: secret option required for sessions
    at session (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express-session/index.js:199:12)
    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:317:13)
    at /Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:335:12)
    at next (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:275:10)
    at urlencodedParser (/Applications/MAMP/htdocs/shopify-node-app/node_modules/body-parser/lib/types/urlencoded.js:91:7)
    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:317:13)
    at /Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:335:12)
    at next (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:275:10)
    at jsonParser (/Applications/MAMP/htdocs/shopify-node-app/node_modules/body-parser/lib/types/json.js:103:7)
    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:317:13)
    at /Applications/MAMP/htdocs/shopify-node-app/node_modules/express/lib/router/index.js:284:7

The .env has the correct keys added and URL being forwarded by ngrok. So I'm not sure what this is being caused by.

I was trying to setup locally with yarn but had this error. Anyone got this?

jase$ yarn install && yarn run start
yarn install v1.3.2
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.60s.
yarn run v1.3.2
$ node ./bin/www
module.js:538
    throw err;
    ^

Error: Cannot find module '@shopify/shopify-express'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/jase/Sites/email-template/server/index.js:18:24)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
error Command failed with exit code 1.

We should have tests for everything we intend to pull out into packages (ShopifyAuth being the biggest one). We should also minimally add simple stub tests so that partners have a testing scaffold set up that they can use if they want.