Create an Ecommerce Site Using Shopify, Next.js, and Builder.io

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

Hello everybody. And welcome to another episode of learn with Jason. Today on the show, we have Steve Sewell. Steve, how you doing?

I'm good, thank, how are you?

Good. I just realized I didn't ask you how to pronounce your last name and I may have just butchered it.

You nailed it.

Good. I said it out loud and I'm like oh no.

You nailed it.

So Steve, I'm super excited to have you on the show. For those not familiar with you work, can you give us a background on yourself?

Of course. I think similar to a lot of the topics on your show, I'm a huge fan of the JAMstack, the modern and component driven client side sort of front end development. Fan of it for a long time, back to 2012 back to when it was a bad idea for most people. Let's make this fast and slick and make it feel like a native mobile app. Especially for shopping. I've been tooling around with the -- my background was on the design ________________ side and I wanted tools to whip up apps. For a lot of reasons that has never existed. Recently, in my career I joined a company called Shop Style. I was leading the web engineering team. They had this dated text stack and we brought them to be more modern. We were on Angular which is super popular at the time and still is. It was one of the first fully single page application E-commerce experience. E-commerce stores are driven by their marketing team to create pages and show products to these visitors. We had a slick frontend application, but no good way to whip up the pages and try the different experiences s. When working with the new stack, a lot of legacy tools didn't fit well. They would inject an AB test and stuff. Wasn't a good fit for the performance. In getting this huge flood of we need to build this page and modify the home page and run a test, we were hand coding up this stuff. No engineer likes to do that. They want to make their components and make this beautiful design system and hand that off. So you're not coding up the layout of pages. Rather you make a great design and the market team can decide I want to show this with these buttons on the home page and personalize today the person visiting and landing page and stuff like that. There was a need but not really a tool to fit that. In theory you needed a web flow that was component driven and hook up to an Angular react or whatever type of website. At the time, I was like I don't know if that is possibly. I don't know if it's out there. I was bored at my job and started to try it. I started building builder and Angular components and let the non-developers compose pages out of them and whip up and run AB tests and not have to bang on the door, hey, I need a new page which is just the same components in a different arrangement and it's way more intricate than a standard headless EMS can do. We have a good bit of customers and Shopify apps and all sorts of stuff?

Shopify apps are where we're looking today. Where we are like, this is something that I think is exciting. Right. We're starting to approach this level of, like, the good thing about the JAMstack is unbundled everything. We weren't stuck with monolithic solutions where we could build in whatever front end language we wanted but manage the back end and the data and mix and match. We have the blog should be handled from something built for blogs. And E-commerce should be built with something built for handling product data. There is so much that goes into an E-commerce platform, fulfillment, order tracking, size and variants and all these things that you can do with any system but wow is it a lot of work to do on your own. When you look at what is the benefit of using something like Shopify, it's that. Sure I can build something but let's talk about a T-shirt. I have a T-shirt. That T-shirt comes in two colors. I want ________________ to do a slim fit and a straight fit of this T-shirt and I want to do it in a range of sizes that fit everybody. Now I've got one shirt, two color variants, two fit variants and, say, 8 or 9 size options per shirt. Like, we're managing a lot of products with independent management numbers for each. Not just how many shirts but how much in the extra slim fit in black and I have to track orders. How much money did I make. Do I have to collect taxes. And all these things show up and it's a huge amount of work. That is why the JAMstack is so exciting because I can use Shopify for that but I don't have to use Shopify to run my blog. I prefer not to use Shopify to run my blog, I want to use sanity or contentful that is built for that content. But this introduces a problem. The problem is all of the nice parts about using monolithic CMSs like we get these drag and drop interfaces and really tight coupling between the front end and back end which means you can do flexible, UI driven no code page builders that is way harder when the back end can be literally anything. What you're saying is what builder is aiming to do is bridge that gap and get us to where we do get to keep our data where we want to keep it, the right place. But we provide front end primitives that we can then mix and match. So we still get that UI driven no code experience that is friendly to somebody who doesn't want to get into a code editor?

Exactly. You're spot on. And to build on your example of the intricate shirt example. One thing that is hard today if you don't have some higher level interfaces is building out the jack stack Shopify store in the first place. You want it to be fast and you can Google it and see the studies that the load time of the store has a huge impact on how many people buy products from the store. I move today a part of San Francisco where there isn't a lot of super fast internet. To your shirt example, you might have variations and you might want to show components for choose the right fit or explore the options. In a traditional stack you do that with J query and you have a script that is blocking and injecting and it's bad. When you're trying to load the sites, it's not loading. You can use Next.js and modern platforms, you can make it rich and feel like a native app and load instantly. Where a lot of people go is they put it up from scratch. And there are sizing charts et cetera, and the marketing team will give you a long list of updates. We have new products and different types of sizes. The back end can handle it but the front end, it makes it easier for the marketers to go in and click on what they want and make the changes. Maybe tomorrow you want to be on view, cool. Next day, on IOS, cool. It's all there like you said?

This sounds really exciting. It solves what I think is ________________ kind of a key benefit of these more monolithic approaches. Is that you get this kind of unified experience. So we're trying to bring that forward into the JAMstack so you can also have a unified experience without sacrificing all the benefits that you get. Like you said, the performance, the portability. That stuff is so important. Especially in bigger teams and you have multiple teams working. Those teams don't want to be -- you don't want to have to be at the leadership level of a company saying from this day forth you're only allowed to use react because that's what we built our system for. And never ever shall this change. We know that is not true. We -- for any of you who have been, this might sound familiar if you've been at an enterprise company. Every few years we say this is the way and it's never going to change and we start over hauling everything and 80 percent through the project we go, oh, man this was a bad call. And now we have a new legacy app on top of the old one for the next this is the way it's going to be. It's rough. So, like Chris in the chat is talking about copy script. Copy script is great. Should we have forced everybody to use it no matter what? Probably not. It makes migration hard. What I like about this is it does something that I really like which is a phrase I repeat, optimizing for deletion. We want to make pieces of the app easy to swap out so they can be built the way we want them to be built and if we decide we need to change or evolve, we only have to change that one peace. We don't have to rip the whole system out to make a change. That is really, really important?

It's huge. And especially -- go ahead.

Go ahead.

