Building a Shopify App with React & Node

♪​♪ I think we will kick things off. Great to see so many people in attendance from all over the world. Shout-out to Copenhagen, Berlin, India, Poland, Portugal, US, Germany, Belgium, UK. Czech, Poland again, Belarus. Amazing to see so many people. Good morning, good afternoon, wherever you are. Thanks so much for joining us today. And welcome to today's React pre-conference workshop, building a Shopify app with React and Node, hosted by Jennifer Grey and Hanna Chen. Both are front-end developers here at Shopify.

Jennifer and Hanna both have years of experience working on developer tools and resources at Shopify, so they'll have so many insights and valuable advice to share with the developer community here. So during the next 90 minutes, we'll be looking at how to create a basic app in Shopify, how to use React components that Shopify have designed for you to use in your own app projects, as well as create functionality so these components can access store data.

So just a few housekeeping notes before we get started. If you do have questions during the workshop, if you get stuck on anything please use the Q&A function and we'll be able to try and troubleshoot any issues you're having while following along with the workshop. I'll be monitoring these questions as well as the chat in here and the Discord channel. And we should hopefully have some time as well at the end of the workshop for a quick Q&A session. Also, this workshop will be recorded and the recording will be available later today. All attendees and registrants should get a link and that'll allow them to access the recording. With that, let me pass you over to Jennifer and Hana to show us how to build the Shopify app with React and Node. Thank you so much, Liam. And welcome, everyone.

As Liam mentioned, my name is Jennifer. I'm a friend and developer at Shopify. I work on the docs and API libraries team out of Toronto, Canada. And our goal is to make it easier for developers to build on Shopify's platform by creating and curating resources like documentation, software tools and different libraries.

Specifically, my main focus on the team is the user experience on Shopify.dev, which is our home for developer documentation across the Shopify platform. And hello, everyone. My name is Hannah. And I'm also a frontend developer at Shopify. I work on a team dedicated to providing embedded apps with the capabilities that will enable great merchant experience. I've spent my time at Shopify on AppBridge, which is the JavaScript client powering embedded apps.

So Liam briefly went over what we'll be covering or what we'll be doing today, but here's just a little bit more in-depth workshop agenda. So today, we're going to be covering how to build an app using Shopify's latest tools and technologies that's going to embed seamlessly into the Shopify store admin. So this will include what it looks like to build an app for Shopify ecosystem, using the Shopify app CLI to create, authenticate and install your app in the partner dashboard, harnessing the power of Polaris for an integrated UI experience and using AppBridge for communicating between the admin frame and your app.

So what exactly is a Shopify app? A Shopify app extends the functionality of what a merchant receives right out of the box when they set up a store with Shopify. So imagine when someone purchases a new phone, it should already come with the basic capabilities that the majority of users would already need, like messaging, calling, calendars, et cetera. From there, each device owner can customize and extend these capabilities of their phones to meet their specific needs by installing additional apps. So Shopify has taken a pretty similar approach in regards to what a merchant will automatically receive right out of the box. So we've included all of the baseline features that are required for the majority of merchants to set up an online store, but we do know that every store is unique and we want merchants to be able to extend and add the features to their store that will help their unique businesses thrive. And that's exactly where Shopify apps come in. So Shopify has both first-party and third-party apps and as the company grows, it has built a robust platform to build apps as it's found that apps provide a way to scale quickly and provide this needed customization to the merchant's experience.

All right, so I'm going to dive into what we should do before building an app. Sometimes we forget that there's one more step. So before building an app, you'll need to figure out what you want to build. Whether that's directly from merchants or from an emerging retail trend that you're noticing. We have a variety of places from where app developers can find inspiration for their Shopify app. So I'm going to share three ways that app developers can find inspiration for the next project. First one is to find an industry that solves a pain point for them. Our Shopify merchants sell across a number of industries. So this could be a home and garden, food and beverages, and each industry faces its own set of regulations, practices and pain points. As a developer, you can focus on an industry and learn about the frustrations that these merchants deal with, thus finding a problem to solve. Second way is if you were to explore international markets and fill in product gaps. With merchants rapidly joining Shopify and making sales in countries like Japan, Mexico and Germany, Shopify is growing internationally. These international markets come with their own variables that Shopify sometimes just can not solve out of box. So some examples here are, let's say buyer preferences, shipping options, tax calculators, there are a lot of tax laws around the world that is just not possible for Shopify to cover out of box. And this is where you as an app developer can play a huge role. By doing market research on these growing markets, developers can see what regional issues exist and solve them through apps. Finally, merchant insights and feedback from Shopify communities. So Shopify communities, such as our forums, Facebook groups, meetups, they all provide direct insights into what merchants are experiencing and looking for. So throughout these online and offline communities, merchants they openly discuss business, their business, and what they seek to accomplish, as well as features that they wish to provide. And also, the tools that they wish to see. So great resources if you are looking for inspiration.

Now, so let's say you've browsed the forums for issues that merchants are having, or you've identified a need in the larger community. And you want to build an app to put in the Shopify App Store. That was great. You're actually ready to dive in. Next, I'm gonna hand this back to Jen to walk you through the tools that you can use to help you build this workshop.

Perfect. So Shopify has taken a lot of the libraries and patterns that we use internally, and we've made them public and open source to help partners like yourselves make apps. So today we'll show you how to build a public embedded app and showcase these specific tools that we've made available to you in the hopes that it will make it easier for you to get shit done. So at the end of the workshop, we'll have an embedded app that starts off with what we call an empty state component.

