Code structure

[Aditya94A]

So I'm going over the code and while shopify.js has a very pleasant "flow" to it, making it easy to understand, I noticed that it mostly has to do with shopify setup.

shopify.js is a bit unwieldy at over 300 lines and since the bulk of our actual app's logic lies outside of dealing with the shopify setup stuff (installing/uninstalling/authorizing reqs), what do you think about moving our own app's API routes in a different file?

• app.js and server.js set up the server
• shopify.js talks to shopify
• another_file.js is where we put stuff like:

  router.get('/api/orders', (req, res) => {
    const { shopify } = req;

    shopify.order.list({ limit: 5 }).then(orders => {
      res.status(200).json(orders);
    });
  });

So this file would be what talks to our front end (we could have the shopify stuff imported and let shopify.js worry about setting it up). I think it leads to much better separation of concerns. Thoughts?

I'm just trying to get a sense of how one would approach implementing their own logic with this starter.

[airmiha]

I agree. shopify.js should handle the oAuth flow. The /api/orders endpoint is just a placeholder. We don't use it anywhere except in tests. Notice that /api/products is in app.js. We can create another router in api.js and one can later on split it into products, orders and so on.

Also, I was thinking about moving the billing related code to a separate file and import it from there. If shopify.js would grow a bit more, I'd definitely do it. Right now it might introduce context switching when you move between files. If we move the orders endpoint into a separate route, do you think that shopify.js can stay as it is? Provided that it doesn't grow anymore :).

Also, shopify.js attaches the Shopify API instance to the request. Any route later in the chain can use it.

[Aditya94A]

Yes, that'd be perfect. shopify.js can remain as it is and the orders endpoint (and the subsequent additions that a user of this starter creates to interact with the app) can go into api.js which will be included in app.js after shopify.js after the shopify API instance is attached to the request.

[Aditya94A]

Hey @airmiha, by any chance do you know some good learning resources for all the react related stuff in this repo?

I'm just beginning to feel comfortable with plain react and it's a bit overwhelming to learn redux, react-router-redux, react-redux, react-dom, react-router-dom, thunk all at once.

[airmiha]

Hey Aditya,

Start with Redux and this great tutorial from Dan Abramov himself:

https://egghead.io/courses/getting-started-with-redux

You'll understand Redux, thunks and react-redux.

Then, read about React Router 4:

https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf https://css-tricks.com/react-router-4/

The you'll understand everything :).