In your enterprise company example or any company with multiple teams or interdependencies, even a one-person shop selling products but you need to use an agency for development or whatever, out source. Any time one team tells another team how to do their job, it drives everybody crazy. I need you to build this page this way or do this thing or whatever. On the developer side, it can be we made you this nice webpage landing template. You fill in the text and the button. And the marketer is like this is the worst, today I need two buttons and I have to go back to the developers and ask for another button. It needs a shop men versus a shop women button and going back to the developers drives the marketers crazy and the developers crazy. They drop what they're doing to add another button. I have real work to do. When you can decouple optimize for deletion and all that, everybody can be happy. The button is a component the developers made that has a certain look and feel, a certain behavior managed and both teams can do what they're doing happily for once?

Yes. I love that. And yes, I think, at this point, we can keep talking about this all day. I honestly would love to. ________________ It's exciting. But you want to make sure we have plenty of times to get things done. Let's switch over and take a look at what we're going to build today. We'll do pair programming view. We'll do shout outs. As usual, this episode like every episode is being live captioned. We have White Coat Captioning with us today making all of this work, so it's more accessible to more people which means a lot to me. It's on the home page, LearnwithJason.dev if you want to follow along with the captions. That is made possible through our sponsors. We have Netlify, Fauno, Auth0 and Hasura all kicking in to make this show more accessible. Helps me keep the lights on and helps me pay for things like captioning and that is appreciated. These are links so you can head over to the site and go and check these companies out. While checking things out, check out Steve's Twitter and give him a follow. We can, you can get a lot of information about Builder.io and what else do you tweet about, Steve?

Talk a lot about front end development, faster development, framework, flexible develop. We have JSS light that powers our code generations. It's a cool way to write components as a subset of JSS code but compile it out to other frameworks. The whole thing, working with designs and design stuff.

Excellent. So today what we're going to do, we're going to build a next app with Shopify to manage our data. And then we're going to use Builder.io to build the front end and then we're going to deploy the whole thing on Nullify. To make that happen, I made a Shopify. I made this Shopify site. I did not put anything in it. I figured we could walk through that together. I wanted to get us set up so you don't have to watch me -- you have to put in your address and stuff for Shopify. Other than, that I haven't done anything to prep. What do I want to do first if we're going to make this happen?

Before we jump into the remake, let's go to the Shopify store and add some products. I can explain the background for anyone tuning in. This is cool, one thing you can do with Shopify is what they call drop ship products. Just what Jason is doing now, you enter the information, give it a price, all that stuff. That takes a little time to input and you have to manage the inventory and whatnot. There is another exciting option that we can do in a second, we can use an app, maybe Overlo to drop ship products. You can get a live store up and running today and deployed and everything and selling products that you don't have to ship to anyone. You choose products from an open list of things you can sell, plug it into your store. When orders come in and a third party will send that to your customer on your behalf. It's neat and you can test out your marketing skills and see if you can make a beautiful site and make money without worrying about ________________ having products and inventory and stuff?

I have know idea what these are going to cost so I'm going to make that happen. We're not going to deal with taxes today. It would be like, something like that so we have a SKU for it. Say we have ten of these available so they are going to work. I also don't know, do I need any of this? Am I just doing things I don't need to do right now?

In your case, I think you're okay.

Let's give it a variant so we can do this. We'll say we've got a, a black version and a -- what other color should I do for this hat? Like that. It will be like this. It will be the hat. I'm going to get this made, I'm really excited about it. Purple, okay. Purple will be the other hat color. We're going to do that. That will be good. We'll say we have ten of these. I'm ready now. I have my first product. Is that enough to get us started or do you want me to do a second one?

That's fine. We can do the drop ship example but I think working with the one totally works.

We'll start there and if we have more time we'll come back and add more.

Let's pop over to the read me. I can walk you through the steps already. If we scroll down a little on the read me just to give people a sense of what we're going to do. We have a video walk through, that is cool. There we go. In the getting started, a little lower, the first steps will be create an account with builder. If you haven't done that, we can do that, a new tab, Builder.io and start the account creation process?

I have not done this. Let's do it. I'm going to do one of these. And not that one, let's generate an actually secure password that I didn't just show to everybody. You come over here and then I'm going to generate a password. Okay. Good. I agree. All right. I'm just going to save that so I don't have to remember how to do it right now.

Perfect.

I create software, that sounds like me. We're going to use next today. I'm in.

Instead of creating a space from scratch, we're going to generate one for this starter. On the left hand bar is a circle, user icon at the top, the one that says "accounts." Let's go to the private keys, it's a pencil button next to the private row. Let's copy that to the clipboard. You can hit the copy button. Going back to the read me and we'll follow the steps from here.

I have my key.

Perfect. We did that. Did that. And we copied, okay. ________________ Now we get to work with CLI. Let's clone this project.

I'm going to make this over here and move this over here and then let's start by GitHub clone, did I get lost. I got lost. Where did it go? Builder.io. Next.js Shopify.

That's cool. Is that an alias.

It's the GitHub CLI.

Nice, I need to use that.

No, what have I done? Oh. GitHub repo clone. There it goes. This CLI is really, really nice. It saves me a ton of time?

It's awesome.

Okay. I have that. I can --

Perfect.

-- NPM, install or is this, it's a yarn project, no it's a both project. Oh my god.

I think we left it open ended. Let's do NPM but we don't have to install it yet. Leave it. It's okay to do it either way. Let's install the builder CL Is and this is cool. That allows you to take the starter and set up a builder space configured with different models like other headless CMSs, you can have different models for the content. Our structure is maybe a home page model, a product page model and other sections that you can edit in builder which is cool. Like a spot for the cart or an announcement bar. This pre-configures it all. Builder create commands.

I'm going to do builder, create, I need a key.

Yes.

I put the key in here and we'll give it a name and the name is going to be whatever I want?

Whatever you want. The cue is what you copied before, you don't want to show it pasted. You don't want people to have access to the accounts.

I'm going to pull this off screen and paste it. I'm running this command.

It will do a few things. Are you seeing a loading bar.

Yes. I'm clearing it off the screen so I can pull it back over.

Perfect.

The command is right above writ says builder CIO here and that's the command we ran. It wrote the home page, did the announcement cart, what does that mean?