So that's that image that you can see on the very left. So this component will include a button. And when we click on the button, this will open up a resource picker. That's the middle image that will allow us to select a number of products from our development store. We'll then grab the select product IDs so that you can use this information to do something like writing a query to the Shopify GraphQL admin API, but just for the sake of this workshop and timing, we'll just end off with displaying this information in a list component, which you can see on the right.

So one of the requirements for this workshop is to have a free Shopify partner account set up. So if you haven't already done so, please go ahead and do that just now at shopify.com slash partners. So let's go in, this is my Shopify partner account here. And your partner dashboard is the best place to keep in sync with the apps, themes and businesses that you're building with Shopify. So you can create any number of Shopify apps, which is what we'll be doing. You can create any number of Shopify apps like I said, and in our case, the Shopify app CLI will connect to your account and it's gonna build out our app for us or create our app for us. And as a Shopify partner, you can also create an unlimited number of development stores. A development store is a free Shopify account that comes with a few limitations. So you can use a development store as a portfolio site for your business or to test any themes or apps that you create, which is what we'll be doing or to set up a Shopify account for a client. So if you don't already have a development store, go ahead and create one now with the add store button, pick a store type, you'll want development store, and if you've already created a store, you don't need to worry about this. Just take a few minutes to fill out the required fields and what will you do with this development store? We want to test an app or a theme. So I already have a few development stores. I'll be working off of this one at Jennifer's new development store. And after that, once you have your partner account with your development store, we're ready to start working with the Shopify app CLI.

The Shopify app CLI is a command line interface tool built for Shopify app developers. And it enables us to quickly spin up a Shopify app using either Ruby on Rails or Node.js and React. It's going to integrate directly with our Shopify partner account, which we've already created, as well as handle authentication when installing your app to a development store. So it can also automate common development tasks like populating example data in a development store like products or orders. So overall, it is a very helpful tool to really speed up and simplify your app development process by automating a lot of these time-consuming development tasks. So let's take a look at the installation. If you haven't already installed the Shopify apps CLI, please go ahead and do so. There are a few requirements, one being a Shopify partner account, which we've already setup, one being a development store, which we've also talked about, and one being Ruby, at least version 2.5.1 or higher on your computer. And once you have the CLI setup, give everyone a moment to kind of do that. And in the meantime, we'll talk about some of the core commands for the CLI. So one of them is Shopify help. And this is going to list out the available commands and describe what they do. So I'm going to go ahead and try that out right now. I'm going to go to my terminal and I'll type Shopify help. And here we have it lists out four different core commands. So Shopify connect, to connect or reconnect to an existing project to a Shopify partner organization. Create, to create a new project and you can create either node or rails project. Logout, to log out of the currently authenticated partner organization. And version, to print out the version number. So I'll show you all what version I'm using. So I'll type out Shopify version. So I'm using version 1.8.0. So this is the version I'll be working off of. If you're using one that's a little bit lower than this, that's okay, there might be a few differences in just what the app scaffolding looks like, but it won't affect what we're actually rebuilding today. But 1.8 is the version that we're using. All right. I'm just gonna jump in for a second. Could you zoom in a little bit on the- A little more? Yeah on the terminal and on the browser as well. I think the browser's slightly hard to see as well on the docs. Browser. Yep.

And then maybe a little bit on the terminal as well. Yeah, on my terminal. Cheers.

All right, hopefully that's okay for everyone. All right. So once you have your CLI installed, ready to go, let's create our app. So I'm going to type Shopify, oops, create node, hit enter, and we are now prompted to enter our app name. You can call your app, whatever you like within a certain character limit. I will call my app. So the type of app that we're building, we're kind of building out like a subscription box where you can pick a number of products to add to a box for your users. So I'll just call it subscription box. Again, you can name it whatever you like.

Next up, we are asked what type of app are you building, either public or custom. So a public app can be installed by many merchants from the Shopify app store. And it needs to go through a review process before it can be listed. This is the type of app that will be creating today. A custom app is tailored to a single merchant. It cannot be sold through the app store and thus it doesn't need to go through a review process. So I'll just click Enter on public and I'm asked, or I've been identified as a Shopify employee. The CLI tool, we do use this internally to create first-party apps. You likely won't see this prompt unless you yourself are a Shopify employee. So it's just now asking me if I'm working on a first-party app. I'm not, so I'll click No.

And authentication is required. Log into my URL with your Shopify partner account credentials to continue. So at this point you might also be asked if you have multiple partner accounts to log in. But if you do see that link, just click on it and you should be prompted to an authentication screen and it's authenticated successfully, so you can now go ahead and close your page. Perfect, so I'll go back to my terminal. Oh, here we are. Now I'm asked to select my partner organization. I have multiple. So I'll just click on this first one. And if you have multiple development stores as well, which I do, you'll just need to go ahead and pick what store that you want to install your app to. So I'm going to install mine on Jennifer's new dev store. And it'll just take a few moments here to clone in and install any dependencies. So this'll be a good time for anyone to kind of catch up or ask any questions that they have while this sets itself up.

All right, so it looks like everything is all set up. So I'm going to move on unless Liam there are any questions. You want me to answer? Perfect. Rado was asking specifically, are we rebuilding an app for the Shopify App store? So yeah, that would be yes. Yeah, so we won't actually get to a finished product where you're ready to set up for a review. But at the end stage, once you have your app fully fleshed out, if you go into your partner's admin on your app setting page, which I'll actually show you just now. So here we have our app was created in our partner dashboard. So there's a link here that you can either copy and paste into your browser or click on. And this will show us our app set up within our partner's dashboard. And here you can see this card saying, Get ready for production, create listing. This is what you would do once you're ready for your app to go on the App store and through the review process. But for now, this just gives us an overview of our app. So here we have our API key and our API secret key. We will need to use these in our app, but luckily the CLI handles all this information for us, so we don't actually need to touch anything in here at the moment.

