Making sense of appBridge in NodeJs/express POS app

Retired Boards Appdev Tools
1

Hello,

I am new to shopify development.

I am using NodeJs + express.

I am creating app for POS system and hence want to use appBridge.

So far I have got my app to authenticate and redirect and show up in Shopify admin.

To give you an example, i authorize the shopfiy store as below:

...
const app = express();

app.get('/shopify/auth', function (req, res) {
    const shop = req.query.shop;
    if (shop) {
        const redirectUri = CONSTANTS.forwardingAddress + '/shopify/admin_dashboard';
        const installUrl = 'https://' + shop + '/admin/oauth/authorize?client_id=' + apiKey + '&scope=' + CONSTANTS.scope +     '&redirect_uri=' + redirectUri;

        res.redirect(installUrl);

   } else {
        return res.status(400).send('missing shop parameter. Please add ?shop=your-development-shop.myshopify.com to your request');
}

);

// This is the redirect path
app.get('/shopify/admin_dashboard, function(req, res) {
   // send dashboard page
});

This works fine and the redirectURI is called which then does a bunch of stuff. However I don’t quiet understand where appBridge fits into this equation ?

Again, I am trying to create an app for Shopify POS and need access to the cart. I understand that i need to create a cart object (https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/cart#add-line-item). Where does this object get created ? is it on the server in my nodeJs-express app ? If so that means that my server is now stateful which is not what i desire.

Does someone have a good example of how to accomplish this.

I have spent way too much time trying to figure this out and must say shopify could do with better documentation.

2

hi @runTimeZero , App Bridge is a client-side library that allows you to embed your application inside the Shopify Admin and make use of Shopify provided functionality (e.g. Cart, Resource Pickers, Modals, etc…). App Bridge also has the cool benefit that it provides mobile native integration for the features that you use, which means merchants using your app on Shopify iOS or Shopify Android will be presented with native Resource Pickers, etc… Here are the App Bridge docs:

All of this functionality takes place on the client-side, so your server shouldn’t have to be too stateful. However, you will have to manage state somewhere when dealing with a user or a cart—it’s unavoidable. Hopefully we’ve made it a little easier though.

3

We are using shopify-app-bridge resource picker to fetch the product list. We have used Reactjs, Nodejs with an express server as a development stack. Everything is working completely fine on chrome but when I open the resource picker component in firefox, it keeps refreshing the page. I don’t know what’s wrong with the firefox. but here is my resource picker. Is there anything to do with Node express?


const handleSelection = (resources) => {
    console.log(resources)
};