I will show you in a minute. The next step is to go into the builder space so we can explore it. Maybe let's go to the read me quickly so I can make sure I'm not crazy. There you go, you got the space.

It did the thing.

It did the thing. We can hop right into it. Now we want to get our Shopify key, I can walk you through that. This is like a demo store set up. But we're going to want to grab your ________________ actual Shopify store data so we can attach to the information like we talked about. Go to the apps section. It's weird and I will explain this. In Shopify to get keys you make a managed private app?

This is sneaky because you come out here and go, I need an app. And you go here, but you have to scroll down and there is this sneaky button.

They're going to make it look really scary. The reason is a lot of Shopify's customers are not technical. If anybody is telling you, oh, create some keys and paste them to me, they have access to your store. In your case you're a developer and understand this and understand the API terms but they want to make sure that people aren't blindly clicking through and sharing that keys with people who shouldn't have access to their store.

There is no sound on my overlays now. Unacceptable. Let's reload that, everyone. Give me just a second. Try it again. Try it again, we should have sound.

What's happening? Why? Why? I don't understand. I don't know what happened. I haven't changed any settings since last Thursday. Okay. Well, here we go. Fine. Fine. Sorry, everybody. I broke everybody and I killed your boops. It's all bad. Thank you for the sub Cassidy, I appreciate it. I don't know why that is not doing what it's supposed to do. Here we go I guess, it's fine. I'll fix it later. Today, today you will have to deal with just the sound of my voice and the crooning of Steve. All right. So I'm going to enable private app development here so we can make this work. Enabling, man, they are like do not press this button?

They don't. I'll tell you the other secret but not secret. Some app developers -- you know in the app store if you have an app, you pay a 30 percent fee of revenue. Shopify has the same deal and some developers are like I can make a private app so I don't have to pay. That is why it says verify to meet the terms. In your case we're following the rooms and making a custom store front properly.

Thank you so much for the raid. What were you all working on today, what's going on? Okay. I have a private app and I'm going to create a private app.

We can give it a little permission, probably a name and choose some scope.

Nice.

Basically we need the app to be able to see your products and basic stuff.

Oh my goodness, a stream game called rattle royal. That is so much fun. Should I call this a certain thing?

Builder Next.js. That is what I did in my demo stores. It's just pointing to this is the app for this custom store front ________________ that you're making.

Got it. I have my admin API, do I need this.

Show inactive ed. Sorry, there are two pieces. Let's do read access to products. If you scroll down below customers. Change no access to read access. Let's go down, I believe we're good without any of that. Keep it simple. In the store front check all of the boxes, this is all read only. I want to see tags and products and customer information. We can use that to power -- a cool set of features is segmentation. You can actually have different visitors, see different content even with all the JamStack set optimizations and we can power that, it's neat?

I'm starting to regret this decision to let people move things independently on my screen. You can see they put a dumpster fire on my face. Thank, that makes me feel loved you want to put trash on my face. Linda, you're welcome. I feel that would be a good tattoo. What is going on Shopify?

I think it's still loading.

Have API credentials.

Beautiful. Now we copy and paste those over into the builder tab. Let's grab the API tab first.

API key.

Very top.

Store front API key.

Yep. You're in the right place, keep going. Store front access.

Here. Here, I need this API password.

I think you can copy and paste it without it displaying here.

Here we go. Everybody get ready to steal my secretes.

There you go. Now add the store name. Stop dot my Shopify.com. The full name.

I can't read this button. I assume that means save it.

Click okay on that. What this is doing, this is one important thing to know that we do for you. The one, here is the cool thing. The cool thing about Shopify, it's been around a long time, tons of integrations and robust. The downsize is they're not always optimizing for a jack stack store front. The APIs have aggressive rate limiting that means the products disappear from the store because you can't access them because you hit a rate limit from too traffic. We're creating a copy of the products that stays in sync. You can use APIs that don't rate limit you to products with high speed and we install web shopper Shopify to manage it. You manage with Shopify and we pull it from builder if that makes sense?

That makes sense.

Cool. Let's do --

How often do I run that. ________________

It's automatic. You run it one time and it's in sync forever.

Cool.

Now you're in the builder CMS view. Once we get things set up locally, it's useful and interesting to explore the structure. Maybe come back to this and go and set up the next JS application that involves, on the read me, you take a couple of the keys that we had done prior and add it to some end file. The Next.js site can be aware of this stuff.

Got it. Haven't opened that up yet. In here we have, we have some stuff. We have an ENV template and production and development. Probably development for now. There is stuff already in here as well?

That's the demo stuff. Let's paste our stuff. Let's go back to the Shopify ad view and get the store front token and you can grab the Shopify domain.

The store front token is this one.

Way bottom, yep.

Okay. That one can be there and then I need the store name which is here. I need the builder public key which is in here somewhere?

Go to account at the bottom. Yep.

Public?

Public API key, that's the one.

Saved.

Excellent. Cool. That is -- beautiful. Did this part, we keep going. We did that. Cool. Going down. And we did that. We updated our keys. Okay. Now we can empty and install and run our application here and have some fun.

I'm excited. NPM install.

Let's do one other thing, let's go back to the Shopify store and make sure the products you have is active for your custom app sales channel. Click on that product quickly and make sure it will be able to be pulled up. If you scroll down, there we go, builder Next.js. I think it's there. Can you hit Next.js.

It's in a lot of these. Why do I have three of these? Son of a -- I know why. I kept clicking the button, Steve. Okay.

Well. We have the keys for one of them. We have three builder apps.

One of them is going to work. It's active for all three.

Exactly. I think we'll be okay. If we don't see products we can do some fun debugging. I think we're in good shape. Jump to the CLI and run the Dev server. After it's done installing.

Sharp. Okay.

It's part of the XJS, optimize those images, jack stack.

JAMstack. ________________

NPM run Dev. Sweet, now looks like -- is being used here, copy that -- we can see the site here which would be cool. We can explore the structure of the site really quickly.

This is getting us started out of the gate with everything running which is exciting.

Exactly. If you just wanted to launch a store, you can launch it?

A good voice command for what? What would yelling JAMstack unlock? With jazz hands. Not like JAMstack but JAMstack. I'm in. I like that. That's fun.