And if you go back to your main apps page, I'll zoom in here, you can see your app listed at the top here. So I have my app subscription box. Perfect! So, let's go back to our terminal and see what's next. So we can now change directories to our new project folder and run shopify serve to start a local server. So let's do that, I'll just cd into my subscription box folder. And let's run shopify serve. And if this is the first time you're using your development store or you haven't installed any apps before, you'll be asked if you want to convert to your development store or to a development store. Doing this will allow you to install your app but the store will become transfer disabled. So it's just going to transfer disabled to your store. This means that if you're building a store for a client, you won't be able to do that, but we're going to be able to do that. But we're just using this for app testing purposes. We're not actually going to be building this store as a production store. So I'm just going to click yes to disable the transfer capabilities. And it's now creating an ngrok tunnel. So the Shopify CLI uses ngrok to create a secure tunnel from the public internet to your local development app. So the tunnel will time out in about two hours. If you sign up for a free ngrok account, it will last for about eight hours. You can also sign up for a paid account, which will last even longer. We're good just with this two-hour timeline. And you can also restart a new tunnel with the CLI as well, if you need to.

And next, we are asked if we want to update our application URL. We want to click on yes. We want this to be updated to our ngrok URL. And I'll just wait for everything to load up.

Perfect. So we are now ready. And just closer up to the middle of your terminal, or a bit higher up, we have a link that says to install and start using your app. Open this URL now. So again, copy and paste this URL into your browser or click from your terminal. And we'll just be redirected to our app. And this is the Installation screen. So we are now inside of our Development Store admin. And we're just being asked from our store if we're OK with these access scopes that our app will be allowed to access. And if we're OK with that, we can go ahead and install the app. And once we've installed it, we can go ahead and install our unlisted app.

And what's great about the CLI is that the authentication process is being handled for us. I remember when I first joined Shopify, setting up all the initial scaffolding just to get to Hello World. It was all manual. And it was a very time-consuming process. For anyone who is completely new to building a Shopify app, I know it doesn't seem like much. We'll just get a little kind of Hello World here. But if you know the experience prior, it took a couple of hours just to get to this phase and to go through the authentication process manually. This is such a time-saver. And it's just loading up and we should see, here we are, Shopify app with Node and React, this is what the CLI kind of spit out for us.

And you might be wondering why exactly we want to build an embedded app within the Shopify admin as opposed to just having a standalone app. This is because by embedding your app within the Shopify admin, you can create a better user experience that is familiar to Shopify merchants. And this is gonna make your app easier to use. It also helps you ensure that this experience is consistent no matter where a merchant is visiting. If you have a client that's already used Shopify, you actually get the best experience whether that's on the web or in the Shopify mobile app. And a familiar user experience can build a trusting relationship between your app and merchants, making them more likely to recommend your app to others.

So let's just go back here. And one thing that we will need to do when building our app, we want to be able to list products. So if you're in your store admin, if you click on this products link here, in our products page, we can see that we don't actually have any products. So we want to add just some basic sample products to use and test out in our app. And we can do this using the CLI. So let's go back to our terminal, just stop your server, and we can use the Shopify populate command. So type Shopify populate and you can populate a few different things. We can populate products and customers or orders. So we want to populate some products. So, Shopify populate products. I'll click enter and authentication is required again. So I'll just go ahead and click on that link. I've authenticated successfully, and now if I go back to my terminal, I can see five products have been added to my store. So let's go back to our admin, refresh our page, and perfect. We have five new products added to our development store. So we have our products, we have our app set up. Let's open up our app in our text editor and take a look at the files that were created with the CLI. So I'll just open up my project. Your project would have been created in whatever subdirectory that you were working in in your terminal. So open this up, latest update.

So let's see what we have. So first off we have this.env file. So this is the file where we'll keep our Shopify API key and our Shopify API secret. This is what we saw in the Shopify or in our partners dashboard. The CLI has already added this for us, which is great. And we just wanna keep this information in here because we don't wanna expose it publicly.

Next, we'll take a look in this servers folder here. We won't actually be touching anything in these files, but I'll give you a brief overview of what you can find in here that the CLI has set up for us. So in this server.js file, we can see this next being imported from Next.js. So we use Next.js which is a framework for setting up react-based apps, and it's going to take care of some things that you would typically need to do in a React app, like webpack configuration and hot module replacement. We also have Koa being imported here, and this is for authentication. So Shopify apps are authenticated with Open Authorization, or OAuth, which is a token-based authentication and authorization system that Shopify uses to securely connect apps to Shopify and merchants. And the Koa middleware will work with Koa Shopify Auth, this package to take care of most of the authentication process and create your custom server. And we also have this handlers folder within servers. And what's in here, we can see Apollo client is being imported, and our app is set up to use Apollo to fetch data, and the Apollo client and its React components were designed to let you quickly build a React UI that fetches data with GraphQL. So that's just what's being set up in this folder here, or in this file. We also have this mutations folder. This is, we just have some boiler plate code in here that can make calls to the billing API whenever you are ready to set up billing for your app because everyone wants to get paid. So, like I said, we won't be working with GraphQL for setting up billing during this workshop, but just wanted to let you all know what was available and set up for you in the scaffolding.

