API Mesh starter kit using GitHub Codespaces

Transcript

Hi, I’m Russell with Adobe Commerce. In this session, it’s about the Adobe Commerce API Mesh Starter Kit.

So this starter kit was created to allow a developer to get introduced to API Mesh using GitHub Codespaces. This way they won’t have to worry about setting anything up on their local environment. To get API Mesh working locally, there’s a few things that you would need to do, and the last thing that we want is there to be a conflict with something that they may already have in place. And this stops them from that initial opportunity to learn more about API Mesh.

We wanted a way for anyone to quickly gain exposure to working with API Mesh, with the least amount of effort. The first thing we need to do is head over to the API Mesh Starter Kit repository on GitHub. Then, over at the top right, there’s a green button, and we’re going to click Use This Template and create a new repository. We’ll give it a name, an optional description, and for this I’m just going to pick Use a Private Repository and then click Create Repository. So this is going to create our own version of the code that we need to proceed. This whole process, it only takes less than a minute to complete.

Now, the first thing that we’re going to do is we’re going to need to create an endpoint for Adobe Commerce, and this way we can test things out.

Here’s an example of the Mesh.json that you’ll see after you clone the template, and this is where you would enter the URL for your Adobe Commerce instance. So now it’s time to create a GitHub code space. Now this process, when you’re all done, takes maybe two to three minutes to complete, because there’s a lot of background events that are happening, and this is all required to create a new code space. So what’s happening is there are things being built, like an Ubuntu image, we’re setting up some port forwarding, and many other things. So once it’s completed, we can start exploring our API Mesh. Here’s a few things that you can expect when you use this template and GitHub code spaces. After you save a Mesh configuration, the pre-built server automatically restarts. And I’m going to show you an example of me changing the max age, and we’re going to save it to a new value of 5000. And then after I save, the node server is rebuilt and it restarts the browser. Another impressive feature is that there is a built-in GraphQL called Yoga, and it’s included. This means you don’t have to have any third-party tools or software to get started.

So I’m going to show you an example now. I’m going to fetch the store config. I want to grab the store code and the store name, and additionally the available stores and their base URL. So I make those changes on the left-hand side, and then when I hit enter, the response appears on the right.

Another great feature to know is that the Starter Kit can be run on your local computer if you want. And of course, there’s the official Adobe Mesh CLI. So if these topics are of interest to you, please head over to Experience League as well as the Adobe Developer Docs to learn more.

And finally, we do have several video tutorials on Experience League around API Mesh, including this curated playlist.

So I hope this introduction to Adobe API Mesh Starter Kit was helpful. And please continue to learn more about Adobe Commerce Hero and Experience League, as well as all of the other Adobe products.