There we go. We have this cool video, this is one of our engineers and he is explaining how to set up some of this stuff. But we know what we're doing. This is a page in builder where we added an embed component. We'll play with that in a second. This is our store that you can actually mess around with. We'll do some cool customizations. Copy that local host 300URL. We need to add that to builder 2. We go back to the builder tab. Go to site URL right on this page, the second row edit button and paste the local host, great. Cool. Let's do some visual editing this. Is where things get cool. It takes components from the -- you make pages and pass in the props and maybe make some new ones. Let's go to the content tab. The very top icon on the left-hand side bar. Sweet. Let's go to that home page. See the entry there in the middle of the screen? Click that. This should, if everything is set up right, load the local host. There we go. You can click and do stuff?

Click y clack and do stuff.

We're on the development site now. You're editing a page. It's in between the header and the footer. You can install the builder edit able areas anywhere. Delete that whole component. Custom components are cool but the purpose of builder is not to rely on codes. Go to show more in that, right there. Cool. Let's drag, choose the, there is a hero. Grab the hero component. This is a cool one. Cool. This is a component in our code. If you double click on it you can insert the props. This is a normal component and you might hard code around passing the props. Hey, there you go. You can supply any of these things the component takes as the input. The forms are automatically generated and do a lot of neat stuff. It's not limited to static stuff. We can drag in the product components and display a product on the home page and it's dynamic and always in sync with the back ends and that type of cool stuff.

Okay. So that seems like good, good. We can set a link URL.

If you want the whole thing to link somewhere or the CTA link is that read more button. ________________

I got it. Okay. Good.

One thing that is cool -- we'll do a couple cool things and maybe we can explain more in the set up how it works. Why don't we add one of these product options. If you go to --

Let me verify my e-mail so we can actually see what is going on.

Good idea.

Get started with builder. Let me click this link.

That is intentionally annoying.

It's a good thing to do. I can't read what the buttons say and I want to get that fixed. I'm going to reload.

Cool. Here we go. All right. No more e-mail reminder. And I have a hero. I'm going to Zoom in a little bit, too, so we can see a little more. I'm on a small screen for streaming so we can do that.

Let's hit the accept cookies button on the site and we can get rid of that notification. Now we can breathe better. On the insert tab on the left, if you hit show more above the gray box. Hover over, if you go to product grid, is that the one where you pick products. Yes, drag that product grid in. In a minute we can go in and fuss with the code. Double click on that. It's an empty box because you have no products. Hit plus products. It takes a list of products as an input and we want to choose one?

Okay.

There you go.

Look at it go. Okay. And so I have obviously over here not chosen the best image. It's a little tiny baby PNG, it might be on the one now at 600 percent size.

The benefit is, it's a very optimized imagine.

JAMstack. Let's make this smaller. This is nice and intuitive. It feels, I made it so much worse. I spoke too soon. What have I done? Let's see, oh, I didn't make it square is why that went poorly for me.

Yes.

Offset, limit, three, good. I'm going to do all of that. What if I make it -- that helps. That's better?

Yes.

Nope, I broke it.

That is just a different variation on, what this allows you to do is add a whole grid of products and this is from Versells Next.js starter. They have ways to display different products different ways. Like if you're selling dresses and they need to be vertical. These are the components of the code and you can decide in builder to make rigid components or very flexible ones that give more drag and drop control. It depends how much of a barrier you want between the marketers?

Did we publish this. ________________

No. Publish update. And now I'm reloading.

Reload. There might be a cache the first time. Nope, there you go. That's a beautiful website.

That is really slick. I can see the value in, especially, I mean I'm, I am a developer, I like to code things but sometimes I just need to get something up and being able to just very quickly get this plugged in and running is nice. I'm a big fan of that as a general set up. Like granted, I'm going to need to figure out how to make these more sensitive. I need more products so I can see what happens when I plug things in. But this feels nice as an initial set up here.

Cool.

Looks like this is set up to run in some kind of a grid.

Yes. Precisely. It's like a fancy masonry style grid. You're spot on. I'm a developer myself and more and more we just build stuff in builder. It's not just for the hand off to non-developers but it's really nice to decouple a lot of your content from code deployments. Even in the builder app, some of the screens are builder powered. It's amazing to jump into the builder app and change text and shoe a different tutorial and hit publish and move on. If we deploy code and roll it back, it's not like oh no the content changed. We like separation of content and code. If you have content in your code and the layout of the page and the text inside it .F you have a headless EMS, that is an improvement but the layout often needs to change on the fly. If you think about component driven development, make a great set and make them flexible and do the composition of the components in builder. Like this home page, you can schedule a different home page to go live. If it's black Friday or memorial day, schedule that ahead of time?

Wait. Show me how that works.

Up at the time, you can make responsive tweaks too and play with that. That is fun. There are two things that are cool with targeting and scheduling. It's going to warn you you can't, it says it's a trial feature. You are allowed to use it. You can pick a start and end date like air BNB travel dates. When you publish this version, it will only be live during this date range?

Holy crap. If I as a developer want to run a sale and I'm like, this is live now, we're ending the sale on Friday, now I don't have to wake up at 11:59 on Friday night? Oh, man, I just dated myself, didn't I. I am already asleep by 11:59 on a Friday night. I have to wake up and make the change to take the sale down. You're saying I don't have to do that anymore.

Exactly. What is nice is you preschedule, everything is good. You don't have to worry about pushing out a branch and what is on it. Et cetera. Maybe some other ways you can schedule content through an API, it's limiting. Our customers usually value, when it comes to a sales weekend, they can change ________________ the template entirely. Maybe they have a hero and they have this. On sale day they want the page to be sale, sale, sale. That's important and makes a big difference on how much people buy. If you cram the sales information to the wrong template, its doesn't convert well. You want to make it clear when you're running a sale. There are many directions we can go with cool stuff we can show. In this example, the announcement bar, the top, the section text, that is content in builder and you can schedule these independently. The bar may have special dates and times and show special information. Let's edit that. This is made bespoke. We talked about primitives and showed components. What is cool about this example is we can use the primitives in the style tab this time. I don't have an announcement bar, not found. Maybe we skipped it. I skipped the double slash at the end of the URL.

I screwed it up. I probably need to go and change here, here.

Maybe, let's try that. Local host 3,000. Let's go try it again.