So now let's take a look in this pages folder here. Excuse me. So this is going to hold our front end components. So next JS inside this underscore app dot JS folder, next JS uses an app component. And what this does is it passes down classes to the other files in our app. So this file, it passes down everything that you would typically find in an index file to the rest of your app. So you can see that there are also a few different provider components. We have this app provider from Polaris and this provider component from Average React. So these are two libraries that we will be using throughout the workshop. We'll talk about a little bit about what both of those are once we get to them and I'll get to Polaris really soon. But basically we just need to wrap our entire app in these app provider components in order to be able to use both of these libraries throughout our app. And the CLI already has these set up for us so we can dive right into using these libraries. All right, so we're almost ready to build, but before we do so, let's talk about Shopify Polaris. So Shopify Polaris, the docs can be found at polaris.shopify.com. And oops, don't wanna print I want to zoom. Sorry, I can't see. So Shopify Polaris is a design system that Shopify has built to provide a cohesive experience with consistent patterns across the interface. So we use Shopify polaris throughout the store admin. And it's also available for third-party developers to use when building out their apps. And this cohesive experience relates back to what we spoke about earlier in regards to the benefits of embedding your app within the admin. The use of your app should continue to feel like a familiar experience throughout the entire interface. And Polaris will definitely help to maintain this experience. So this is really invaluable for app developers who are building on our platform and are looking to make interacting with our product easier and more predictable for merchants because it will just continue to be that one thing as it continues to be that one seamless experience. So the Polaris Docs can walk you through some specific content guidelines and wordings that you can use within this content section here. So you can see different grammar and mechanics, naming, voice and tone that you can use when building out your app. There are also design guidelines and you can follow these design guidelines when designing the layout, colors, typography for your apps. And this is really helpful if perhaps you don't have a designer on your team you can refer to these docs as a great building block. And next we have components, which are a collection of interface elements that can be used across your app. These are react-based components and they're all built with accessibility, performance standards and internationalization in mind. So these are three things that you don't need to worry about as much when you're using these components because they're already built with them in mind. So let's take a look at a component that we already have in use.

So we have seen the Shopify app provider component and in the docs, it gives us a brief description of what each component is. So this is a required component that enables sharing global settings across the hierarchy of your application. And we also have a visual example of what this component will look like as well as a few different variations. And each visual example will have a code example that you can use to copy and paste in your app if you wish, or just look to as a reference. And as well a list of available props that you can use throughout your component.

And going back to our code editor, if we look in our index.js file, this is where we are actually going to be working and we can see two more Polaris components being imported here. So here we have heading and page, and this is exactly what we saw in our shelf by admin, just that shelf by app with node and react text. And I'm now going to pass it off to Hannah since I've now overloaded you with information and Hannah is going to walk through how to actually go about building with Polaris and moving on from there. So go ahead Hannah, I will stop sharing my screen and Hannah will take over from here.

Thanks Jen, all right, let me share my screen for a second, Hannah, give me one moment. Oh, how did I end up with so many desktops? Oh no, oh no, I don't have screen sharing set up properly. Give me one second, I need to do the whole accessibility thing. I wanna share my whole screen. I think I need to rejoin, give me one second please. Okay. Thanks for holding on folks. Still have the joys of workshops run through zoom. I actually ran into the same thing a few days ago, so I'm using a new laptop and all my settings except, but I hope you're enjoying the workshop so far. Thanks for all your questions in the Q and A. Actually, Martin has a question here, Jen, if you want to answer this. Does Shopify support TypeScript? I think there was a few, was there a library recently launched that supported TypeScript? Yes, so we do support TypeScript. So Shopify app would react to one of the libraries that Hannah will walk you through. That's actually about using TypeScript. But whether or not you wanna use TypeScript, that's up to you. And our team is currently working on a TypeScript library as well. But to answer your question, yes, we do absolutely support TypeScript. Well, yeah, I think that's definitely one of the more popular, or recently popular approaches to working with apps that we've seen. Yeah. Yeah, definitely. Something we're seeing a lot more. That's great. And Omar is saying, awesome talk. Thanks so much. Thanks, Omar. Thanks for tuning in. Another question here from Navdeep. Shopify recently came in React JS for UI purposes, is that right? If this is referring to internally Navdeep, if this is referring to internally, like within our store admins. So yeah, the history of Shopify is it was originally built as Ruby on Rails, but yeah, over time, and more recently within the last few years, we have been converting to React JS. So yeah, most of the development that we do internally within Shopify is starting to convert over to the React JS or has already happened. There'll actually be a lot more of that story as well to be told during the two talks that Shopify and Shopify are speaking at four React Summit, so definitely keep an eye out for those. And another question from KKL, was there a lot of React Native implemented as well? Not so much React Native. This is something that has happened within the past two years, year and a half. A few of the apps, like the Shop app that Shopify has created, that was created for React Native. And I know there was a big kind of internal push for all first party apps or a lot of first party apps to use React Native to build out these apps. So it is something that is being explored and our engineering teams are really passionate about the future of first party apps and React Native. So Hannah is just rejoining us now. I just like to give her access rights. Zoom, isn't my most familiar of tools. So thanks for being here with me. Sorry about that everyone.

Don't worry, it's a good opportunity to catch up with some questions. It's all good. Good to hear. All right, can everyone see my screen now? Yes. Yeah, okay. All right, so to jump back into our practical portion of the workshop. So last we heard from Jen, we learned about what Polaris is and where to find the documentations. Let's start building. Just one more look though at the end result that we're going for. So we'll be building a single page app here that allows merchants to select products from their store using the resource picker and then displaying them in the list over here. So we'll be focusing on the three Polaris components, which is the Empty State, the List. And then I guess this little button here, which is part of the Empty State.

Okay and then this is what our app looks like from the front end. Let's go back to our test store just to see that in place. So if you recall, this is our Hello World app. I hope you have that up at this moment. If we go into our text editor, you can use any IDE you like. Is this font big enough? That's good.