It's possible we made an update to the starter and renamed the model and didn't reflect in the code.

No trailing slashes. UX feedback, save me from myself.

So anyway, edit that text and let's do some styling, too. I think this is fun. Obviously announce whatever you want to announce, Jason is the coolest, JAMstack is the best, jazz hands for the win.

Okay. And then the link URL. You know what I need? We'll go here, everybody can go and play with the boops.

Cool.

Now I'm going to edit the style.

Sounds great. Now you can just go nuts.

Okay. Got it. Got it, fill color. Let's make it -- we were Stoked about purple earlier. We'll go with that. Apple systems, let's use that. A font weight. Bold. You got to know those unlimited boops are available. Text color, that seems good. This seems right. I think the accessible folks, how is my contrast? I think that is good. I can test it. Let's find out. One cool thing worth noting on this, you can set very granular commissions for this stuff. If you're a developer and you don't want to marketer changing that, just give them that role. No CSS for you. I don't want my marketer touching the font size, only give the designer the permissions to edit the styling. Then the designers can make templates and you can drop those on like the component blocks and edit the pieces. If you don't have design ________________ permissions, you can only edit the text and the link and no CSS for you?

Question from the chat. Is the scheduling only available on the 35-dollar a month plan.

Good question. Let me look it up. I believe it's on the base of the plan, meaning whatever is the cheapest one. Let's see what the latest pricing is and I'll tell you.

Can I go to the website?

You can go incognito. Scheduling is on the 35-dollar a month plan. But you can get a free trial.

Okay. I know you didn't ask for this but you're about to get some opinions. You know what one of my biggest pet peeves is. When I can't go to a company's website when I'm logged into their website.

That is how it used to be. It drove people crazy they can't plug in Builder.io. How do people handle that, like a button to say no, show me the site anyway.

Like sub domains or a Nav bar at the top. I'm not going to tell you how to do your business. That is just me. Actually, we have a captive audience. What do you think, chat, do you want automatic logged in experience or do you want to be able to go to, like the home page of the site? And while we're waiting for that, we can jump in here. Let's figure out something else to do. I have made this change so I'm going to publish it. Wait.

There's a little cache in there. Potentially give it another load. We use what's called, actually, Next.js is fond of this. Stale while revalidating. Sometimes you just need a couple of refreshes and you get the latest and greatest.

Luke, 90 people and I'm the only opinionated one? That's right. Just you. Some people don't like sub domains. Minimal opinions. The only one for me, I just ran into this on another site, I went to figure out how to get a feature they had that I wanted and I went to the billing page and it was like upgrade and I clicked it and it changed my plan and charged me more money. And I was like, no, I wanted to see what the plans were before you changed my plan. Anyways, it was frustrating and I couldn't go to their pricing page without going incognito. That is fun?

That's a hundred percent fair and valid point. Maybe we can open up the code and start messing with the code. Maybe give the hero component a second button or something. It will hot reload in the developer so we can do cool props and stuff. Go to hero. It should be in there somewhere. It might be in, I think we're calling them sections in this repo. The sections are the builder enabled components.

Am I looking right at it and missing it?

Try, you should be able to go like control T or whatever you're sort of like new file, quick searches. That works. ________________

Sections.

Sections slash hero.

Hero bot builder dot TS. Oh sections. Got it. I missed that folder. I was in this folder and got lost. I have my hero site. We have the hero component. See some type script?

Yes, there is cool stuff going on here. If you want to look at the component source you can go to hero dot TX. That is a reactive component that you can use anywhere else inside of the app. This is nothing fancy. This is derived from the starter that we forked this from. Same styling, this and that. It takes props. There is no magic here. We don't want you to build components with builder in mind. Take the components that you're using or build them and tag them for use in builder. If you go back to the hero dot builder dot TS, we can work through how the tagging works which is neat. One thing that is cool about the file we were just looking at, the hero dot builder instead of TSX. We use Next.js' lazy loading feature. We're not preloading any components. Only components used on a page loads when the client loads. Builder register component. You give a reference to the component. The cool lazy loaded version. Give it a name. That is what makes it show up in the side bar. We specify more information about the props that we want to allow editors to use and that will generate the nice form that you saw, you can edit a string. You can have, we can be fancy and change the type for CTA link to be URL instead of string and validate it?

Each of these is coming in as a prop to our -- got it. I understand.

Precisely.

If you want to mess around with the component, you can open up the builder editor, like the home page where we had the hero in use. You can go in and change the styling or remove the link in the top script and have it hot reload. You can develop on the components and stick the props in. It's a fun way to explore it. Similar to story book, story book exploration but you can actually publish stuff with them as well.

Nice. If I run this. Sit running?

Looks like, yes.

It's just not styled.

There you go. Exactly.

It's down there, just not styled. So I need to add, is this tail wind?

Yes. Looks like tail wind. Drop that in there. Here we go. That is nice and fast. That is easy to use. Cool, this looks flexible. I like it when you just get to write the code you want to write. This kind of set up here of defining things like this, this feels familiar, I've seen this done. I'm kind of a fan of keeping this as simple as possible. ________________ I love that we have default values baked in. Now does this, yes, this is pretty slick. Where would I find -- are there build -- does builder have docs about how the API works in terms of the types that are available?

Yes, we can open that up. Go over to the left-hand side bar and go to the learn tab. That will pump you over the docs. The docs are all made in builder which is a lifesaver so we can quickly create and publish the docs and have cool custom components for displaying the code. Search in the bar for react. I think we'll be able to get the custom react components something something should show up. This is a cool component in our code. Do the top one.

We've got this, that is how this is working now. We pull in builder. Builder, and now the builder dot INIT is happening in index dot TS here.

Somewhere. It's going to pull from that environment variable in our case which is kind of cool.

Okay. Cool. We're cool. And then we builder enable a component. By getting builder. Lower case builder to INIT. Capital builder -- got it --

One is an instance you can fetch data and it caches and the other is the static class equivalent type of thing.

This is cool. If you were building your own syntax highlighter, got it?

The cool thing is that's the same component for the syntax that you're looking at in the docs.

What does this mean? This builder component?

So the builder component is what you use to say, like that home page we were in with the announcement bar. That's like the announcement bar, it may be hard coded or hooked up to a config file or a minimal headless CMS. If you wanted to replace the hard coded announcement bar and have a builder powered one, you say builder component, model names, equals announcement dash bar and go to builder and create a model. We can create something new, too.

That shows up here.

Exactly.

Can we do that? Let's do that. That seems like something that will really help this gel. I would call this a section? Where is the announce. Bar.

Probably part of the page lay out. Search announcement dash bar and I think you'll be able to find where it's defined.

Announcement dash bar.

Yes. I think NAV bar dot TSX. Try adding the dash, the dash L the dash case format is the one that will give us the model name string. There we go. So for Next.js, let's see, okay. We're doing a couple fancy things this is a kitchen sink starter. In this case we're fetching the announce. Bar context using the plain JavaScript. If you use the react component, it will fetch for you ________________ automatically. You can write the code to fetch it manually. I will explain that in a second. But we fetch the JSON object and pass it as the content prop. You can pass in the content that you want to render where it loops over the J on and says you want text and your custom component and stuff like that. Does that make sense? It's a little abstract so to speak?

It's an abstract concept. I'm with you mostly. So let's do this, because I think I'm going to need it for understanding, here's the part I'm missing, how does this know anything about layout?

Yes. No, that's the cool part. Why don't we open a doc that will explain this a little bit if that makes sense. If we go back to what we were looking at and scroll on the left side bar. Scroll to the top. Very top and go to builder technical overview. That will explain some stuff. I'll walk you through this if you scroll all the way up. Basically, let's go down a little bit. There will be a code snippet. Cool. There's what we were looking at, the builder component, model equals page, content equals JSON. What is in the JSON? The example shows it. We have an array we call blocked and each block has a component. So the text block is a text component. It's a proper react component. It takes options which are the props like text, knows how to render text. You can have blocks one by one by one. What is cool is each block can take a component inside as well. One of the blocks might be called columns and the columns have columns inside where we render new components in the big tree. Each of these can have styling information. When you click to set text color and things like that, it comes together and renders full pages or announcement bars or stuff like that.

Gotcha. And let's see. This, announcement is here, announcement content. Builder dot get announcement bar.

So the one cool thing you're seeing, the simplest way to fetch the data is say builder dot get announcement bar. On the back end, we say this is scheduled to go live tomorrow. So not that one. This one is live now, you get this. We can also do segmentation. You can pass additional user attributes to be smarter about what content to show. This is cool in E-commerce land, you might want to show the announcement bar that has all the items in the cart. Maybe if there are no items in the cart, you say, hey, $50 of items in the cart and you'll get free shipping. Once you have $50 in the cart, great, you get free shipping or add $50 more and you'll get super fast ship organize whatever makes sense. We can target different types of content based off that information?

Got et. So when I look at this in builder, am I going to see something about item in cart in here?

Yes. You want to take a look at that? Let's go into that. We'll do two things. The cool thing about builder is any piece of content can have many, many entries if you schedule ________________ different times or target different ways. Let's duplicate the purple banner in the top right. 3 dots, the hamburger style menu of the web application. Let's go duplicate. Now we'll have a new clone of this. We can make our edits and choose who should see it instead?

Okay. I got you.

That's one of the neat things that I noticed in my past job was the, a good marketing team should have a huge volume of ideas and when they're bottlenecked by developers, you can't get a lot of the ideas out. If you can make many copies of content and create variations that are AB test or targeted, you can get conversion value or sell a lot more products. So we'll make a variation and target it?

Because it looks like we're getting whether or not there are items in the cart, we should be able to show if you don't have items, we'll show the sale. If you do have item, we'll show this.

Perfect. Let's add the items. At the very top next to scheduling is the targeting button. Boom. Let's add some targeting. So this is --

Okay. Now. Is this a thing that was added and if so, like, our user attributes, is there a schema here. I set things.

Exactly. We can look that, too. What we did is we set a schema which is we're going to be able to target off the items in the cart, a URL. Clicking on a collection page might show more specific information about the collection you're viewing or if we're editing on a product page, there is a whole list of use cases but for this specific product, maybe we sell a mask and a shoe. For the shoe, we target content, all the editorial about why our shoe is the most amazing ever. For the mask we have totally different content relating to the mask. I think we show collection. We have lots of shoes and we can say any shoe in the shoes collection we show this. Any shoe has certain information, and mask has certain information. You can go wild with the different use cases?

If I publish this, now that we're targeting, what I should see is, I will reload.

This is where caching might hit us and we have to reload a couple times.

So we have something in our cart. Now if I remove it.

There you go.

Add it back in. Cool.

I mean this is slick, right. I can see where this really starts to be powerful. I can see, I can also see how I can make this very, very hard on myself as a developer. Because there are lots of move -- things move on multiple axes here. I think there's like, this is one of those probably start by reading the docs. With the variations and the custom components and the ________________ builder components and the extra schemas, make sure you know what is available. If we dig in here, I want APIs probably.

Sure.

Maybe. Content API, which is the API that I want if I want to see the schemas?

Oh, yes, you can go to, probably graph QL. If you want to inspect the schema, graph QL is the best one. Go in there and poke around all the different models, the options to query off of and stuff like that which is cool.

Can I just hit this.

I think you can click on, below the video, I think we have a big, the large blue button. There you go.

This one is giving me a run for my money. Which one is bigger? I think 11TY has you beat.

The nice thing is that button is made in builder so I can log in and make it ten times the size and publish here on the spot. We can get into a competition if you want to.

So in here, yes --

That's our things. We have an announcement bar with certain fields. Often times people want one, we have one announcement bar or a list of them. Most sites just display one at a time. Per the point about set up, two things that are probably useful there, one is generally we recommend people start simple and get more advanced. We made this kitchen sink approach where we can show you everything all at once. But most of the time people hook this up to the existing site just to create great landing pages. You don't have to register components, just hook up a simple code snippet and people can generate landing pages and wipe out a good chunk of your engineering backlog by creating pages themselves. This is what we're querying from to show your products. If you hit enter now you might be able to just see products without specifying a query detail.

How do the query details work? It doesn't look like there is a schema for this. It's abstract JSON. Where do I find how these work?