So if you recall, we will be working inside pages and this is the index.js that Jim mentioned. We'll start off by changing the style of our return because right now it's using an implicit return shorthand. Let's change that back to a long hand format just so we can add more code before returning our component. So let's remove, I'm sorry. Let's remove the brackets and turn it back into like this. One of the curly braces rather and then we can do return here, our component. Wrap component, return. And we probably don't want this text here where it just says, ta-da. I'm gonna move that. We will keep the page, but remove everything but page. And then before we start adding the actual Polaris components, let's add one more item. I like to use a card because that will give our page a little bit of a structure. So we'll just set everything up to include card. And then this is where we will put everything inside.

Next, I talked about the empty state. Let's start off by importing that. So we'll import the empty state from Polaris. But we don't actually know how to use it yet. So let's consult the docs a little bit. That's one of my favorite places to visit. So if we look at the docs, the empty state here says that it's used when a list, a table or chart has no items or data to display. And in this case, we have a list with no items. This is perfect for the application. So usually the empty state is a great opportunity to provide our merchants with information to get them started just so that they know where to go and what to do. If we look at the docs, we can see the props. The props that are required. So go down the list, we have action. I guess we can feed children into the component. There's heading, but the only required prop over here looks like is image. So we'll need to find an image. To keep things simple though, we'll just include an image that is hosted on the internet. And you can copy the one that's inside the doc. So I'm just gonna copy this one, so that it's in our clipboard. To render the button, over here, I'm just gonna scroll up to render this button. If we look at the example, we want to feed in an action. Let's also take a peek at what we need to feed into our prop. So action is an object with content, that's a string. So I think that is the text in the button. And then there's also a callback action for it's called on action. Meaning when the merchant clicks on a button, we'll do something with it, we'll pass in a callback. In this case, we'll start off by just console logging, I clicked or something just to know that it's working. So now that we know what props are there, let's go back to the code. So let's start off by creating a variable to hold our components. So we do host empty state, we'll call it empty state.

So we'll call it post our empty state. And I'll make that into a self closing component just to keep things a little bit neat and put each prop on a separate line. But I'll leave the style up to you. So if you recall, there was a heading. So we'll pass that in. Heading, it wanted a string if I recall correctly, so we'll just call it discount. The box, since we're building a subscription box, so that will just give us text. Next, we want the image that was required. Get that in early. Just pasting the URL. Oh, I did not, I lost the URL. I'm just gonna recopy it. Putting the full URL over here. And if you recall, there was an on action, or just the action, sorry, yeah. Just the action. And in it we want to pass in an object. Okay. So, and I believed this had content. This will be the content of our button. So it's usually some sort of call to action for our merchants. In this case we want to let them know that by clicking on this button, they will be selecting products. So I'll just say select the product. And finally we want to pass in a callback on actions. Meaning something we want to do when this has been clicked on. I'm just gonna use the addrole function over here and console logout. Console.log and it will just say clicked. Let's try it one second. There we go. All right. Now we've simply assigned it to a variable. We can print that out inside the card. So we'll just render it out here. What all this should do is display an empty state. On the browser. So let's switch over to the browser and see if it shows up properly. Let's do a refresh. Oh no. Oh yes, I think my server is not running, that's why. So I'm gonna run Shopify. And sometimes, I don't know if you encounter this, but when working with Ngrok, really common issues is you receive an error message saying that you got too many connections. So if you happen to run into that issue, just give it like 30 seconds or something and then refresh, it should resolve itself. But if not, let us know. All right, so it's telling me to install the app using this. I think I have it installed, but I just wanna be extra sure and paste it in. I'm hoping to see an empty state here. I'm hoping that's all. This is what you're all getting as well. Guess that's what we should see at this point. Yay. All right, so here is our empty state.

That's one of the two components, the first components that we wanted to build. Moving on, we will build out the list component. So similar to before, we will import list. And again, we want to learn a little bit about list before using it, and that's where the docs can come in super handy. So here it says the lists display a set of text only content, and each list item begins with a bullet or a number. Going back here to the docs, it looks like there's only two props, or just one type, which is optional, and the default is bullet, so it looks like we can leave that out. The rest would just be making sure that we include list items and side lists as children. So let's go ahead and do that. And like before, we want to put that into a variable just so that we can test it out on a job. So const. Let's call it product list. List, yes, list, and list. If you recall earlier inside list, it was list item, similar to a HTML list. And for now, we'll just hard code in product names or something. Product one. I will copy this a few times. Product two. And finally, we will replace this empty state with product list so that we can render it out. All right, back to the browser to see if it does check up. So we have our list of products for now. But if you call earlier, there's some sort of conditional happening, right? So when there is a list of selected products, we show the list. If not, it'll be the empty state. This is where we might want to start adding a state or placeholder data to determine that, to determine whether or not we should show the empty state. So let's do that. So above everything, we'll add placeholder information. We'll call this variable, selected products. And it will be an array of strings. We'll just put our product IDs inside for now. Since it's hardcoded, we'll just put in some dummy data. So this one and maybe copy that again. Maybe, what? Yeah. Okay. And we will use this array. As conditional in our render return method. So we can say if our array has a length of more than zero, meaning there's more than zero items in there, we want to show the product list. Otherwise, show the empty state. Okay, so does everyone have a nice conditional in there? So once you have that, we will be using this hard coded placeholder data to toggle between the two views. So because we have items in here right now, I'm expecting this to show a list. Alright, and going back to the IDE, we'll replace this with nothing. So we go back to an empty array. That should display empty state. So let's see if that is the case. Yay, so now we've used a two different player's components. Cool, so this is actually a really good, this is it for Polaris. Is anyone behind or is it okay for me to continue? Actually, I can't see anything else.