Go to the API docs and I can explain it for you. Go to the content API this time. You might have a query example. Go back to the graph -- you might have a query example. Search, I feel like control F for query. Let's see if we have something useful here. Keep going. Maybe query colon. There we go. What this makes is Mongdb style queries. A key is a value. The contents of an object is usually in the data object. Any content entered in builder has a couple top level fields and all of the custom fields are in an object called data?

If I run it like this, I can do something like data ID, ________________ like that.

In this case ID is top level. That is one of the built in properties and data is something you build on top.

If I change this to be something else. Comes back. Comes back empty. Makes sense. I'm in, that's fun.

This is neat, too. Shopify has good tools for querying the products. But when you dump it into builder you get full database style. If you want to really query the database, just run it against the collection of products here. It's worth noting you can do the same for the pages. People start very simple and drag and drop and make pages and don't get fancy at first. Larger organizations, this is one nice thing about the point earlier about monoliths and JAMstack or micro services, unbundling the services is some people have a lot of complaints that localization with some of the monoliths can be quite hard. But in builder, you can add custom fields to your pages low local and you can query off that. Now you add localization to the store in almost no time which is neat?

Let's look at that. I was going to do something else. How does localization work? I would just duplicate or do you have localization built in?

There are two ways to do it. We recommend doing it with targeting or custom fields. We can do the targets way that shows how the fields are defined or custom fields where you query off it. Maybe let's do it the first way because you asked about it before. If you go on the left hand bar half way down the screen, the accounts tab. And then custom targeting attributes. Hit the pencil button over there. Is that disallowing you? There we go. Cool, this is where we defined types of stuff we take. Each as an input type and we can create plug ins to builder and hit new target attribute and create a local one. That's sort of the, outline button, yep.

And then I just leave it?

I think string is good. Make it an ENUM so we can pull from a list. String is the type and ENUM is the type next to it. And do whatever you want. That totally works. Each one is, actually, is there a list of commas?

Let's find out.

I think you want to hit enter. Cool. Boom. Hit save.

Now when I go back to my page, I have my home page.

That's the standard one.

All right. You're on the right track. Make a duplicate and transfer the content.

Where is this field?

It is in the targeting options. Very tippy top. Add a new targeting parameter.

Local.

Local is, boom. All right. And then I go over here and I duplicate? ________________

Yes. I would do that.

And I can switch this over to Spanish. And then.

I don't know what PJs is in Spanish. So here we are. I'm sorry to anyone that speaks Spanish. But, then if I save this and we can do that now. Then we can do the same thing for French. We can duplicate one more time. Come back in here.

Don't tell me you know how to write French, too.

Let's find out.

Do you watch that old Dexter's laboratory episode. He learned one saying and he was like the most popular.

That is not right, is it?

If it's not right, it's really close I think. I only have high school knowledge of French but it rings a bell.

Help, help. How did I do.

I think I'm wrong. I was in the ballpark. My French spelling is not my strong suit. That is okay. We'll go here. I'm going to publish that. And now we have localization. How do I get this to show up?

So let's go back over to the code. This is perfect. Maybe we'll hard code it for now so we don't have to, we might not have time to create a local picker and stuff. I think if we hard code it, you can figure out how to provide it. Do a product wide search for, look for page in quotes. That is probably the easiest way to find where we define model equals page. Go to model equals page, at the very bottom, results in path dot TSX. Cool. There it is. Go to where we fetch that content. In this case we're fetching in the get static props most likely. Go up a little higher. Probably a builder dot get. There we go. Yes, we have this resolve builder content. And I think did?

Did this get updated or was local already here.

Local was a thing in the starter that we're passing through. We redefined it. This is a perfect example. Well got one step ahead. I think we had the original starter had localization. We removed it from the builder space to not confuse. And essentially we're adding it back. Let's click into, command click into resolve builder content and see what is in there. I think we created a wrapper function around fetching the contents that does what we want. There we go. Cool. We passed the name and targeting attribute.

Targeting attributes is what needs to go in, right.

Yes. Exactly. So you can do like an object spread and pass the local. I think local makes sense to always pass anyway. We can ignore the fact that we have it.

Can I put it here.

That object is the user attributes that we're passing. A ________________ little bit more confusing.

Oh, I understand. Well, I only sort of understand. This local that is in here is in here, so if I hard code this to French, I should get the French version.

Yes. We should. Assuming everything is published and we may have a brief caching period but we totally should.

Let's look out here and go to the home page.

The Next.js Dev server is super slow. That is probably the home page collection. I think the collections are on top.

There you go. We are in French and if I change it over to Spanish, and if I change it to English. Cool. That makes sense. I'm following you here. So we can just pass in these custom things and figure out how to determine that either from the headers from the browser preferences, whatever, or from a selector like you mentioned. Any of those would give us the ability to determine what the user's preferences were for language.

Yes, exactly.

And we can show them the right thing. Cool. This is slick. I can see the power of this approach. Right.

Totally. Yes, I'm glad it makes sense. For context, too, adding custom localization for a Shopify set up, crazy adventure. So one thing that if any Shopify developers are watching this should be a breath of fresh air that it's simple to create and pass parameters and update on the fly and you're in control of how you manage that. To optimize for static build, it would be best to be on a sub path. That way the pages are generated statically. We can use Netlify that does it in a super optimized way. And other things that don't need to be rendered on the server side, the initial page load. Maybe the announcement bar can be dynamic or when you slide in the cart, that content. That can be dynamic based on cookies or other stuff?

This, I believe we are, like we should be good to deploy this, right. If I want to do INIT and get add, pages. Git commit that. And do an update. Then I can push -- wait, I need to repo create. I love this. We'll make it public. Continue?

It's so cool. I'm glad I got to learn this.

Already exists? It does?

Did you do a fork or something?

I did. Git remote, remove origin. And then we'll try that again.

In the chat, everyone in the chat is totally right. One way to look at what builder is, they were mentioning Weebly and stuff like that. That's great if you're an individual SNB. I have friends that have no developer skills and it's awesome. As soon as you want to add a line of custom code, it's like oh my god. You're in dream weaver land or a land with no UI control. At the macro level we try to bridge that chasm. Today, if I ________________ didn't know how to code, I can make a website. As soon as a developer wants to add code, it's throw away the whole site and build it from scratch. We try to fill the chasm and say we can, you can have an interface of like a web flow space but you can control the text stack and make it fast, hook it up to websites powered by Shopify. And I'm glad the followers are rocking that well?