Okay, I think we're good to keep going. Thanks Liam, all right, so let's move on. So now that we've built the apps, we can add some functionalities to it, and this is where I will talk about AppBridge a little bit. So while Polaris helps you deliver a consistent UI, AppBridge provides ways for your embedded app to interact with Shopify. So at its core, it's simply a communication pattern to manage the state between our app and Shopify admin. So the AppBridge client, though, it helps apps to communicate with the admin using simple API. You can interact with the parent frame that sometimes you might hear we call as hosts. And the host can be the Shopify admin on a browser, or it could be the POS or even the Shopify mobile app. So your app could be shown in any of those devices that's hosting your app. And just for a quick terminology, the functions that AppBridge offer are often referred to as actions because they respond to certain actions often. So the AppBridge client comes with a React wrapper on top of the base package. So sometimes it might be a little bit confusing if you see two AppBridge packages. So we have base one, simply called AppBridge, but there's also a AppBridge React, which is a React wrapper around the base package, and it makes a subset of those actions or functionalities available as React components, and the resource picker is one of them. Because our scaffolded app comes with AppBridge React already, we can start using it right away.

Okay, so let's go back to the code a little bit so we can start building on top of it. Well, actually, before we do that, I wanna dive into the docs because there's probably a lot to learn here. So what we will be using is the players button in the empty state, to trigger an AppBridge action. So here, we will open the resource picker when the players button is clicked on.

Back on Shopify.dev, we will look at a different section of the docs. Again, because there are two different packages, we have a base package here and then there's the React components. For this workshop, we will be looking at the React version. So make sure this one is highlighted. Again, we will be looking at resource picker. So looking at the resource picker, it renders a modo with a list of resources. And in our case, these resources are products that we've populated into our store earlier. And from the modo, a merchant can select these resources and then with our code, we can do whatever we want with these resources by passing in a callback function.

So looking at the code sample here, see, let me zoom in a bit. It contains the sample code here. You might notice that some point we mentioned that you need to store the shop origin during the authentication process and then retrieve them for the code to work properly. But because the CLI kind of takes care of all that for us, there's no need to worry about it. We can dive right into the coding. And if you look at the code sample here, you might see a provider that's wrapping everything and it's very much required. Again, our CLI has that, so no need to worry about that. We can directly use this. Now, continuing on with these docs, let's inspect the props that are required. So over here, it looks like we just have two required props. That's open, which is a Boolean to show whether the picker is open or not. And then Resource Type where you can choose one of the three resources. We will, again, be using product. And finally, let's scroll down to the bottom because I know there will be callbacks that we want to use. There's a lot of other neat little options that you can feel free to look over on your own. But for now, I think this on-selection will be of interest because we do want to collect the information that is being sent out. And we probably want to do something as well when the entire Moto has been canceled out. So let's keep those in mind. Jumping back to the code, I think we'll start doing that. Okay, so let's start by importing my app, resource picker. Let's make sure we don't put this as part of Polaris because it is a different library now. My app bridge will be at, there we go. All right, so now that we've imported the resource picker from our app, which we act package, we want to put it somewhere in our component. I think I would like to put this alongside the empty state. So what I'll do is wrap the empty state with just an empty tag so that everything can be contained neatly in here. I'm gonna do quick formatting here and start using the resource picker. Oh, my ID recognized the whole bunch of props for me that was just required. So I'm just gonna keep that in here. But by default, you recall earlier, we had resource type as product. And open was a Boolean for true or false. And because we want to do a quick test, let's enter true. I'm trying to put that in just so that we can take a peek. So because our selected products are empty, this empty space should show up and it should include our resource picker because it's open. So save and refresh the browser. This is a good place to pause and ensure that our resource picker is implemented properly. So let's go back here. Oh, wait, there's something new. All right, I hope this is what you're seeing as well.

Should be a modo with a list of products that you've populated into your store from earlier. And if you select these products, you can click on add. One thing you might notice is that when you click on select product again, it doesn't do anything. We can't open it back up and that's because we've hard coded the resource picker to be visible by default and it never changes the States, therefore our React component won't refresh the UI. But what you might notice is that the click action did happen, so that's kinda neat.

So, now what we wanna do is to be able to make that open state dynamic. So, let's go do that. All right, so we probably want to use some sort of state to keep track of whether the resource picker is open. And this is where I think the Reacts state hook will come in handy, so let's import that. So, import use state from react. Ooh, I don't know it doesn't like that. Import, oh, okay, need to do this. It's not here, yeah, there we go. So, we want to use state. Put it right at the top of our component, so we'll put in our isResourcePicker open because we're keeping track of that, isResource. And call our setter, set isResourcePicker open. Use state here and the default will be false because we don't want to show the resource picker so we're gonna set the default.

So while we're here defining our state of the component, it's actually a really good time to replace the hardcoded selected product that we had earlier as a test. So let's go ahead and replace that with another react state hook. So const so selected, selected products, and then set the product. State some empty array to start with, and you'll notice that my ID is complaining about two of the same name, we'll just remove that and it's happy again. Cool, let's make use of these newly created state hook. What we might want to do now is to, I guess on the open, first of all we want to start using this dynamic, is resource picker open, inside our open state rather than using true. Let's just type that in here is resource picker open, and this will make it dynamic. If you recall earlier when we click on the button, the empty state button, which was here, it just consoles log out a message. Now what we can do is to call our setter to set the open state to be true. Let's call it true. And what I'm going to do right now is just clean up our props a little bit so that we can add a bit more because there was a couple more we wanted to add. So inside our resource picker, this is also a good time to add our callbacks. We have one called, I believe it was on selection. Oh yes, thank you, ID, on selection. And there's another one where, I guess we can cancel out, and we'll call, it's called onCancel. And inside both, they accept callbacks. Let's put an empty function in there for now so we can do stuff inside. So earlier, if you recall when we select something or when we cancel out, it doesn't actually affect the state, but by hooking it up here, it should work. So let's do that. So setResourcePickerOpen to be false. Want it to be false. Close it, same here, oneSelect. Oops that's not a selected product. SetResourcePickerOpen, there we go. So what we're saying here is that unselection, close the modo, uncancel, also close the modo and also set the state in the component. Again, let's pause and see if it all works properly. So I am expecting our clip to work. Okay. After closing. Thinking for a second. Thinking for a long time. See if something went wrong. Oh, it looks okay.

I have impatient and I will refresh. Is anyone else able to see it working for them? Okay. Well, I will move on for now from the chat. So it looks like everything is working. Perfect. Yay. So like when you open it. We'll close, but we can reopen. Right? Excellent. Thanks, Jen. Thanks everyone.

All right. So now let's jump back to the documentation for a second because I think next we will want to grab these selected products. Right? So whenever a merchant selects an item and an ad, we want to get a handle on that and do something with it. So going back to the code, we see that there is an on selection, which will give us a chance to pass in a callback that receives something. But just as a quick reminder of what that shape is, because it has been a while. If we're looking at on selection here, here it says that what we will receive is some sort of selected payload. And it's an object with ID and selection keys. So it looks like we might need to dig into doselected to get the information we need. So let's try that out. So the method that the callback that we're passing in receives selected payload. So we'll simply console log those selected payload to see what it looks like. Again, we can jump back into the browser. one second. Hopefully it's faster this time. It's still thinking. It's okay. We'll go back. Alright, so let's just directly dig into this selected payload because we do know that their selection here. So what we want to do is take everything here. It has an object. But we'll put it into one single very so let's create a new one called because selected. And we will iterate through our selected payload. In selection. Will map through everything here. Each item will be a product. And then we will simply return. The product ID. I'm gonna go jump one step ahead and see if we're able to print it out in a neat little array. Select a product, two, three. Add, a hop. Scroll real quick. But over here, I don't know if you can see the same thing here. But we have just a simple array of product IDs. Now we can start using that. Because earlier we made a state that is an array with a setter. We'll just use the setter right away to get that. Just the state. Since we know that selected is a neat little array, exactly the way we want, we'll use it. I'll just save that.

Finally, you might notice that when we're displaying the list, it's still hardcoded. So as one last step, since we know that our state is simply a an array of IDs, we will update our list. So that the child component simply iterate through these selected products and print them as child list components. So let's try that out. So we'll go through selected product. And to integrate through everything. To our callback function. And we will say return a list. A list item. And what should we put in here? Because each item is a product ID. We'll just put that inside product. Into each item. And I think sometimes React might complain about child components not having keys, so I'm just gonna give it some sort of index. So, shouldn't know anything. T equals I. There's a squiggly line. All right, is everyone's code roughly like this? Let's test it now. Quick refresh. All right, here we go. I like products, one, two, three, let me choose four items and add it. And our four items are now being rendered in a list. Now it doesn't look like much, but with all this, I'm going to go back to the code. With all this the selected product will end up being inside this Milo array. And at this point, if your app has a back end. Ours don't. But if you do, what you can do is to use these unique IDs to query our Shopify GraphQL Admin API to get additional product information. So we can get things like images, prices even if you want to do something with it. Let's say if you want to apply a discount. And this is pretty much it for the workshop area. With this I think there's more tutorials you can follow which Jen will go through. So I hope everyone was able to follow along with that. I'm going to hand this back to Jen. I can figure out how to do it. That's okay. Thanks Hannah. Do you want to show the last slide? It's just got some resources on it. Oh yes. That's correct. Just fast forward to our resource list. There we go. So at this point, you've now built a basic Shopify app with Node and React. You've learned how to use the Shopify app CLI to set up your embedded app. And we've used Polaris and AppBridge to build a cohesive interface and read data from our development store. So like Hannah said it is a very simple app, but we hope that this workshop has given you the guidance on how to quickly and easily set up your own app. Get a good interface in there, and this way you can spend more time focusing on actually solving that unique problem for merchants that your app is set out to solve. So for further resources, we have some listed here, and we will list some—Liam is actually listing some in the chat as well—as well as a GitHub repo that has the completed code from this workshop. We'll also list out some tutorials from Shopify.dev. One good one is just the last few steps in the Node React tutorial, which will walk you through the GraphQL admin API, how to access and mutate some of that data, and set up billing for your app. You can also check out our YouTube channel, Shopify Devs. We have a Node React with CLI tutorial hosted by myself, if you want to watch that as well.

I believe this workshop will also be recorded. Also check out our community forums and the Shopify partner blogs for some more resources, As Liam's posting out these links, Hanna and I will be sticking around in the Discord for a little bit if anyone have any further questions. But we thank you all for joining us, and we hope that everyone enjoys the rest of your React Summit experience.

We have about 15 minutes left, if anyone has some more questions, we'll jump into the Q&A and we'll answer those just here for the remaining time. So thanks everyone! Thanks all! Thanks Hanna, thanks Jenna, that was really, really great. It was really great to see just those components coming to life and being able to access the different elements in the source, so that was really cool.