I'm going to import, I have to nullify INIT first.

You might want to copy the M development. The keys we added are running in production, too.

I think what I can do, I have a plan. Let's do LWJ Builder.io. Next build. That should work. We're going to use the essential Next.js plug in. That is all going to do what we want. Cool. Happy with that. So we've got a deploy key added. I'm going to import my environment variables directly into nullify. These are in nullify that means we can run nullify DEV that means I can ignore my environment variables because I don't need them anymore. Let's just ignore all of them. Get out of here. Then we can get remove cache, is that right?

Yes I think that is right. Dot given. Cool. Now if I push this. What should happen, let's find out, we're going to nullify open this. And you can open the right browser, you did. Okay. What should happen, let's find out, is it should automatically set up the Next.js plug in for us and this should just work.

Is that automatically determined just by having a next config. It understands.

We use some heuristics to figure out the framework and if it's next, it uses the Next.js framework and understands why the -- will work on nullify.

On steal website, it's killer. Having to do full static builds is difficult if you have so many products like large catalogs, it's an amazing feature that you support.

That is where you deploy it but you see out of date content and you have to tell people to refresh a few times. There are a few ways to approach it. Where I've been leaning is on trying to get, like, it always depends on the number of products, it depends on the frequency of changes. But like, because of that stale part where people might see something wrong for a minute or two, when you're trying to do things like keep the pricing up to date, I do it client side?

100 percent.

If it needs to be up to date, stale revalidate is going to get you in trouble because people will be looking at old data the first time they load the page. If they don't know to refresh it, they're going to think that something went wrong when they ________________ click the one price and then get to Shopify and it's another price.

People do client side for the same reasons.

I don't think it's running the plug in. Did it run the plug in.

It didn't.

Why didn't that work? Well, let's just add it. I'm going to add this plug in. Add it to this one. There's a reasonable chance that I have screwed this up. This is my account and I'm on a bunch of feature flags right now. There is a decent chance I broke it for myself. This will build again and we'll get the, we'll get everybody up and running. I want to check just to make sure, what version of next are we using. We're using next 1005. That should be fine. There was a, next is tricky because the minor version is causing breaking changes sometimes. 1006 to 1007 had some breaking changes and most recently I think dot nine was a breaking change. They switched from synchronous config loading to asynchronous and there are challenges. This is installing and loading and that should build properly and then we should be good to go. Let's do another shout out. We've had this show today completely live captioned. Thank you so much to White Coat Captioning for being here. That is make possible through the support of our sponsors. We have Nullify, Fauna, AuthO and Hasura. It's on the home page every week so you can check that out. While you're there, you can check out the schedule. We have exciting stuff coming up. Later this week on April fool's day, we have prince coming back on the show. If you don't know prince, you should. This is going to be fun, we're going to play with the event sub API from twitch, doing realtime stuff and playing with the overlays on the show. Next week, Cassidy Williams is coming on. We going to Troll search Sarah Drasner who until very recently was our boss. And then Nikolas Burk is going to come on. We're going to do stuff with Prisma. If you don't know Prisma, it's an ORM like thing for databases, it's very cool. They've been doing a ton of work on it. Super excited about that. We're going to do forms in Angular, and Nathanial Okenwa back to do custom IVR and you may have seen Ben in the chat. Ben Code ZEN. I'm going to take a vacation. I'm taking a vacation this year. I don't know when the last time was that I took a vacation. Just because I'm going on vacation doesn't mean the show shouldn't go on. Ben Hong is going to take over learn with Jason. We're going to do a week of learn with Ben. I'm excited to try this out. It's going to be a blast. The week of ________________ April 25th? After this week, after Shaundai is on the show, it's a week with Ben. That is an experiment and I want to see what happens with guest hosts. I think it's going to be an absolute blast. Steve, where should people go -- oh no, my build failed. Deploy directory out does not exist. Why does it think, the next config, oh, okay. We've got things set in here we have to fix. We have to set the target. Is it not setting it for us? Target property to server list. We'll deploy one more time and this one is going to work. While waiting for this to build. Serverless, I can spell. Save. Fix, add config. That is maybe why this didn't get picked up, the next config is not compatible with nullify. Let's push that and get going. Once that is in, we'll watch this deploy. Here, it's going to work this time. Steve, everybody is going to go follow you on Twitter right now, right, rite chat? How many of you have followed since we started this episode?

I don't have a lot of followers.

Everybody get in here. Steve, where should people go to learn more about Builder.io.

Go to Builder.io. There are a lot of resources linked to there. You will be to go incognito because of being locked in. The other cool spot is GitHub. We have a will the of open source stuff on GitHub.com slash Builder.io. Yes. There is cool stuff here. Getting started. Some people don't want to use react. You don't have to. You can use view or Angular. We have html API. We have SDKs, examples, plug ins. A will the of cool stuff. You can say I hate this product or I want this feature and we respond to them all. You can poke around there. You can check out other related open source projects like a cool one we have is an import from fig ma. You can make a design in fig ma using the cool auto layout and suck it into builder and repeat that. And it's cool because you can do that as a builder customers and import and design and publish. There is a code icon at the top by the publish text and undo and re-do. Git output code, you can turn any content into code of your choice. You will see tabs for react, view, html. And so you can sort of grab code. This is pretty fun to import a design and turn it into code. You don't have to be a paying customer to use it. If you're tired of copying and pasting code, hook it up to API and then you just publish. You can see that on the GitHub, play around with the features. It's cool stuff?

Very, very cool stuff. This is generating static pages this time so I think it's going to work. Let's hope. This is what we want to see. This is from the next plug in. With that ________________ we are out of time. Let's go ahead and find a channel to raid. Steve, thank you so much for hanging out today. This was super fun. Builder.io looks exciting and I'm excited to see what people are out there building with it. Everyone is going to go and follow you on Twitter. Thank you for hanging out today on the chat. It was an absolute pleasure. We will see you on Thursday. It's going to be great. Talk to you soon, chat. Bye for real.

I'm going to start this raid, let's get everybody over there. Almost, almost, raiding. And we can end the stream. That has ended. Thank you White Coat, we're all set. ________________