There's one question that came in here from Omar related to HMR. Can HMR be set up on the Dev environment? Yes, I believe I answered that question. We're using Next.js so Next.js should be able to handle that for us in the app. Cool. There's a question here, I'm not sure if it's related to this project, but do you need a proxy API to handle the GET POST request to the Shava API, or can you directly handle it in the Next.js client? Like a proxy to talk to the GraphQL admin API? I'm not 100% sure. I guess for... Do you need a proxy to handle requests? Yes, so I think we do need that, so any time we need to make a call to either REST or GraphQL API, your node application will require some sort of proxy API that can solve that problem, and then it requires some sort of backend that acts as a proxy, so your frontend will be talking to your backend that makes a call using the access token, if that answers the question. Thanks, Anna. There's another question here, a little bit more general, from KK L. Do you have some advice for students looking for learning resources for learning GraphQL? A resource outside of Shopify, I know this is one that a few of my co-workers have taken when they've started to implement GraphQL within their work is the advanced React course by Wes Voss. I'll link that in the answer here, I know this is one that's been taken numerous times and it's always recommended within Shopify, so that's a good one to take if you want to get some more experience or learning around React or GraphQL. And also from what I recall, there are a few browser plugins that give you some interface to play around with GraphQL, so that's also a nice hands-on tool to have. I would definitely plus one to Wes Voss as well and I'm just going to as well we do have some videos on getting started with GraphQL. That was posted by Chuck Haslam that I'm going to throw into the chat here as well. Yeah and within the, I'm sure they'll talk about it in the videos, but we have, we use the GraphQL app. You can embed the GraphQL app within a Shopify development store so you can directly access the docs and play around with different queries and mutations that will directly access the information in your development store. So I find that's a really good way to kind of get experience with like what's actually happening and the actual data that you're playing around with in GraphQL is by installing that app in your development store. Yep, for sure. Yep. If anyone has any other questions do feel free to drop them into the chat. We do have a couple more, more minutes. Maybe as well, you know, one question I actually have. So we looked at components for Polaris and AppBridge to be able to, those resource pickers. What are the other components that are like pre-exists, that developers would have access to when they're, you know, building out their UI. Yeah. So when using so for AppBridge specifically, if we're talking about the React components that are available for your embedded apps, other components that are available are the title bar, the modo, and I think navigation. So if you want to navigate to a page, redirect, so those are all available as React components, but I'm not sure about Polaris. I don't know if Jen has something to add. Yeah with Polaris, a good kind of more detailed, we use just the basic list component, but a more detailed one is the resource list component, I believe it's called in Polaris. It's exactly like pretty much made for going between the average resource model into the resource list. It really, it provides you with a much more flexibility and complexity into what you can put in that list. So that's one that's used a lot. One that I see a lot being used in apps is it's just a basic annotated layout. It's used for any settings page in your app. So most apps probably have that annotated layout. It's where you would put like forms and user input, where your users would be able to kind of input whatever your app does is, yeah, that's one that's used a lot. And we got another question from Rafael. He's wondering, is it possible to create a Shopify plugin that requires subscription from the stores? So I guess that's probably talking about subscription apps from the stores. So I'm not sure if that's from, as in the merchant is subscribing. Yeah, so depending on what this question is referring to, so if it's a subscription, like to pay for your app, it's under a subscription model, that is possible. I think you can do that through the billing API. You can say, hey, in order for a merchant to use my app, it's $5 a month, so that is possible. On the other hand, if you are building an app that supports subscriptions and payments, that's also possible. So you can do that as an app.

And I believe there is also another talk during this conference that introduces Argo. So that is also another solution that could allow you to build a subscription. And it was the, about a subscription for your app, like the merchant would pay a subscription fee for the app. The CLI builds out just a kind of boilerplate code exactly for that. It's in the server folder in Handlers in Mutation, it's called getsubscriptionurl.js. So you can take a look at that, it basically just sets up a really basic subscription fee that when your merchant installs this app they would get a recurring bill to pay for the app. So you can check that out if that's what the question was referring to.

Yeah, no, Rafael got back to us as well. So that was about the merchants. So I guess it's more on the billing aspect of that. I mean, it is quite a flexible API bill, the billing API.

We have another question here from Anda. How do you handle development on Polaris? Do you use tools like Storybook or do you use for testing? Not sure if you can speak to that specifically.

Yeah, so the Polaris team does use Storybook pretty widely for development testing. I personally haven't done too much in Polaris. I've only done a few little bug fixes here and there, but I haven't worked on building out the actual design system myself. But yeah, every time I have gone into that repo, it has always been Storybook that we use.

Cool. Another question here from KKL. Do you know if there are video streaming in the Shopify environment for merchants? I'm not sure if that's related to video streaming apps. I believe there are some... Live shopping is definitely something that's becoming more popular. So if it's related to that... Yeah, there are apps like Live Pop that enable live video streaming to stores. Yeah, that seems very viable as an app idea, yeah. Yeah, it's definitely something that we've seen a little bit more popularity, especially with platforms like Twitch becoming more popular and TikTok.

Cool. Well, we'll hang on just a minute or two to see if any more questions come in, but yeah, from us, thanks so much to everyone for tuning in. It was a really great session. Like we mentioned, it was a recording distributed by the conference organizers, but yeah, big thanks again to today's presenters, Jennifer and Hannah. It was really great to see all of those steps laid out and also all of the participants seemed to be following along very well. It was really great to see people active in the chat as well, so that was cool. So yeah, everyone out there, thanks for your attention today, and yeah, thanks for joining the workshop and enjoy React Conference. And we do have another workshop tomorrow with Scott Zinkel who will be looking at using React Native to make sure that the apps you're creating are accessible so do tune into that tomorrow. We'll have it at the same time tomorrow. And then during the main conference itself, we have two talks as Hannah mentioned. One of those will be focusing on Argo which is super exciting to see. But yeah, hopefully in this workshop you've picked up some new skills, learned some new techniques on how to work with React and Shopify and learned more about, you know, building on Shopify in general. So thanks everyone and it's goodbye from us. Thank you all for joining us. Thanks. Bye.