Create an Ecommerce Site Using Shopify, Next.js, and Builder.io (with Steve Sewell) — Learn With J

Aug 15, 2023

Create an Ecommerce Site Using Shopify, Next.js, and Builder.io (with Steve Sewell) — Learn With J

How do you give non-developers control over the look and feel of an ecommerce site? Steve Sewell will teach us how to use Next.js, Shopify, and Builder.io to do it!

* demo: https://lwj-builderio.netlify.app/
* repo: https://github.com/learnwithjason/lwj…

Links:

- https://www.builder.io
- https://github.com/BuilderIO/builder
- https://github.com/builderio/nextjs-s…

— Watch future episodes live at https://www.twitch.tv/jlengstorf

Credits:

Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)
Source: http://incompetech.com/music/royalty-…

Artist: http://incompetech.com/

Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)

Artist: http://audionautix.com/

Additional sound effects obtained from https://www.zapsplat.com

Content

7.279 -> hello

7.919 -> everybody and welcome to another episode

10.96 -> of learn with jason today on the show

13.519 -> we have steve sewell steve how you doing

17.76 -> i'm good thanks how are you good i i i

20.24 -> just realized i didn't ask you to

21.439 -> pronounce your last name and i i may

22.88 -> have just butchered it

24.24 -> you nailed it i did okay all right good

26.32 -> i was like i said it out loud and i was

28.48 -> like oh

29.199 -> no

33.04 -> no you nailed it um so steve i'm i'm

35.92 -> super excited to have you on the show uh

37.6 -> but for those of us who are not familiar

39.2 -> with your work can you give us a little

41.12 -> bit of a background on yourself

43.12 -> yeah of course and so um i mean i think

45.92 -> similar to a lot of the topics on your

47.36 -> show

47.76 -> i'm a huge fan of the jam stack the very

49.76 -> modern sort of component driven

51.68 -> very rich client-side sort of uh

54.16 -> front-end development

55.44 -> been a fan of it for a long time dating

57.28 -> back to like 2012 back when it was

59.12 -> probably a bad idea

60.64 -> for most people but it was it's exciting

62.64 -> it was like let's make this really fast

64.559 -> slick feel like a native mobile app sort

66.24 -> of websites especially for shopping and

67.92 -> other things

68.96 -> and so i've been dabbling with sort of

70.56 -> the front-end frameworks and tooling for

71.92 -> a while

72.88 -> also been a little obsessed with no code

74.72 -> uh my background in development was

76.56 -> originally on the design side

77.759 -> i just wanted tools to let me whip up

79.439 -> sort of apps but i think for a lot of

81.36 -> reasons that's never existed

83.119 -> and so anyway recently in my career i

86.08 -> sort of joined a company called shop

87.68 -> style

88.479 -> i was leading their web engineering team

90.159 -> and they had this very dated tech stack

91.68 -> so we we brought them to be more modern

93.6 -> we were on angular which was super

95.6 -> popular at the time

96.64 -> still of course is and it was awesome we

99.04 -> were one of the first sort of like

100.4 -> fully single page application ecommerce

102.64 -> experiences

103.52 -> that was super cool yeah but one thing

106.32 -> we noticed

106.96 -> really quickly is e-commerce stores um

110.079 -> are very much driven by their marketing

111.52 -> teams to sort of like create pages

113.36 -> merchandise products like show these

115.04 -> products to these visitors

116.56 -> and we had the super slick sort of front

118.159 -> end application but we had no really

119.84 -> good way for them to actually whip up

121.6 -> these pages and try and test these

123.04 -> different experiences

124.399 -> and we found that you know when working

126.56 -> with sort of the new stack a lot of

128.16 -> these sort of legacy tools didn't fit

130 -> well they would try and use

131.2 -> you know jquery style javascript and

133.04 -> sort of inject an av test and stuff

135.28 -> it wasn't a good fit for the performance

137.12 -> that kind of component driven

138.4 -> development

139.04 -> and you know a lot of other aspects and

141.44 -> so

142.08 -> in getting this huge flood of you know

144.239 -> we need to build this page we need to

145.44 -> modify the home page we need to run a

146.879 -> test

147.599 -> uh we were just hand coding up all this

149.2 -> stuff and i was like no engineer likes

151.2 -> to do that right they want to make their

152.48 -> components make this beautiful sort of

154.239 -> design system

155.44 -> and then ideally hand that off and so

157.599 -> you're not actually like coding up the

159.519 -> layout of pages

160.64 -> rather you make this great design system

162.64 -> and your marketing team can decide i

164.16 -> want to show

164.879 -> you know this hero with these buttons on

167.12 -> the home page maybe some products

168.959 -> personalized to the person visiting the

170.56 -> homepage and whip up landing pages and

172.64 -> stuff like that

173.92 -> so we realized that was sort of like the

175.599 -> need but there wasn't really a tool to

177.28 -> fit that

177.84 -> like in theory you needed like a web

180 -> flow that was component driven and could

182 -> hook up to an angular or react or

183.92 -> whatever type of website

185.599 -> and i remember at the time i was like i

188.08 -> don't know if that's possible that seems

189.519 -> a little out there but i was kind of

190.8 -> bored of my job and i thought i'd give

192.159 -> it a try

193.04 -> so i started coding up the initial

194.8 -> version of builder which was this idea

196.72 -> sort of register your

198.08 -> in this case of shop style with angular

199.68 -> components and let your

201.76 -> sort of non-developers compose pages out

203.84 -> of them and just quickly whip up

205.2 -> run a b test etc and not have to bang on

207.76 -> your door like hey i need a new page

209.44 -> which is really just the same components

211.2 -> in just a different arrangement

213.04 -> uh and usually in ways more intricate

214.799 -> than like a standard headless cms can do

217.28 -> so that was sort of the generation of

218.879 -> builder and uh

220.56 -> now we have a good bit of customers a

222.159 -> lot of fit in e-commerce and otherwise

223.76 -> shopify apps and all sorts of stuff cool

226.56 -> yeah and and so

227.84 -> shopify apps are kind of where we're

229.12 -> looking today where we

230.879 -> we are like so and this is something

234.4 -> that i think is kind of exciting right

235.68 -> is

235.92 -> is that we're starting to approach this

238 -> level of

239.04 -> like the good thing about the jam stack

241.84 -> is it unbundled everything we we weren't

243.599 -> stuck with these monolithic

245.12 -> solutions where we could build in

246.799 -> whatever front-end language we wanted

248.159 -> but we could use whatever back-end we

249.68 -> wanted to manage the data

251.28 -> and that meant that we could mix and

252.879 -> match we've got the

254.319 -> you know our blog should be handled from

256.479 -> something that's built for blogs and our

259.199 -> e-commerce should be built with

260.639 -> something that's built for handling

262.24 -> product data and

263.36 -> all because like there's so much that

264.8 -> goes into an e-commerce platform we've

266.4 -> got fulfillment we've got

268 -> uh order tracking inventory sizing and

270.96 -> variance and like

272.16 -> all of these things that just really

274 -> like you can do it with any system but

276.08 -> wow is it a lot of work to

277.6 -> do on your own um absolutely and so when

280 -> you when you start looking at like

281.759 -> what is the benefit of using something

283.68 -> like shopify it's

284.96 -> that right you you're like sure i can

288.4 -> build something but like

289.52 -> let's just talk about a t-shirt right so

291.28 -> i have a t-shirt that t-shirt

293.28 -> comes in two colors i also want to do

296.4 -> like a slim fit and a kind of straight

299.6 -> fit of this

300.479 -> this t-shirt and i want to do it in a

302.32 -> range of sizes that will fit everybody

304.72 -> so now i've got one shirt

307.84 -> two like two color variants two fit

310.4 -> variants

311.28 -> and so let's say eight or nine size

314.08 -> options per

315.039 -> shirt like we're managing a lot of

318.08 -> products with independent like

319.6 -> indep independent inventory numbers for

322.16 -> each

322.8 -> so i you know i have to keep track of

324.24 -> not just how many shirts i have but how

326.24 -> many

326.96 -> black version in the extra small slim

329.68 -> fit

330 -> i have and i need to track orders

333.12 -> where things go how much money did i

334.88 -> make do i need to collect taxes like

337.199 -> all of these things that suddenly start

339.039 -> to add up that just turn into a huge

340.88 -> huge huge amount of work

342.32 -> um and that's why you know the jam stack

345.6 -> is so exciting is that i can use shopify

347.44 -> for that but then i don't have to use

348.72 -> shopify to run my blog

350.479 -> which exactly i would prefer not to use

352.96 -> shopify to run my blog i'd prefer to use

354.639 -> something

355.44 -> like prismacore sanity or or contentful

358.08 -> that that's built for that type of

359.68 -> content

360.479 -> um but this introduces a problem

363.759 -> so the problem is all of the nice parts

367.199 -> about using monolithic cmss like we get

370.24 -> these drag and drop interfaces this

372.08 -> really really tight coupling between the

373.759 -> front and back end which means you can

375.12 -> do these very

376.479 -> flexible ui driven kind of no code page

379.84 -> builders

380.72 -> that starts to get way harder when the

382.96 -> back end can be

383.919 -> literally anything and so what you're

386.319 -> saying is that

387.44 -> what builder is aiming to do is is sort

390 -> of bridge that gap

391.68 -> and get us to where we do get to keep

393.36 -> our data wherever we want to keep it

394.88 -> the right place but we provide

398 -> front end primitives that that we can

401.28 -> then kind of

402 -> mix and match so we still get that sort

403.759 -> of like ui driven no code

405.84 -> experience that's that's friendly to

407.84 -> somebody who doesn't want to get into a

409.199 -> code editor

411.199 -> exactly no you're spot on and even to

413.36 -> build on your example of like the

414.96 -> intricate sort of shirt

416.08 -> example one thing that is is hard today

419.12 -> if you don't have sort of some higher

421.039 -> level interfaces

422.16 -> is building out that jam stack shopify

423.919 -> store in the first place right you want

425.84 -> it to be

426.319 -> fast i mean we all sort of you can

428.16 -> google it and see a bunch of studies

429.599 -> that the speed the load time of your

431.199 -> store has a huge impact on how many

432.8 -> people buy

433.44 -> products from your store i actually just

435.84 -> moved to a different area of san

437.36 -> francisco

438.16 -> where there's not much cell reception

439.68 -> and i've been forgotten that like you

441.36 -> don't always have super fast lts and i

443.44 -> can't load a lot of e-commerce websites

445.28 -> because

446.08 -> you know to your shirt example you might

447.84 -> have all these variations you might want

449.44 -> to show some like components for

451.28 -> choose the right fit or explore the

453.039 -> options in a traditional stack you're

455.039 -> doing that with jquery and you have this

456.479 -> global javascript that's blocking and

458.319 -> injecting and it's just very bad and so

460.24 -> when you're trying to load these sites

461.84 -> just not loading when you can use like

463.599 -> next.js and modern platforms you can

465.919 -> make this stuff

466.56 -> lazy loaded very rich feel like a native

468.72 -> app and just mode

469.84 -> instantly but you know where a lot of

472.08 -> people kind of go today

473.68 -> is they put it all up from scratch right

475.599 -> and they forget the fact that

477.199 -> all these people have these cool sizing

479.039 -> charts and experiences your marketer is

480.639 -> going to give you

481.36 -> or your marketing team will give you a

482.879 -> long list of sort of updates they need

484.56 -> we have these new products that new

486.16 -> different types of sizes and all this

487.68 -> stuff

488.24 -> the back end can handle it but the front

490.08 -> end it makes everyone's lives easier if

492.24 -> the market can go in

493.28 -> click on what they want make the changes

495.52 -> the primitives like you mentioned can

496.96 -> render to react or tomorrow you want to

498.96 -> be on view cool the next day you want to

500.479 -> be on ios cool

501.599 -> it's all there it's all yeah decoupled

503.199 -> like you said nice okay

505.12 -> well so this sounds really exciting and

506.96 -> and um in

508.24 -> in it solves it solves what i think is

511.12 -> is kind of a

512.719 -> a key benefit of these

516 -> these more like monolithic approaches is

518.32 -> is that you get this

520.08 -> kind of unified experience and and so

522.56 -> we're trying to bring that

523.68 -> forward into the jam stack so that you

525.36 -> can also have a unified experience

527.04 -> without sacrificing

528.64 -> all of these benefits that you get like

530.24 -> you said the performance the

531.68 -> the portability you know that stuff is

534 -> is so important especially in like

535.6 -> bigger teams and you've got multiple

536.88 -> teams working

538.08 -> those teams don't want to be st like you

541.04 -> don't want to

541.519 -> have to be at the leadership level of a

543.839 -> company saying from this day forth

545.519 -> you are only allowed to use react

548.48 -> because

549.6 -> that's what we built our system for and

551.36 -> and like

552.64 -> never ever shall this change because we

554.48 -> know that's not true like we've

556.56 -> if if for any of you who have been uh

558.8 -> you know chat this might sound familiar

560.399 -> if you've been in an enterprise company

563.36 -> every few years we say this is the way

566.88 -> and it's never going to change and we

568.959 -> start overhauling everything and 80

571.04 -> through the project we go oh boy this

572.64 -> was a bad call and now we've got

574.48 -> the previous legacy app on top of the

576.32 -> new legacy app while somebody cooks up a

578.16 -> plan

578.959 -> for what the next this is the way is

581.2 -> gonna be

582 -> um but yeah it's it gets rough right and

584.56 -> so uh

585.36 -> yeah it yeah like chris chris in the

587.76 -> chat is talking about coffeescript

589.44 -> which i mean coffeescript is great

592.8 -> should we have forced everybody to use

594.48 -> it no matter what probably not no

596.72 -> um and it just makes migration hard so

598.8 -> what i like about this is that

600.56 -> it um it does something that i i really

602.64 -> like which is a

603.6 -> phrase i repeat optimizing for deletion

605.44 -> you know we want to make pieces

607.36 -> of the app easy to swap in and out um so

610.399 -> that they can be

611.92 -> built the way that we want them to be

613.36 -> built but so that if we decide that we

614.88 -> need to change or evolve

616.959 -> we only have to change that one piece we

619.44 -> don't have to rip the whole system out

621.04 -> to make a change

622.56 -> and that i think is really really

624.079 -> important um

625.76 -> yeah it's huge but especially go ahead

628.64 -> sorry

629.04 -> so no go ahead go ahead oh i just get in

631.6 -> your enterprise sort of company example

633.279 -> or any company with multiple teams or

635.36 -> just interdependencies even if you're

636.88 -> just like a one person shop selling

638.72 -> products but you need to use an agency

640.959 -> for development or whatever outsourced

643.6 -> just any time one team

645.12 -> tells another team how to do their job

647.36 -> it drives everybody crazy right

649.279 -> i need you to build this page in this

650.56 -> way or i need to do this thing in this

652.48 -> way or whatever or like we

654.399 -> on the developer side it could be like

655.68 -> we made you this nice landing page

657.12 -> template you can fill in the text and

658.8 -> this button and then the marketers like

661.12 -> this is the worst thing ever because now

662.56 -> today i need two buttons and now i have

664 -> to go back to the developers and ask for

665.44 -> a second button and it drives everyone

666.959 -> crazy

667.519 -> but it happens every day you sell a

669.2 -> promotion that needs like a shop men

670.88 -> versus a shop women button

673.2 -> going back to developers drives both the

674.88 -> marketers crazy they're probably have a

676.16 -> timeline for this new release or

677.519 -> promotion

678.16 -> and the developer is crazy they drop

679.36 -> what they're doing to add another button

680.72 -> it's it's infuriating i've i have real

682.959 -> work to do

683.839 -> and so yeah when you kind of can

685.36 -> decouple optimize for deletion all that

687.12 -> stuff everyone could be happy

688.399 -> marketer makes the adds the button but

690.24 -> the button is a component the developers

692 -> made

692.399 -> that always has a certain look and feel

693.839 -> a certain behavior essentially managed

695.6 -> and

695.92 -> both teams can just do what they're

697.44 -> doing happily for once

699.839 -> yeah no i i love that um

702.959 -> and yeah so i think at at this point

706.399 -> we can keep talking about this all day i

708.079 -> i honestly would love to it's very

709.76 -> exciting but i want to make sure that we

711.12 -> have plenty of time to get things done

712.399 -> so let's switch over

713.6 -> and let's take a look at what we're

715.04 -> actually going to build today so we'll

716.48 -> get into pair programming view

718.399 -> and let's take a quick second to do some

721.36 -> shout outs here so first of all as usual

723.44 -> this episode like every episode

725.44 -> is being live captioned uh we have white

728 -> co-captioning with us today making all

730.399 -> of this work

731.36 -> uh so that it is more accessible to more

733.2 -> people which uh that means a lot to me

734.88 -> it's on the homepage learn with

736.16 -> jason.dev if you want to follow along

738.16 -> with the captions

739.36 -> um that is made possible through our

741.04 -> sponsors we've got netlify fauna

742.959 -> auth0 and hasura all kicking in to make

745.2 -> this show more accessible that

747.12 -> helps me keep the lights on helps me you

749.44 -> know pay for things like captioning

751.36 -> and that is very very much appreciated

753.839 -> remember that these are links so you can

755.6 -> head over to the site

756.8 -> and click these buttons and go check

758.399 -> these companies out

760 -> while you're while you're checking

761.12 -> things out make sure you go check out

762.16 -> steve's twitter

763.2 -> and give him a follow um we can

766.72 -> you can follow get a get a lot of

768.32 -> information about builder io and and

770.079 -> what else what else do you tweet about

771.279 -> steve

772.639 -> um talk a lot about front-end

775.44 -> development

776.16 -> faster development um sort of framework

778.56 -> flexible developments we have this

780.079 -> really cool project called jsx lite that

782 -> powers our code generation so i talk

783.68 -> about updates to that

784.8 -> um sort of a cool way where you can

786.56 -> write um components as this subset of

789.2 -> jsx code but compile it out to angular

791.36 -> or brand new cool framework so

793.279 -> i don't know open source code ecommerce

795.36 -> builder the whole range of stuff working

797.04 -> with designs design systems

798.48 -> you get it yeah yeah for sure excellent

800.959 -> excellent

801.6 -> okay and so today what we're going to do

803.519 -> is we're going to build

804.8 -> a next app with shopify to manage our

809.44 -> our data and then we're going to use

812.399 -> builder io

813.44 -> to to build the front end um and then

815.519 -> we're going to deploy that whole thing

817.12 -> on netlify okay yeah so to make that

820.56 -> happen

821.12 -> i've made a

824.56 -> shopify here we go i made this shopify

827.92 -> site i did not put anything in it

830.079 -> um i figured that we could walk through

831.76 -> that together but i i wanted to

834.16 -> to get uh get us set up so that you

835.76 -> didn't have to watch me um put in the

837.76 -> like you have to put in your address and

839.04 -> stuff for for shopify

841.12 -> um other than that i haven't done

843.279 -> anything to prep so i'm what do i

845.04 -> what do i want to do first if we're

846.48 -> going to make this happen

848.16 -> yeah so let's start with before we jump

850 -> into the readme let's go to your shopify

851.76 -> store and just add some products

853.44 -> and i i can explain the background for

855.839 -> anyone tuning in this is kind of cool

857.76 -> one thing that you can do with shopify

860.079 -> is what they call

861.04 -> drop ship products and so one way to

863.68 -> make products is just what jason's doing

865.199 -> now

865.6 -> enter the information um give it a price

868.16 -> all that stuff

869.6 -> and that takes a little time to input

871.04 -> and you'll have to manage the inventory

872.56 -> and whatnot

873.68 -> and there's another sort of exciting

875.36 -> option too that we can do here in a

876.8 -> second where we can actually use an

878.48 -> app in this case we might use oberlo to

881.04 -> drop ship products

882.16 -> meaning if you follow this this twitch

883.839 -> stream you can actually get a live store

885.76 -> up and running today

887.199 -> deployed in everything and actually

888.8 -> selling products that you don't have to

890.079 -> ship to anyone

891.199 -> you choose products um from sort of like

893.68 -> an open list of things that you can sell

895.76 -> plug it into your store and then when

897.76 -> orders come in

899.279 -> and actually a third party will send

900.959 -> that to your customer on your behalf

903.04 -> it's pretty neat it allows you to

904.24 -> actually test out your marketing skills

905.6 -> can you make a beautiful site and can

906.88 -> you actually start making money without

908.399 -> worrying about having products and

909.839 -> inventory and stuff like that

911.44 -> nice yeah that's that's pretty excellent

914 -> i have no idea what these are actually

915.279 -> gonna cost so i'm just gonna

917.04 -> make that happen uh we're not gonna deal

919.12 -> with taxes today

920.959 -> um and it would be like

926.56 -> something like that so that we have a a

929.04 -> skew for it

930.24 -> and let's say that we've got 10 of these

932.48 -> available so that they are

934.639 -> going to work um i also

937.759 -> don't know i don't know half a pound

940.959 -> that seems right

942 -> and then uh do i need any of this am i

944.639 -> am i just doing things that i don't need

945.92 -> to do right now

947.199 -> um in your case i think you're okay and

950.16 -> let's give it a variant so that we can

951.92 -> do this

952.48 -> we'll we'll say we've got a um

956 -> we'll give it a black version and a what

959.199 -> other color should i do for this hat

960.72 -> chat i think oh yeah the the hat let me

964.48 -> see if i can get

965.44 -> like that it'll be like this that'll be

967.759 -> the hat

969.6 -> i'm actually gonna get this made i'm

970.88 -> really excited about it

973.36 -> purple okay so purple will be the other

975.279 -> hat color

976.399 -> um so we're gonna do we're gonna do that

978.399 -> that'll be good and

981.36 -> we'll say that we've got 10 of each all

983.6 -> right i'm ready now

984.639 -> i have perfect i have my first product

988.24 -> is that is that enough to get us started

989.759 -> or do you want me to do a second one

991.519 -> i think that's fine um we can do the

993.44 -> dropshipping example if you want to plug

994.959 -> in other products or we can just work

996.399 -> with the one

997.04 -> i think working with the one totally

998.24 -> works too yeah let's start there and if

1000.079 -> we've got extra time we'll we'll come

1001.519 -> back and add more

1003.279 -> sweet sounds good to me so yeah let's

1005.12 -> pop over to the readme

1006.48 -> and or actually i can walk you through

1008.32 -> some of the steps sort of already

1010.399 -> but if we maybe scroll down a little bit

1012.24 -> on the readme just to give people a

1014.079 -> sense of sort of what we're gonna do

1016 -> we have one little video walkthrough

1017.279 -> that's cool but

1019.12 -> yeah there we go so in the getting

1021.199 -> started a little bit lower

1022.72 -> the first steps will just be create an

1024.4 -> account with builder so if you haven't

1025.679 -> done that why don't we just do that

1027.36 -> we can pop into a new tab just go to

1029.199 -> builder.io and

1030.88 -> start the account creation process i

1032.88 -> have not done this so let's do it i'm

1034.88 -> going to do one of these

1043.6 -> and not that one um let's

1047.12 -> let's generate an actually secure

1049.12 -> password that i didn't just show to

1050.84 -> everybody

1055.28 -> okay you come over here and then i'm

1057.039 -> gonna generate a password

1059.44 -> and

1062.96 -> okay good

1066.08 -> i agree all right i'm just gonna save

1069.36 -> that so i don't have to remember how to

1070.559 -> do it right now

1072.08 -> perfect okay i create software that

1074.799 -> sounds like me

1076.16 -> um we're gonna use next today so we'll

1079.039 -> copy that

1080.559 -> and all right i'm in great so let's do

1083.76 -> something so instead of creating a space

1085.52 -> from scratch we're actually going to

1086.799 -> generate one for this starter

1088.48 -> okay so go over uh on the left hand bar

1091.039 -> is a little kind of circle

1092.4 -> user icon at the top yeah the one that

1094.64 -> says account

1097.44 -> cool so let's go over to your private

1099.76 -> keys there's a little pencil button next

1101.52 -> to the private keys row

1104.32 -> great and let's open that it won't

1106 -> display the key don't worry

1107.36 -> and let's copy it to your clipboard you

1109.12 -> can hit the little kind of copy button

1111.2 -> got it okay great let's go back to the

1113.36 -> readme and we'll kind of follow the

1114.559 -> readme steps from here

1117.52 -> all right so i have my key

1120.84 -> perfect and we did that did that

1124.72 -> and we copied it okay so now we get to

1126.88 -> work with cli so let's start by cloning

1128.559 -> this project

1129.679 -> okay so i'm going to make this over here

1131.28 -> we'll move this over here

1132.96 -> and then let's uh let's

1136.799 -> start by um github

1140.08 -> clone i get lost

1143.12 -> i got lost where did it go right there

1146.72 -> builder i o next js

1150.559 -> shopify that's cool is that an alias you

1153.2 -> have in bash or is that like

1154.24 -> this is the it's the github cli nice

1157.52 -> i need to use them

1162.24 -> how about that that seems good no what

1165.12 -> have i done

1166.4 -> oh i have to do the github repo clone

1171.84 -> there it goes yeah the cli is really

1174.799 -> really nice it saves me a ton of time

1177.12 -> yeah that's awesome okay so i have i

1179.919 -> have that

1180.72 -> um i can perfect npm

1184.32 -> install or actually is this a it's a

1187.44 -> yarn project

1188.48 -> oh no it's a both project oh god is it

1191.919 -> both projects oh i think we left it

1193.6 -> open-ended

1194.4 -> let's do uh let's do npm but we actually

1196.559 -> don't have to install just yet

1198 -> we need to do it's okay now leave it

1200.64 -> leave it okay

1202 -> it's okay to do it either way but let's

1203.679 -> install the builder cli

1205.039 -> this will let you this is kind of cool

1206.96 -> actually so

1208.32 -> what that will do is allow you to sort

1209.84 -> of take this starter and set up a

1211.36 -> builder space configured with different

1213.36 -> models kind of like other headless cmss

1215.6 -> you can have different models for your

1216.96 -> content

1217.76 -> i think our structure here is we might

1219.76 -> have like a home page model

1221.2 -> a product page model and then some other

1223.84 -> little sections that you can edit in

1225.44 -> builder

1226 -> which is kind of cool like a spot for

1227.679 -> the cart or a spot for like an

1229.039 -> announcement bar so this will just kind

1230.559 -> of pre-configure it all

1231.919 -> so you want to do that build or create

1234.559 -> commands

1235.44 -> okay so i'm going to do builder create

1237.919 -> and then i need a key

1240 -> and then i'm going to put the key in

1241.28 -> here and then we'll give it a name

1243.44 -> and the name is going to be whatever i

1245.28 -> want whatever you want and the keys will

1247.84 -> be copied before though it might not be

1249.2 -> in your clipboard and you probably don't

1250.32 -> want to show it paste it because it's on

1251.6 -> the private key you don't want people to

1252.799 -> have access to your accounts

1254.08 -> right so i'm going to i'm going to head

1255.6 -> back over i'm going to pull this off

1257.2 -> screen

1257.679 -> paste this and then we'll clear this

1259.28 -> terminal yeah okay so i'm running this

1274.84 -> command

1276.4 -> it'll do a few things are you seeing

1277.679 -> like the little loading bar it's like

1278.799 -> sitting yeah i'm

1280.08 -> clearing it off the screen here so that

1281.36 -> i can pull it back over perfect um okay

1283.28 -> so the

1284.08 -> the private key the command is right

1286.799 -> above where it says builder io cli here

1288.64 -> and that

1289.12 -> that's uh the command we ran so it wrote

1291.919 -> the home page

1292.88 -> uh did the announcement bar cart upsell

1295.36 -> so i don't know what any of that means

1296.559 -> so what what does that mean what

1297.84 -> happened

1298.96 -> yeah we'll actually show you in a minute

1300.559 -> i think the next step is to go into the

1302 -> builder space so we can kind of explore

1303.679 -> it

1304.159 -> okay so maybe let's go let's go to the

1307.12 -> readme really quickly just so i can make

1308.88 -> sure i'm i'm not crazy

1310.159 -> oh there you go you've got the space it

1311.76 -> did the thing yep it did the thing

1314 -> so we can just hop right into it

1315.919 -> excellent okay

1317.52 -> so now that we want to go get our

1319.039 -> shopify keys so i can walk you through

1320.799 -> that

1321.12 -> as well as the so this is like a demo

1322.72 -> store set up but we're going to want to

1323.919 -> leave this window and go grab your

1325.28 -> actual shopify store information so we

1327.039 -> can attach to the data like we talked

1328.48 -> about

1329.2 -> okay so yeah go to the apps section

1333.039 -> it's kind of weird so i'll explain this

1334.48 -> really briefly in shopify to get keys

1336.64 -> you make what's called a private app

1338.24 -> exactly manage private apps and this is

1340.4 -> really sneaky because

1341.76 -> you would come out here and you would go

1343.12 -> i need an app and then it's like right

1345.28 -> you go here but you have to scroll down

1347.28 -> and then there's this sneaky little

1348.4 -> button

1349.6 -> yeah so the funny thing about that is

1351.84 -> and they're going to show you all these

1352.96 -> yeah they're going to make it look

1353.84 -> really scary

1354.799 -> and the reason why is a lot of shopify's

1357.36 -> customers are not technical

1359.12 -> and so if anybody is just telling you oh

1361.919 -> create some keys and paste them to me

1364.32 -> well now they have access to your store

1366 -> in your case your developer

1367.44 -> you can read this and understand the api

1369.44 -> terms um

1370.64 -> but they want to make sure people aren't

1371.919 -> just like blindly clicking through and

1373.44 -> generating keys and sharing them to

1375.2 -> people who should not have that level of

1376.64 -> access to their store

1379.44 -> wait there's no sound on my overlays

1381.039 -> right now unacceptable let's

1384.72 -> let's reload that everyone give me just

1387.919 -> a second

1390.08 -> all right try it again try it again we

1391.52 -> should have sound

1399.039 -> what's happening why why

1405.52 -> i don't understand i don't know what

1406.799 -> happened this is like

1409.12 -> i haven't changed any settings since

1410.72 -> last thursday

1412.799 -> ah okay well here we go um fine fine

1416.32 -> sorry everybody i broke everything and i

1418.559 -> killed your boobs i

1419.679 -> it's all it's all bad oh thank you for

1421.679 -> the sub cassidy i appreciate it

1424.88 -> yeah come on little compooper uh yeah i

1428 -> don't know why that's not i don't know

1429.2 -> why that's not doing what it's supposed

1430.24 -> to do

1432.24 -> here we here we go i guess um that's

1434.64 -> fine i'll fix it later

1436.159 -> today today you will have to deal with

1439.2 -> just the sound of my voice

1441.12 -> and the crooning of steve um hi

1444.159 -> everyone

1447.84 -> all right so so i'm going to enable

1449.52 -> private app development here so that we

1450.96 -> can uh

1451.6 -> we can make this work um by enabling man

1454.48 -> they really they're like do not press

1456.24 -> this button

1458 -> they don't i'll tell you the other sort

1459.6 -> of like secret but not secret um some

1461.84 -> app developers don't like to pay

1463.679 -> you know on the app store if you have an

1464.88 -> app you pay like a 30 fee of any revenue

1467.2 -> you make

1467.84 -> shopify has a similar deal and some app

1470.24 -> developers are like i can make a private

1472.08 -> app you know yeah i don't have to pay

1475.44 -> and they're like no no no no that's why

1477.12 -> it's like verify you meet the terms this

1478.96 -> and that in your case that's not what

1480.24 -> we're doing we actually are

1481.679 -> following the rules which is we're

1482.88 -> making a custom storefront properly i

1484.88 -> understand okay cool

1486.159 -> um and thank you so much for the raid

1487.679 -> mutual welcome everybody uh

1489.679 -> what were y'all working on today what's

1491.44 -> what's what's going on

1494.72 -> um okay so i have a private app and i'm

1497.2 -> going to create a private app

1499.2 -> yeah and now we can give it a little bit

1501.76 -> of

1502.24 -> permissions probably a name and then

1504.08 -> you'll choose some scopes so i can watch

1506 -> that basically we need the app to be

1508.64 -> able to see your products and some basic

1510.24 -> stuff

1511.12 -> oh my goodness a a stream game called

1513.76 -> rattle royale a snake game but a battle

1515.76 -> royale

1516.799 -> sounds so much fun um okay is there a

1520.32 -> uh like should i call this a certain

1522.799 -> thing

1523.76 -> builder next js you know that's what i

1525.84 -> did in my demo stores

1528.32 -> uh it's just pointing to this is the app

1530 -> for this custom storefront that you're

1532 -> making whatever you want to call it

1533.84 -> got it okay so we can make that work um

1535.919 -> i've got my admin api do i need any of

1538.08 -> this stuff

1539.039 -> yeah so let's let's hit show inactivate

1541.919 -> cool

1542.32 -> actually yeah sorry there's two pieces

1543.919 -> yep that's one let's just give

1546 -> read access to products so if you scroll

1547.919 -> down somewhere about customers

1553.32 -> products there we are

1555.52 -> change no access to read access okay

1557.279 -> cool do we need anything

1560.159 -> no i believe we're good without any of

1561.84 -> that keep it nice and simple

1563.76 -> and then in the storefronts check all of

1565.76 -> those boxes

1567.039 -> this is all just read only yeah i want

1569.12 -> to see tags i want to see products i

1570.799 -> want to see customer information

1572.559 -> we can use that to power one cool set of

1574.88 -> features we have is

1575.919 -> um segmentation so you can actually have

1578.64 -> different visitors see different content

1580.4 -> even with all the jam stack

1581.6 -> optimizations and we can power it by

1582.96 -> that which is kind of neat

1584.96 -> i'm i'm really starting to regret this

1587.039 -> uh this decision to let people move

1588.96 -> things

1589.36 -> independently on the screen i don't know

1590.72 -> if you can see that they've placed a

1591.919 -> dumpster fire in the middle of my face

1596.32 -> cool cool thanks chad makes me feel

1599.36 -> makes me feel loved to know that you

1601.12 -> want to put trash on my face

1604.72 -> all right so we're creating this app

1607.44 -> linda you're welcome

1610 -> i do that would be a good tattoo i yeah

1612.24 -> i feel like that's uh

1613.44 -> that's that's how we do things now what

1615.76 -> is going on shopify

1617.6 -> i think it's still loading there i hope

1620.159 -> it's still working

1621.039 -> have api credentials beautiful okay now

1624.48 -> we're going to copy and paste those

1626 -> over into the builder tab so let's grab

1627.679 -> that api key first and i'll

1629.36 -> just use box to put that in yeah and it

1631.44 -> goes

1632.559 -> api key very top yes exactly

1635.6 -> and then storefront api key

1639.12 -> yep you're in the right place keep going

1640.64 -> there you go star front access yep

1644.159 -> here and then i need this api password

1647.52 -> exactly and i think you can copy and

1649.2 -> paste that without it displaying here

1651.12 -> too that's yep here we go here we go

1653.919 -> everybody get ready to steal my secrets

1655.76 -> okay we're good there we go now let's

1658.559 -> add

1658.96 -> uh your store name exactly and it'll

1661.76 -> need to be

1662.399 -> my shopify.com the full domain cool

1666 -> okay here we go and i'm good

1669.679 -> i can't read this button because i need

1671.039 -> to click this but i'm going to assume

1673.12 -> that means save it

1674.159 -> you want it yeah and click ok on that

1676.24 -> okay

1677.52 -> so what this is doing this is one

1678.799 -> important thing to know that we do for

1680.24 -> you

1680.88 -> so the one um here's the cool thing cool

1683.679 -> thing about shopify it's been around a

1685.2 -> long time tons of integrations

1686.72 -> very robust the one downside is they're

1689.36 -> not really

1690.08 -> always optimizing for you know a jam

1692.08 -> stack uh storefront their apis have

1695.039 -> uh occasionally aggressive rate limiting

1696.88 -> that could actually mean the products

1698.48 -> just disappear from your store because

1699.84 -> you can't access them because you've hit

1701.279 -> a rate limits from too much traffic

1702.96 -> maybe a deal is happening

1704.48 -> so the thing you said yes to just now is

1706.48 -> we're creating a copy of your products

1708.159 -> that stays in sync

1709.6 -> over here in builder as a data model

1711.6 -> like another headless cms

1713.2 -> so you can use our apis that don't rate

1714.96 -> limit you to pull that product

1716.559 -> um with high speed and to any scale and

1719.039 -> we installed webhook with shopify to

1720.72 -> always keep it in sync so you still

1722.24 -> manage it with shopify

1723.44 -> and we're going to pull it from builder

1725.6 -> if that makes sense

1726.72 -> yeah yeah yeah okay that makes sense um

1729.84 -> cool and so how often do i have to run

1733.679 -> oh it's automatic okay one time and

1736.08 -> it'll be in sync forever

1737.36 -> yeah gotcha cool that's cool okay um

1740.72 -> so now you you're in the sort of the

1742.48 -> builder cms view i think once we

1744.48 -> actually get things set up

1745.6 -> locally it'll be sort of more useful and

1747.36 -> interesting to sort of like explore the

1749.12 -> structure here so maybe let's come back

1750.88 -> to this and just go

1752 -> and actually set up that um next js

1754.88 -> application which actually involves

1756.64 -> you'll see on the readme

1758.32 -> we're going to actually have to take a

1759.679 -> couple of those keys

1761.36 -> that we had done prior and yeah added to

1764.159 -> some end

1764.799 -> files so the next site can also be aware

1767.44 -> of this stuff

1768.32 -> got it so uh let's see you haven't

1770.159 -> opened that yet so let's open this up

1772.64 -> cool and in here we have

1776.08 -> let's see we've got some stuff uh we've

1778.72 -> got an m

1779.36 -> template we've got production we've got

1781.36 -> development

1782.48 -> um i probably want to use development

1785.2 -> for now

1786.24 -> oh yeah there's some stuff already in

1787.52 -> here as well okay yeah so that's just

1789.52 -> the demo stuff and so let's let's paste

1791.36 -> our stuff

1792.24 -> um so let's go back to that shopify app

1794.399 -> view and we'll get that storefront token

1796.24 -> and you also can grab your shopify

1797.919 -> domain storefront token is

1800.64 -> this one way bottom yep okay

1806.64 -> so that one can be there and then i need

1808.64 -> the

1810.08 -> store name which is here

1818.64 -> and then i need the builder public key

1820.72 -> which is going to be in here somewhere

1822.88 -> yeah so go over to account at the bottom

1825.52 -> yep

1826.559 -> and then let's let's grab public api key

1829.52 -> that's the one

1830.24 -> okay

1834 -> saved all right excellent now go back

1839.12 -> beautiful we already did this part right

1843.84 -> did this part we can keep going we did

1845.84 -> that cool

1847.12 -> going down going down and we did

1850.559 -> that we updated our keys okay now we can

1853.76 -> mp install and actually run

1855.12 -> our application here and have some fun

1857.36 -> oh my goodness

1858.32 -> i am so excited here we go npm install

1861.84 -> oh and let's do one other thing because

1863.36 -> the install will take a split second

1864.88 -> let's go back to your shopify store and

1866.64 -> actually make sure that

1868.159 -> the product you have is uh active for

1871.44 -> your custom app sales channel

1874 -> click another product really quickly and

1875.679 -> let's just make sure it'll be able to be

1877.12 -> pulled

1877.6 -> up uh if you scroll down there we go

1880.08 -> builder next js

1881.2 -> actually i think it's there can you hit

1883.519 -> oh it's in like a lot of these

1885.36 -> let's go in here why do i have three of

1887.519 -> these people

1888.48 -> son i have no idea i know why you know

1891.519 -> what

1892.24 -> i kept clicking the button i kept

1894.72 -> clicking the button steve

1896.32 -> uh okay we have the keys for one of them

1899.44 -> so we have three builder apps

1900.88 -> one of them's gonna work it's active for

1902.399 -> all three it's good enough

1905.2 -> i think we'll be okay if we don't see

1906.559 -> products we can do a little bit of fun

1908.159 -> debugging but i think we're in a good

1909.76 -> shape so why don't we jump back to the

1910.96 -> app and we can do

1912 -> uh in the cli sorry and do npm run dev

1915.2 -> get our dev server running okay

1918.48 -> oh after it's done installing so

1919.84 -> actually we need to install sharp

1922.559 -> okay oh yeah that's part of xjs yeah

1926.159 -> optimize those images

1927.6 -> jam stack jam stack

1929.23 -> [Laughter]

1932.399 -> all right so npm run dev mvm room dev

1936.159 -> okay

1940.24 -> sweet now let's grab okay so it looks

1942.399 -> like port 3000

1943.279 -> is being used here let's copy that and

1946.48 -> actually we can see our little site here

1947.6 -> which would be kind of cool

1949.679 -> in fact yeah we can explore the the

1951.2 -> structure of the site really quickly

1952.88 -> and this this is getting us started kind

1954.48 -> of out of the gate with everything

1956.08 -> running which is pretty exciting exactly

1960.88 -> if you just want to launch the store you

1962.32 -> can just launch it voice command

1964.48 -> a good voice command for what what would

1966.48 -> what would it what would

1967.679 -> yelling jam stack unlock

1971.2 -> with it with jazz hands

1976.399 -> oh so not like jam stack but like jam

1978.88 -> stack

1979.679 -> jam style all right i'm in i like that

1981.519 -> that's fine

1984.34 -> [Music]

1985.919 -> there we go so we have this video

1988.96 -> this is one of our engineers aziz

1990.559 -> explaining sort of how to set up some of

1992.32 -> the stuff but we already know what we're

1993.76 -> doing

1994.159 -> but this is a page in builder where we

1995.84 -> kind of added a little embed code

1997.679 -> component but

1998.64 -> we'll play with that in one second but

2000.159 -> this is our store that you could

2001.44 -> actually mess around with

2003.519 -> let's do some cool customizations let's

2006 -> uh let's see next thing oh let's copy

2008 -> that url that localhost 3000 url

2010.64 -> okay and we just need to add that to

2012.399 -> builder2 so we go right back to the

2013.919 -> builder tab this is our very last setup

2015.76 -> step

2016.24 -> go to site url right on this page little

2018.559 -> uh second row

2019.679 -> edit button let's just paste that

2021.44 -> localhost great

2023.519 -> cool let's actually do some visual

2025.2 -> editing this is where things get really

2026.64 -> cool

2027.12 -> because it's taking components from your

2028.88 -> code letting you sort of make pages out

2031.2 -> of them

2031.679 -> passing in the props we'll kind of talk

2033.36 -> about all that cool stuff maybe make

2034.72 -> some new ones

2035.6 -> okay and um and yeah anyway so let's go

2038.72 -> to the content tab that's the very

2040.32 -> top uh icon on that left hand side bar

2044.48 -> sweet and let's go to that home page see

2046.72 -> that little entry there it's in the

2047.84 -> middle of the screen

2048.879 -> let's click that and this should if

2051.839 -> everything's set up right

2052.879 -> load our sort of local host there we go

2056.8 -> okay you can clicky clack and do stuff

2059.04 -> clicky clack and do stuff my favorite

2061.119 -> my favorite way to work so i'm ready to

2064.159 -> click

2064.72 -> things to know so we're editing on the

2067.28 -> actual sort of development site now in

2068.879 -> production we did it on production

2070.399 -> so you're editing a page so it's in

2072.48 -> between your header and footer you can

2074 -> install these builder editable areas

2076 -> anywhere okay let's just delete that

2077.839 -> whole components custom code components

2079.76 -> are cool

2080.399 -> but you know the purpose of builder is

2081.839 -> not to rely on code so let's just

2083.679 -> yeah get it out of here and let's go go

2086.72 -> to show more

2087.679 -> in that sort of uh right there cool

2091.2 -> and let's drag choose the uh there's

2094.32 -> like a hero grab that hero component

2096 -> this is kind of a cool one

2098.079 -> cool so this is a component in our code

2100.8 -> and if you double click on it we can

2102.24 -> import insert like the props

2104.32 -> so this is a normal component you might

2106.079 -> hard code around passing in props and

2108 -> hey

2108.48 -> there you go

2114.16 -> and you can supply any of these sort of

2115.68 -> things that the component takes as

2117.2 -> inputs these forms are kind of

2118.88 -> automatically generated

2120.32 -> and do a lot of neat stuff but it's not

2122.56 -> limited to just static stuff we can

2124.16 -> actually when you're ready drag in some

2125.839 -> of those product components and actually

2127.44 -> like display your product on the

2128.56 -> homepage

2129.119 -> and it'll be dynamic always in sync with

2130.96 -> your backends that type of cool stuff

2141.76 -> okay so that uh that seems like

2146.16 -> good good good uh so we could set a link

2149.92 -> url

2152.16 -> yeah if you want the whole thing to link

2153.44 -> somewhere okay or the cta link

2155.599 -> uh is that read more buttons oh i

2157.599 -> understand okay

2159.359 -> good so that means actually we'll do a

2162.24 -> couple cool things and maybe we can

2163.52 -> explain sort of like a little bit more

2165.52 -> in the setup how it works but why don't

2167.28 -> we add one of these sort of like product

2169.119 -> uh options if you go to yeah

2172.4 -> let me let me verify my email so that we

2174.64 -> can actually see what's going on

2176.96 -> yeah good idea get started with builder

2179.359 -> let me click this link

2181.119 -> wait is this intentionally annoying

2182.56 -> about it no no it's good it's a it's a

2184.8 -> good thing to do

2186.16 -> i just definitely i can't read what the

2188.32 -> buttons say so i want to get that fixed

2189.839 -> so i'm going to reload

2191.599 -> cool

2196.88 -> and here we go all right no more email

2199.76 -> no more email reminder

2201.52 -> and i have a hero i'm gonna zoom out a

2204.8 -> little bit too so that we can see

2206.64 -> a little more i'm on a small screen for

2209.44 -> for streaming so that we can do that

2211.599 -> let's hit the accept cookies button too

2213.359 -> on the site that way we can get rid of

2214.72 -> that sort of slide up notification all

2216.24 -> right

2216.64 -> now we can breathe a little bit better

2218.24 -> let's go um in that insert tab on the

2220.4 -> left

2220.8 -> if you hit show more kind of above the

2223.44 -> little gray box yeah

2225.119 -> and let's grab hover over um i can see

2228.079 -> this little better

2229.04 -> if you go to product grid is that the

2230.96 -> one where you pick products yeah let's

2232.32 -> drag that product grid in this one's

2233.76 -> cool too

2234.48 -> and then in a minute we can go in and

2236 -> fuss around with the code so double

2237.599 -> click on that it's an empty box because

2239.119 -> you have no products

2240.32 -> hit kind of plus products list so it

2242.48 -> takes a list of products as an input and

2244.72 -> we want to choose one

2246 -> exactly oh okay okay there's a dumpster

2248.8 -> fire hat

2249.52 -> there we go look at it go okay and and

2252.4 -> so i have

2253.28 -> obviously over here not chosen the best

2255.68 -> image um

2256.88 -> it's like a little little tiny baby png

2260.079 -> it might actually be the one that is on

2262.24 -> the screen right now at like 600 percent

2264.48 -> size um that's why the benefit is

2268.16 -> it's a very optimized image jam stack

2273.599 -> i'm happy so let's make this smaller how

2275.92 -> about that

2277.2 -> and this is like this is nice and

2278.4 -> intuitive too like it feels cool

2280.56 -> i made it so much worse

2283.839 -> spoke too soon what have i done all

2286.32 -> right uh let's

2287.52 -> see because i didn't make it square is

2290.48 -> why that went poorly for me

2293.2 -> yeah yeah yeah um offset limit three

2296.079 -> good link url good good good

2298 -> okay so i'm going to do all of that

2302.4 -> what if i make it maybe

2306.24 -> that helps that's better yeah oh

2309.52 -> nope i broke it uh that's just a

2312.56 -> different i think variation on

2314.24 -> what this allows you to do is add a

2315.599 -> whole grid of products and this comes

2317.119 -> from

2317.44 -> um for sales next.js starter so they had

2319.68 -> all these sort of components with

2320.88 -> different inputs to display grids of

2322.56 -> products in different ways like maybe

2324.4 -> if you're selling dresses and the images

2325.92 -> are very vertical the other format looks

2327.76 -> nice

2328.4 -> this is what's kind of cool two kind of

2330.56 -> cool things so these are

2331.839 -> components in the code and you can

2333.44 -> decide in builder to make very sort of

2335.04 -> rigid components they only take a couple

2336.64 -> inputs and they're very centrally

2338 -> managed

2338.64 -> or you can make very flexible ones which

2340.32 -> we can sort of dive into that give more

2342.079 -> sort of drag and drop control

2343.839 -> kind of depends how much of a barrier

2345.76 -> you want between your marketers and not

2347.92 -> um did we publish this too oh we didn't

2350.32 -> publish i was like

2351.52 -> it's kind of weird that's just gonna do

2353.04 -> the thing all right so publish update

2354.4 -> yeah

2355.76 -> and now i'm reloading yeah reload there

2359.28 -> might be a cache the first time no there

2361.599 -> you go

2362.8 -> wow that's slick that's really slick

2366.32 -> yeah and i can i can see the

2368 -> value in like especially you know i i

2371.44 -> mean i'm

2372 -> i am a developer i like to code things

2374.48 -> but like sometimes i just need to get

2375.92 -> something up

2376.88 -> and uh being able to just very quickly

2380.16 -> get this plugged in and running

2382.16 -> is nice um i'm i'm a big fan of that as

2385.359 -> a general setup

2386.72 -> like granted i'm gonna need to figure

2388.24 -> out how to make these a little more

2389.839 -> responsive i'd need more products so i

2391.44 -> could see what happens when i start

2392.48 -> plugging things in but like this

2394.16 -> this feels nice as a kind of initial

2397.04 -> setup here

2398.079 -> um it looks like this is kind of set up

2400.48 -> to run in some kind of a grid

2402.24 -> um yeah precisely it's kind of like a

2404.56 -> fancy masonry style grid so to speak

2406.88 -> but yeah no you're spot on honestly a

2409.359 -> developer myself and

2410.56 -> uh more and more we just build stuff in

2412.16 -> builder it's uh not just for like the

2414 -> handoff to non-developers but just

2416.079 -> it's really nice to decouple a lot of

2418.8 -> your

2419.2 -> content from code deployments so yeah

2421.599 -> even in the builder app some of the

2423.119 -> screens

2423.68 -> actually are built or powered because

2425.04 -> it's just amazing to just jump into the

2426.72 -> builder app and just change some text

2428.48 -> show a different tutorial on the

2429.599 -> onboarding and hit publish and move on

2431.2 -> with your life

2432 -> that way if we deploy code and roll it

2433.599 -> back it's not like oh no content changed

2436.16 -> in general we like the idea of

2437.68 -> separation of content and code

2439.359 -> if you have content in your code the

2440.96 -> layout and composition of a page and the

2442.8 -> text inside it

2443.76 -> yeah if you have that content in a

2445.839 -> headless cms that's an improvement but a

2447.92 -> lot of times you still have a very rigid

2449.52 -> layout

2450.079 -> and that layout often needs to change on

2451.92 -> the fly new page new dock

2453.52 -> new test whatever it is and so really if

2456 -> you think about component driven

2457.359 -> development

2458.16 -> make a great set of components make them

2459.839 -> flexible and then to your composition of

2461.92 -> components

2462.64 -> here in builder you can have a lot of

2464.72 -> new power like this homepage you could

2466.48 -> schedule a different home page

2468 -> to automatically go live so if you want

2469.599 -> a black friday sale or a memorial day

2471.52 -> weekend sale

2472.4 -> just schedule that and builder ahead of

2473.76 -> time you know hold up let's see wait

2475.44 -> show me how that works

2477.28 -> yeah so up at the top close to you can

2479.92 -> make responsive tweaks too we can play

2481.599 -> with that

2482.16 -> which will be fun but the scheduling

2484.16 -> there's two things that are cool

2485.44 -> targeting and scheduling scheduling's

2486.96 -> right at the top oh it's going to warn

2488.48 -> you that you can't you have to pay or i

2490.16 -> guess

2490.96 -> oh it says it's a trial feature so you

2492.48 -> are allowed to use it so yeah you could

2494.16 -> pick a start and end date just like uh

2496.16 -> picking like airbnb

2497.76 -> travel dates and then when you publish

2499.68 -> that now this version will only be live

2502.079 -> during that date range

2504.24 -> holy crap okay so what you're saying is

2506.88 -> like

2507.44 -> if i as a developer want to run a sale

2510.8 -> and i'm like you know this is live now

2513.359 -> we're ending the sale on friday

2515.2 -> now i don't have to wake up at 11 59 on

2518.24 -> friday night to

2519.359 -> i oh man i just dated myself didn't i

2521.839 -> yes i am definitely

2523.119 -> already asleep by 11 59 on friday night

2525.28 -> but

2526.16 -> i have to yeah i have to wake up and

2527.44 -> make that change to take the

2529.2 -> the sail down you're saying i don't have

2530.96 -> to do that anymore

2532.56 -> exactly and so what's nice about it

2534.72 -> obviously is yeah pre-schedule it

2536.319 -> everything's good you don't have to

2537.359 -> worry about like pushing out a branch

2539.04 -> and like what else is on that branch or

2540.4 -> whatever

2541.2 -> and also it's not it doesn't have the

2543.04 -> opposite problem of like

2544.4 -> you know maybe some other ways you might

2545.839 -> schedule content through an api they're

2547.599 -> very limiting what our customers really

2549.119 -> value usually

2550.079 -> is when it comes to a sale weekend they

2552.56 -> can change the template entirely so

2554 -> maybe normally they have like a hero

2555.839 -> and they have this on sale day they just

2557.68 -> want the page to be sale

2559.119 -> sales sales sales and that's important

2561.359 -> that makes a big difference on how much

2562.72 -> people buy if you have to try and cram

2564.4 -> sale information

2565.52 -> to the wrong type of template it just

2567.44 -> doesn't work it doesn't convert well you

2569.44 -> really want to make it clear when you're

2570.8 -> running a sale

2571.839 -> yeah and that's also why you know

2573.44 -> there's many directions we can go with

2575.119 -> cool stuff we can show but

2576.8 -> in this example that like announcement

2578.56 -> bar at the top see that announcement bar

2580.56 -> section text that's also content and

2582.72 -> builder so you can schedule these things

2584.319 -> independently the bar

2585.839 -> might have special sort of dates and

2587.52 -> times it shows special information

2589.599 -> yes if you go to announcement bar there

2591.44 -> let's edit that that'll be fun

2594.72 -> and this is also made completely bespoke

2597.119 -> so we talked about primitives and we

2598.88 -> showed components

2600.079 -> but what's cool about this example is we

2602.319 -> can actually use the primitives in the

2604.079 -> style tab this time um

2607.04 -> we don't have announcement bar not found

2610.4 -> i wonder why oh try um

2615.52 -> maybe we skipped the app i'm kind of i

2618 -> i'm skeptical of the double slash at the

2620.16 -> end of the url

2621.119 -> oh i screwed it up okay so i i probably

2624 -> just need to go

2624.8 -> change here here

2630.16 -> yeah maybe let's try that for

2633.44 -> localhost 3000

2638.64 -> and then let's go try it again yeah it's

2641.2 -> very possible maybe we made an update to

2642.8 -> our starter where we maybe renamed the

2644.8 -> model and didn't reflect in the code

2647.2 -> um nope there we go it was just

2649.68 -> beautiful

2650.4 -> we can't no trailing slashes so yeah ux

2653.68 -> feedback save me from myself

2657.359 -> um so anyway yeah edit that text and

2660.16 -> let's do some styling too i think this

2661.839 -> is kind of fun

2662.8 -> so obviously announce whatever you want

2664.8 -> to announce jason is the coolest

2666.8 -> jam stack is the best jazz hands for the

2674.839 -> win

2679.28 -> okay and then the link url uh

2682.64 -> i you know what i need let's just

2686.319 -> we'll go here everybody can go play with

2687.839 -> the boobs

2689.52 -> um cool good okay now i'm gonna edit the

2691.839 -> style

2692.96 -> yeah that sounds great and now you can

2695.28 -> just go nuts

2697.599 -> cool okay so got it got it got it fill

2700.88 -> color let's make it

2703.2 -> um

2706.8 -> chat was stoked about rebecca purple

2708.8 -> earlier let's use that

2710.079 -> cool um we've got typography oh i can

2713.599 -> choose apple system seems good let's use

2715.44 -> that

2716.4 -> let's do a font weight we'll make it

2718.64 -> bold you got to know those unlimited

2720.16 -> boops are available

2721.599 -> uh then text color that seems good

2725.28 -> yeah this seems this seems right i think

2727.119 -> the

2729.119 -> accessibility folks how's my contrast

2730.96 -> that's good right i think it's good

2732.64 -> i can test it it's good let's find out

2736.16 -> one cool thing worth noting on this too

2738.079 -> is you can set very granular permissions

2739.839 -> for the stuff so if you're a developer

2741.28 -> and you're like i don't want the

2742.24 -> marketers changing the styling

2743.76 -> give them just the editor role and then

2745.52 -> no css for you but if you have a

2747.04 -> designer on your team that wants to go

2748.56 -> in oh css for you

2751.359 -> that's often a fear it's like i don't

2752.72 -> want my marketer touching the font size

2754.319 -> that's fine

2755.04 -> only give the designer permissions to

2756.48 -> edit styling then the designer

2758.48 -> you know we can discuss it a way of time

2760.64 -> but the designer can make templates and

2762.24 -> the templates you can drop on just like

2763.76 -> those component blocks

2765.119 -> and edit the pieces and if you don't

2766.88 -> have design permissions you're only

2768.48 -> allowed to edit like the text

2769.839 -> the link and you know no css for you

2772.48 -> nice

2773.119 -> uh question from the chat is the

2774.64 -> scheduling only available on the 35

2776.64 -> a month plan that's a good question let

2779.68 -> me look it up i believe it's on the

2780.96 -> basis of

2781.44 -> plan um meaning whatever the cheapest

2784.16 -> one is sorry we

2785.2 -> kind of dabble with our pricing from

2786.64 -> time to time let me see what our latest

2788 -> pricing is and i'll tell you

2793.359 -> wait how do i go to the can i go to the

2795.119 -> website

2796.4 -> yeah just go to um you can go incognito

2799.04 -> for example

2801.68 -> ah correct sorry scheduling is on the 35

2804.319 -> a month plan

2806.4 -> but you can get a free trial

2809.839 -> okay i know you didn't ask for this but

2812.24 -> you're about to get some opinions

2813.599 -> you know what one of my biggest pet

2814.8 -> peeves is when i can't go to a company's

2817.04 -> website when i'm logged into their

2818.319 -> website

2821.28 -> you know what that is how it used to be

2823.2 -> and it drove people crazy that they

2824.72 -> couldn't just type in build.i o and go

2826.56 -> to the logged in experience but you're

2828 -> right we need how do other people handle

2829.52 -> that like a button to say no show me the

2831.28 -> site anyway

2832.319 -> um i think like either sub domains or

2835.2 -> you

2835.52 -> have like a logged in uh nav bar up top

2837.76 -> that's like go to your dashboard

2839.76 -> um yeah i mean i i'm not gonna tell you

2842.16 -> how to do your business

2842.96 -> just that's just me uh i don't know what

2845.119 -> do you actually

2846.72 -> we've got a captive audience what do you

2848.079 -> think chat do you want do you want

2850.24 -> automatic logged in experience or do you

2852.079 -> want uh to be able to go to uh

2854.88 -> to like the home page of the site

2858.72 -> and while we're waiting for that we can

2860.88 -> uh we can we can jump in here

2862.72 -> let's let's let's figure out something

2864.4 -> else to do so i've and i've made this

2865.599 -> change so i'm going to publish it

2867.599 -> good yeah

2872.319 -> oh wait there's a little caching layer

2875.359 -> so potentially give it another load

2877.92 -> uh we use what's called actually um

2880.48 -> next.js is fun with this too

2882.079 -> uh we use what's called stale while

2884.16 -> re-validate caching i mean

2886.079 -> we always spit from the cdn and then we

2887.92 -> revalidate in the background so

2889.119 -> sometimes you just need a couple

2890.319 -> refreshes and then you've got the latest

2891.599 -> greatest

2894.96 -> we always want buttons

2898.48 -> luke 90 people i'm the only opinionated

2901.04 -> one that's right luke just you

2902.88 -> uh people some people don't like sub

2905.599 -> domains

2908.16 -> oh that's good page

2911.76 -> minimal opinions

2914.8 -> the only one for me is like i i just ran

2916.64 -> in this into this on another site where

2918.559 -> i went to um to figure out how to get a

2921.44 -> feature that they had that i wanted

2923.28 -> and i went to the billing page and it

2925.2 -> was like upgrade and i clicked upgrade

2927.04 -> and it just

2928 -> changed my plan and like charged me more

2930.319 -> money and i was like

2931.68 -> no i wanted to see what the plans were

2933.68 -> before you changed my plan

2935.52 -> anyways it was very frustrating and i

2937.04 -> couldn't get to their pricing page

2938.079 -> without going incognitos uh i was like

2940.48 -> okay cool that's fun um that's actually

2943.119 -> infuriating that's a hundred percent

2944.64 -> fair and valid point

2946.16 -> uh but yeah okay so one cool thing we

2948.96 -> could do maybe is open up the code like

2950.64 -> for this hero component and start

2952 -> messing with the code maybe give the

2953.44 -> hero component some different

2955.359 -> and second button or something and then

2956.96 -> let's it'll auto reload it'll hot reload

2959.119 -> in the builder editor so we can actually

2960.64 -> develop and enter props and do cool

2962.48 -> stuff

2963.2 -> okay so yeah let's go to hero it should

2964.96 -> be in there somewhere

2966.96 -> um it might be in i think we're calling

2969.04 -> them sections in this repo

2970.96 -> the sections are these sort of builder

2972.8 -> enabled components

2975.44 -> am i am i looking right at it and

2978.8 -> missing it

2980.24 -> um try you should be able to just go

2982 -> like ctrl t or whatever your sort of

2984.96 -> like

2985.359 -> new file quick search is um do you not

2988.319 -> use the

2989.04 -> that works sections section slash hero

2992.16 -> yeah hero.builder.ts okay so

2994.4 -> somewhere in here oh sections got it yes

2997.119 -> i missed that folder

2998 -> i was in the i was in this folder and i

2999.68 -> got very lost all right

3001.2 -> so i have my my hero site we've got our

3003.68 -> hero

3005.119 -> component i see some typescript

3009.04 -> yeah so there's some cool stuff going on

3010.559 -> here so if you want to look at the

3012.4 -> component source you can go to hero.tsx

3015.359 -> that will show you just a very normal

3017.44 -> react component that you might use

3019.119 -> anywhere else inside of your app so this

3022.319 -> is uh

3022.96 -> nothing fancy here this is sort of

3024.4 -> derived from the style of the starter

3026.24 -> that we forked this from

3027.359 -> same kind of styling this and that so it

3029.839 -> takes props

3030.88 -> you use it like any react component

3032.319 -> there's no magic here intentionally we

3034.559 -> don't want you to build

3036 -> uh components with builder in mind we

3037.599 -> want you to take the components you're

3038.88 -> already using or just build components

3040.64 -> like anywhere else

3041.599 -> and then tag them for use in builder so

3043.68 -> if you go back to that

3045.319 -> hero.builder.ts we can sort of walk

3047.2 -> through the

3048.079 -> how the tagging works which is kind of

3049.599 -> neat

3051.28 -> one thing that's kind of cool about um

3053.92 -> the the file we were just looking at the

3055.96 -> hero.builder instead of the hero.tsx is

3059.119 -> we're automatically

3060.16 -> using next.js lazy loading feature so

3062.4 -> basically

3063.2 -> we're not like preloading any components

3065.2 -> only the components that are used on a

3066.72 -> page through the drag and drop editor

3068.319 -> actually

3068.96 -> load when the client loads and this is

3071.359 -> basically where you just say builder

3073.119 -> register component so

3074.72 -> you give it a reference to the component

3076.8 -> in this case we're doing the cool lazy

3078.24 -> loaded version

3079.359 -> we're giving it a name that's what makes

3080.96 -> it show up on that little sidebar and

3082.64 -> then we're just specifying a little bit

3084.24 -> more information about the props that we

3085.839 -> want to allow

3086.72 -> editors to use for it and um that'll

3090 -> generate that nice little form you saw

3091.599 -> where you can edit

3092.48 -> a string you can have like we could be

3095.28 -> fancy and change the type

3096.72 -> for cta link to be url instead of string

3099.359 -> and

3099.92 -> validate it each of these is coming in

3104.319 -> as a prop to our

3108.64 -> got it i understand precisely this is

3111.839 -> really wanted

3113.28 -> if you want to mess around with the

3114.319 -> component you can like open up the

3116.16 -> builder editor like that home page again

3117.92 -> where we had the hero in use

3119.599 -> and you can go in and change the styling

3121.599 -> or remove the link or whatever

3123.2 -> in your typescript file and just see it

3124.72 -> hot reload and update in real time so

3126.48 -> you can sort of

3127.359 -> develop on the components try sticking

3129.44 -> the props in it's kind of a fun way to

3130.88 -> explore it like similar to storybook uh

3132.88 -> sorry storyblock

3134.319 -> um or sorry storybook

3137.839 -> uh components uh sort of exploration

3140.079 -> system but then you can actually

3141.839 -> publish stuff with them as well nice

3144.96 -> and so if i run this is it

3148.559 -> running looks like yeah

3152.16 -> oh it's just not styled um oh there you

3154.559 -> go yeah exactly

3155.68 -> so it's it's down there it just isn't

3157.359 -> styled so i would need to

3158.72 -> add uh is this tailwind

3163.44 -> uh yes yeah looks like tailwind

3166.559 -> so drop that in there there we go all

3169.2 -> right so that's nice and fast that's

3170.559 -> that's pretty easy to use

3172.079 -> um well cool so this i mean this looks

3174.24 -> pretty flexible i like it when you just

3175.92 -> get to write the code that you want to

3177.04 -> write

3177.68 -> um this this kind of setup here of uh

3182.4 -> of defining things

3185.839 -> like this this feels familiar you know

3188 -> i've seen this stun

3189.44 -> uh i'm i'm you know i'm kind of a fan of

3192.4 -> of uh

3194.079 -> keeping this as simple as possible i

3195.52 -> love that we've got default values baked

3197.359 -> in

3198.319 -> um now does this

3202.559 -> yeah this is this is pretty slick so

3204.8 -> where would i find like

3206.16 -> are there does builder just have a like

3208.96 -> docs about how this api works in terms

3210.88 -> of what the available types are

3213.04 -> yeah exactly we could open it up if you

3214.48 -> want to yeah let's poke around in there

3216 -> for a second

3217.28 -> yeah let's go to um go uh

3220.4 -> go over to the left sidebar and go to

3222.16 -> the learn tab that'll

3224.319 -> pump you over to the uh docs cool little

3226.72 -> fun fact our docs are all made in

3228.72 -> builder which is actually kind of a

3230.079 -> lifesaver so we can just like quickly

3231.839 -> create and publish all these docs and

3233.359 -> have these cool custom components for

3235.119 -> searching and displaying code for all

3236.64 -> the frameworks

3237.599 -> but let's go search in the search bar

3240.319 -> just search like react

3241.599 -> i think we'll be able to get the um

3244.72 -> the custom react component something

3246.559 -> something should show up in here

3248.16 -> so this is a cool component in our code

3250.4 -> and yeah let's do that top one

3253.599 -> okay and we've already got this that's

3256.24 -> how this is working right now

3257.76 -> um we pull in builder

3260.96 -> builder and knit and now the builder

3262.92 -> builder.init is happening

3264.72 -> probably in like index.ts here

3267.839 -> somewhere you probably project wide

3269.359 -> search it it's going to be pulling from

3270.72 -> that environment variable in our case

3272.319 -> which is kind of cool

3279.119 -> cool yeah okay cool cool cool all right

3282.16 -> and then

3282.88 -> we build or enable a component by

3285.52 -> getting

3286.72 -> builder so lowercase builder to init

3291.52 -> capital builder got it

3294.64 -> yeah one's an instance that you can like

3296.079 -> fetch data and it caches one's just the

3298.4 -> static sort of class equivalent that you

3300.559 -> can register

3301.52 -> singleton versus sort of the instance

3303.2 -> type of thing gotcha

3304.96 -> okay um and this is kind of cool so

3307.52 -> you're

3309.76 -> so that's like if you were building your

3311.04 -> own syntax highlighter got it uh yeah

3313.119 -> exactly

3314.559 -> the cool thing is that's the same

3315.68 -> component code for the that syntax

3317.28 -> highlighter looking at in the docs right

3318.72 -> there

3319.599 -> okay what does this mean like it's this

3323.04 -> builder come

3323.68 -> on yeah so the builder component is what

3327.04 -> you use

3327.68 -> to say like that home page we were

3329.52 -> editing or that announcement bar

3331.28 -> um let's take the announcement bar

3333.04 -> example so basically a lot of people

3334.64 -> might have a hardcoded one or they might

3336.4 -> have it hooked up to a config file or

3338.64 -> a sort of more minimal headless cms and

3342 -> if you just want to replace that

3343.28 -> hard-coded sort of announcement bar and

3345.119 -> just have a builder-powered one

3346.96 -> you would just say build a component

3348.559 -> model name equals i think we called it

3350.48 -> announcement dashbar

3351.839 -> and then you just go to builder create a

3353.92 -> model and

3354.88 -> yeah we can create something new that's

3356.88 -> what shows up here

3358.559 -> exactly let's actually can we do that

3360.24 -> let's do that because that seems like

3361.359 -> something that would help me

3362.799 -> um really like help this gel so i would

3365.839 -> call this a section where's the

3368 -> announcement bar

3369.92 -> um it's probably part of like the page

3371.839 -> layout search uh

3373.119 -> announcement dash bar and i think you'll

3375.68 -> be able to uh

3377.359 -> find where that's defined announcement

3380.88 -> dash bar

3382.24 -> that yeah navbar

3385.559 -> navbar.tsx i think

3389.04 -> or try adding the dash the dash will the

3392.4 -> dash case format is the one that will

3394.079 -> give us uh the model name string there

3396.64 -> we go

3397.2 -> okay so for next js

3400.319 -> uh let's see okay yeah we're doing a

3403.52 -> couple fancy things this is sort of a

3405.04 -> kitchen sync starter where we show a lot

3406.4 -> of different things

3407.359 -> so in this case we're fetching the

3409.52 -> announcement bar context using our

3411.68 -> plain javascript sdk so if you just use

3414.079 -> that react component we looked at it'll

3415.68 -> fetch for you automatically

3417.68 -> otherwise you can write the code

3419.52 -> yourself to fetch it manually

3421.28 -> and we do that in this case i'll explain

3423.2 -> why we do in a second but we fetch sort

3424.96 -> of the json object and we pass that as

3426.88 -> the content prop

3428.079 -> so you can pass in the content you want

3429.92 -> the builder sdk to render where it kind

3431.76 -> of

3432 -> loops over the json and says okay you

3434.319 -> want text you want your custom component

3436.799 -> stuff like that does that make some

3438.24 -> sense it's a little bit of an abstract

3439.44 -> concept

3440.079 -> uh so to speak it's uh yeah it's a

3443.28 -> it's definitely an abstract concept i'm

3445.359 -> i'm with you

3447.2 -> mostly so let's let's

3450.24 -> let's do this because i think i'm i'm

3453.04 -> gonna need it

3454.24 -> uh for understanding because the part

3456.079 -> here's the part i'm missing

3458.24 -> how does this

3461.92 -> know anything about layout yeah

3465.76 -> no so that's the cool part why don't we

3467.599 -> um why don't we open a dock

3469.599 -> that will actually explain this a little

3471.28 -> bit if that makes

3472.799 -> sense so if we go back to what we're

3474.16 -> looking at and go scroll

3476.24 -> on the left um sidebar of the docs

3479.04 -> scroll to the top

3481.52 -> very tippy top and go to builder

3482.96 -> technical overview

3484.64 -> that'll explain some stuff so i'll kind

3486.88 -> of walk you through this if you scroll

3488.4 -> all the way up

3490.4 -> so basically and let's go down just a

3492.64 -> little bit actually there will be a code

3494.24 -> snippet

3494.96 -> okay cool so there's what we were

3496.799 -> looking at that builder component

3498.559 -> model equals page content equals json

3501.119 -> and jason's super abstract right so

3502.88 -> what's in that json

3504.319 -> the example below shows it so we

3506.16 -> basically have this array we call blocks

3508.64 -> and each block is has a component so

3511.839 -> the text block is a text component it's

3514 -> a proper react component when using

3515.92 -> react sdk

3517.119 -> it takes options which are the props

3518.64 -> like text and knows how to render text

3520.88 -> and then you can have blocks sort of one

3522.72 -> by one by one

3524.48 -> but what's cool is each of the blocks

3526.48 -> can take components inside

3528 -> as an input as well so one of the blocks

3530 -> might be called column

3531.76 -> and the column has columns inside where

3533.92 -> we sort of render new components in sort

3535.839 -> of a big tree

3537.2 -> each of these things can also have

3538.4 -> styling information so when you click to

3540.24 -> set text color and stuff like that

3542.24 -> that sort of eventually all comes

3543.92 -> together and renders full pages

3546 -> or nav announcement bars or stuff like

3548.799 -> that for us

3550.48 -> gotcha and let's see so

3554.24 -> this announcement is

3559.839 -> here announcement concept announcement

3562.64 -> yeah

3563.119 -> builder.get announcement bar

3568.88 -> so the one cool thing you're seeing so

3570.96 -> the the simplest uh way to fetch the

3572.96 -> data is just say

3573.96 -> builder.getannouncementbar

3575.119 -> you figure out what i should see and on

3577.2 -> our backend we'll say okay this one's

3578.88 -> scheduled to go live tomorrow so

3580.48 -> not that one but this one's live now so

3582.559 -> you get this but what you can also do

3584.48 -> that's kind of cool is what we call

3585.92 -> segmentation

3586.96 -> you can pass additional what we call

3588.88 -> user attributes to be smarter about what

3591.04 -> content you should show

3592.079 -> so this is pretty cool in e-commerce

3593.52 -> land because a lot of times you might

3595.52 -> want to show

3596.319 -> like the announcement bar we pass what

3598.24 -> all the items in the cart are so

3600 -> basically

3600.72 -> maybe if you have no items in your cart

3602.319 -> we say hey have

3604 -> um you know 50 of items in your cart and

3606.559 -> you'll get free shipping

3607.92 -> once you have 50 worth of items in your

3610.079 -> cart we might start showing

3611.44 -> great you're going to get free shipping

3612.64 -> or add 50 more and you'll actually get

3614.96 -> you know super fast shipping or whatever

3617.119 -> the heck you want uh if that makes sense

3619.28 -> so we can pass information and on

3620.88 -> builder we can actually target

3622.319 -> different types of content based off of

3623.92 -> that information

3626.16 -> got it okay and and so when i look at

3628.72 -> this in builder am i going to see

3630.4 -> something about item and cart

3631.839 -> in here yeah you want to take a look at

3634.48 -> that let's go into that

3636.64 -> well so we'll do two things so the cool

3638.48 -> thing about builders any piece of

3639.839 -> content can have

3640.96 -> many many entries you know like if you

3642.799 -> schedule different times you target

3644.24 -> different ways

3645.119 -> so let's start by duplicating our cool

3646.96 -> purple banner in the very top right

3648.88 -> that's sort of like three dots

3650.559 -> hamburger style menu uh of the web

3652.72 -> application

3654 -> um here yeah exactly and let's go

3656.96 -> duplicate

3658.72 -> now we'll have a new sort of clone of

3660.96 -> this that we can make our edits and then

3663.119 -> choose

3663.68 -> who should see it instead okay i got you

3667.68 -> that's one of the neat things that's one

3669.28 -> of the things that i noticed in my sort

3671.04 -> of past job

3671.92 -> was the uh a good marketing team should

3675.04 -> have a huge volume of ideas and when

3676.96 -> they're bottlenecked by developers

3678.559 -> you know you can't get a lot of those

3680.079 -> ideas out but if you can make

3682 -> many many copies of content and create

3684.16 -> different variations that are a b

3685.76 -> tests or targeted you can actually get

3687.76 -> sort of a lot of conversion value or

3689.68 -> make you know sell a lot more products

3692 -> um

3692.72 -> yeah so we'll make our variation and

3694 -> then we'll target it

3697.599 -> okay so because uh because it looks like

3700.64 -> we're getting

3701.839 -> whether or not there are items in the

3703.119 -> cart we

3704.88 -> should be able to show if you don't have

3706.96 -> items we'll show the sale

3708.559 -> if you do have items we can show this

3711.359 -> perfect yeah okay so let's

3712.799 -> add the items at the very top

3715.839 -> next to scheduling is the targeting

3717.76 -> button targeting

3720 -> boom target and yeah let's add some

3721.599 -> targeting

3723.52 -> all right so this is now

3726.559 -> okay so now is this a thing that was

3729.839 -> added and if so

3734.72 -> like are user attributes like is there a

3736.559 -> schema here i set

3738.839 -> things yes exactly and we can look at

3741.359 -> that too so what we

3742.48 -> did for this sort of generated space we

3745.599 -> set a schema which is

3747.2 -> um we're going to be able to target off

3749.44 -> of items in cart

3750.48 -> um a url so maybe clicking on a

3753.119 -> collection page might show you more

3754.799 -> specific information about the

3756.4 -> collection that you're viewing

3757.68 -> okay or if we're editing stuff on a

3759.52 -> product page we might say

3760.96 -> you know there's a whole list of use

3762.88 -> cases but we might say for this specific

3764.559 -> product

3765.28 -> you know maybe we sell a mask and a shoe

3767.92 -> and for our shoe

3768.799 -> we're going to target content all the

3770.48 -> sort of editorial about why our shoe is

3772.48 -> you know the most amazing shoe ever but

3774.319 -> for the mask we're going to have totally

3775.52 -> different content relating to the mask

3777.039 -> and

3777.44 -> you can get fancy here i think we also

3779.2 -> show collection so we can say okay

3780.96 -> maybe we have lots of shoes so we can

3782.88 -> say okay any shoe

3784.559 -> that's in the shoes collection you know

3786.16 -> we show this so any shoe has certain

3787.92 -> information

3788.799 -> any mask a certain information you can

3790.72 -> kind of go go wild with all the

3792 -> different sort of use cases here

3793.52 -> got it so then if i publish this now

3795.76 -> that we're targeting

3797.2 -> um what i should see

3801.52 -> is i will reload

3806.4 -> yeah and this is where caching might

3807.68 -> might hit us so we might have to reload

3808.96 -> a couple times but

3810.48 -> this should work out as expected

3821.52 -> fingers crossed

3824.72 -> okay so we have something in our cart

3826.88 -> and now if i remove it

3830.799 -> there you go there add it back in

3835.2 -> cool so i mean this is slick right like

3838 -> this is

3838.559 -> uh i can see i can see where this really

3841.2 -> starts to be

3842.559 -> powerful i um i can see i can also see

3847.52 -> how i could make this very very hard on

3849.359 -> myself as a developer because there are

3851.76 -> lots of move like things move on

3854.24 -> multiple axes here so so i do think that

3856.24 -> there's like

3857.2 -> you know this is this is one of those

3858.88 -> like probably start by reading the docs

3860.88 -> because

3861.359 -> um you know with the the variations

3864.4 -> and you know so the the custom

3866.24 -> components and then the builder

3867.44 -> components and the

3868.559 -> extra schemas make sure you know what's

3870.4 -> available right so if

3871.599 -> if we dig in here um

3874.64 -> i want apis probably

3878.64 -> sure yeah maybe content api which

3881.68 -> which is the api that i actually want if

3883.359 -> i want to see like what your schemas are

3885.92 -> this one um maybe oh yeah you can go to

3889.039 -> uh probably graphql if you want to

3891.2 -> inspect the schema

3892.4 -> that you've created graphql is probably

3894.24 -> good one that's where you say just go to

3895.76 -> the graphql explorer

3897.359 -> and you can poke around sort of all your

3899.039 -> different models

3900.88 -> the options to query off of stuff like

3902.48 -> that which is kind of cool okay

3904.4 -> can i just hit this uh i think you can

3907.119 -> go

3907.52 -> click on uh below that video i think we

3909.52 -> have a big like

3910.96 -> oh it's largest blue button there we go

3914.64 -> yeah that one's giving the fold this

3917.28 -> one's giving the eleventy docks a run

3918.96 -> for its money let's see which one's

3920.839 -> bigger

3925.359 -> oh i think eleventy's got you beat

3928.48 -> that must be a nice thing though is

3932.16 -> that button's made in builders so i

3933.599 -> could log in and make it about ten times

3935.76 -> the size and publish here on the spot

3937.839 -> you can get in the competition if we

3939.039 -> wanted to

3941.359 -> okay so so then in here yeah um

3947.44 -> so yeah so that's our things so we have

3949.599 -> an announcement bar

3950.64 -> which have certain fields uh we have a

3952.72 -> different query type for if you want to

3954.319 -> get a list

3955.039 -> or oftentimes people want one so we have

3956.96 -> like one announcement bar or you can get

3958.64 -> a list of announcement bars for most

3960 -> sites you just have one displaying at a

3961.44 -> time

3962.88 -> got it got it and also per your point

3965.44 -> about sort of setup

3966.64 -> um two things that are probably actually

3968.24 -> useful there one is generally we

3970.319 -> sort of recommend people start simple

3972.24 -> and they get more advanced so we made

3973.92 -> this sort of kitchen sink

3975.359 -> you know approach where we can show you

3977.44 -> sort of everything all at once

3979.359 -> um but most the time people just hook

3981.2 -> this up to their existing site just to

3982.88 -> create the ability to create landing

3984.319 -> pages so you don't have to register

3985.76 -> components

3986.4 -> you don't have to do custom targeting

3988.079 -> just pick up a very simple code snippet

3990.16 -> and now people can start generating

3991.44 -> landing pages and probably wipe out

3993.92 -> a good chunk of your engineering backlog

3995.92 -> just by being able to create pages

3997.2 -> themselves

3998.079 -> oh yeah these are our shopify products

3999.44 -> so these are data models this is

4000.96 -> actually what we're querying from

4002.72 -> to show your products if you hit enter

4005.599 -> now actually you might be able to just

4006.88 -> see

4007.359 -> um products without specifying any query

4009.28 -> details okay

4011.2 -> now there you go how do the query

4012.48 -> details work i it's um

4015.039 -> it doesn't look like there's a schema

4016.319 -> for this it's just kind of abstract json

4018.319 -> so where do i go to find

4020.16 -> how these correct yeah so let's go over

4022.799 -> to the api docs and i can sort of

4024.72 -> explain it for you so go to the content

4026.64 -> api this time

4028.16 -> um we actually might have a query

4029.92 -> example sorry go back to the graphql one

4032.079 -> we might have a query example

4034.24 -> uh search uh if you like control

4037.28 -> f for query let's see if we actually

4039.76 -> have something useful here

4041.839 -> keep going

4045.09 -> [Music]

4046.839 -> um

4048.079 -> query colon there we go yeah so what

4051.119 -> this takes is mongodb

4052.559 -> style queries and so if you just want to

4054.72 -> match a key is a value

4056.64 -> um the contents of uh an object is

4059.52 -> usually in the

4060.4 -> data object so uh any content entry and

4063.92 -> builder has a couple top level fields

4065.839 -> and then all the custom fields are in an

4067.44 -> object called data

4069.68 -> so okay so if i run it like this then i

4072.4 -> could do

4072.88 -> something like let's do i data

4076.319 -> id in this case id is top level

4080.079 -> id is like one of the built-in

4081.839 -> properties data is the custom properties

4083.68 -> you can add on top

4084.64 -> so yeah try that okay but then if i

4086.799 -> change this to be

4088.64 -> like something else

4095.359 -> comes back okay comes back empty that

4097.04 -> makes sense yeah cool all right i'm in

4099.679 -> that's fun

4101.199 -> yeah and so this is actually this is

4102.64 -> kind of neat too because shopify has

4104.48 -> some good tools for querying your

4105.759 -> products

4106.56 -> um but when you dump it into builder you

4108.799 -> actually get kind of full database style

4110.319 -> access so if you want to do a really

4111.839 -> intricate query like you would do in

4113.199 -> mongodb or another type of database

4115.04 -> cool just run it against sort of the

4116.56 -> collection of products here

4118.08 -> and it's worth noting you can do the

4119.839 -> same thing for your pages

4121.199 -> so again people usually start very

4122.96 -> simple just drag and drop make pages

4124.88 -> they don't get fancy at first

4126.4 -> but then you know larger sort of

4128.319 -> organizations this is one

4129.839 -> nice thing about uh per the point

4132.64 -> earlier about like monoliths versus sort

4134.88 -> of jam stack or micro services like

4137.04 -> unbundling sort of services is some

4139.759 -> people have a lot of complaints that

4141.12 -> like localization with some of the

4142.4 -> monoliths can be quite hard

4144.08 -> but here in builder what's kind of cool

4146.239 -> is you could add

4147.359 -> custom fields to your pages like locale

4150.56 -> and then you could query off of that so

4152.239 -> now you can add localization to your

4153.839 -> store in almost no time which is pretty

4155.679 -> neat

4156.799 -> yeah let's let's look at that actually i

4158.56 -> was going to do

4160 -> i was gonna do something else but let's

4161.679 -> how does localization work i would just

4164.96 -> duplicate or do you have actual like

4167.199 -> localization

4168.08 -> built in yeah so there's two ways you

4170.64 -> can do it so we recommend either doing

4172.4 -> it with targeting

4173.279 -> or custom fields so we mess with

4175.279 -> targeting we could do the targeting way

4176.719 -> which will show how those targeting

4177.92 -> fields are defined

4179.199 -> um or we can do it with custom fields

4181.44 -> where you query off of it let's do maybe

4183.279 -> the first way because you asked about it

4184.56 -> before so why don't we do that

4186 -> okay so if you go over to uh on the very

4189.04 -> left hand bar

4190.159 -> uh kind of halfway down the screen go to

4192.719 -> the accounts tab

4195.6 -> yeah and then custom targeting

4198.8 -> attributes yeah i hit the pencil button

4200.719 -> over there

4202.96 -> is that disallowing you there we go and

4205.679 -> then

4206.159 -> cool so this is where we defined like

4208.4 -> types of stuff that we take

4210 -> each one has like an input type and you

4212.08 -> can make plugins into builder to sort of

4213.84 -> create different input types

4215.52 -> and we can just hit new target attribute

4218.08 -> and we can create a local one

4222.96 -> and that's sort of the yeah outline

4224.64 -> button yep

4227.92 -> and then i just leave it i think string

4230.719 -> is good let's make it an enum though so

4232.239 -> we can like choose from a list so if you

4233.76 -> hit that switch

4234.96 -> uh sorry string is the type and then edm

4237.12 -> is a sub option next to it yeah

4239.04 -> and then let's just do like uh whatever

4241.04 -> you want en

4242.08 -> us uh could do uh

4245.199 -> yeah that totally works okay oh uh each

4247.679 -> one is um

4249.12 -> actually is it a list of commas i don't

4250.8 -> know let's find out

4252.32 -> let's find out press enter yeah i think

4253.679 -> you would hit enter yeah yeah yeah

4256.4 -> cool boom hit save okay

4259.52 -> so now when i go back to my page

4262.96 -> i have my home page

4266.64 -> yeah so that's the standard one

4269.92 -> all right you're on the right track we'd

4272.239 -> probably want to make a duplicate and

4273.76 -> then

4274.4 -> transfer the content where is the where

4277.04 -> like where is this

4278.4 -> field uh uh it is in the uh

4281.92 -> targeting options so uh very tippy top

4284.88 -> yes yeah and add a new sort of targeting

4287.28 -> parameter

4288.8 -> locale and cal is

4291.84 -> okay boom

4294.88 -> all right and then i go over here and i

4298.84 -> duplicate yeah i would do that

4309.84 -> and i can switch this over to

4315.28 -> espanol and then

4320.7 -> [Music]

4326.84 -> uh

4331.679 -> i don't know what pajamas is in spanish

4333.76 -> so here we are

4335.04 -> um solomon day

4338.96 -> uh lo siento to anyone who speaks

4341.28 -> spanish

4342.159 -> um but

4345.36 -> uh okay so then if i if i save this and

4348.159 -> we can we can do that now

4349.84 -> um and then we can do the same thing for

4352.96 -> french i guess so we can we can

4354.159 -> duplicate one more time

4359.52 -> come back in here and

4363.199 -> let's do

4369.04 -> don't tell me you know how to write

4370 -> french too let's find out um

4374.719 -> do you watch that old dexter's

4375.92 -> laboratory episode the omelet do fromage

4378.08 -> one

4379.199 -> he learned that one saying and then he

4380.48 -> was like the most popular

4384 -> that's not right is it uh

4387.6 -> francais oh if it's not right it's

4390.08 -> really close i think

4391.6 -> i only have high school knowledge of

4393.44 -> french but it definitely rings a bell

4396.48 -> help help how did i do haha

4401.04 -> i think i'm wrong but let's uh let's

4404.32 -> oh i was i was not i was i was in the

4407.12 -> ballpark

4408.159 -> um yeah my french spelling is not my

4410.48 -> strong suit but that's okay we'll go

4412.08 -> here

4412.64 -> uh there we go i'm gonna publish that

4415.84 -> and now we have localization now how do

4419.04 -> i get this to

4419.92 -> show up yeah so let's go back over to

4424.08 -> your code this is sort of this is

4425.52 -> perfect

4426.32 -> okay um so maybe we'll hard code it for

4428.159 -> now so we don't have to

4429.76 -> uh we might not have time to like create

4431.6 -> a locale picker and stuff and so i think

4433.84 -> if we hard code it you can figure out

4435.199 -> how to you know provide it

4436.48 -> so let's do a project white search for

4438.239 -> uh it's probably going to be um

4440.64 -> look for page in quotes that's going to

4442.96 -> probably be the easiest way to find

4444.8 -> um where we define sort of like model

4448.08 -> equals page

4448.96 -> there we go go to model equals page at

4450.88 -> the very bottom results in

4452.8 -> like path.tsx cool there it is

4456.56 -> and so let's go to where we fetch that

4458.56 -> content so in this case we're fetching

4460.48 -> in the

4461.04 -> get static props uh field most likely

4464.08 -> uh so

4467.36 -> go up a little higher there's probably

4468.88 -> going to be a builder dot get oh there

4470.32 -> we go

4470.96 -> uh here okay

4474.719 -> oh yeah we have this resolve builder

4476.56 -> content and i think

4477.76 -> um did this get updated

4481.52 -> or was locale already here i forgot

4483.92 -> locale already was a thing in this

4485.6 -> starter that we're passing through so we

4487.12 -> kind of just redefined it but actually

4489.04 -> this is kind of

4489.92 -> a perfect example so uh

4493.36 -> we got one step ahead of us i think we

4495.04 -> had the original starter had

4496.32 -> localization i think we actually removed

4498.32 -> it from the builder space to not confuse

4500.159 -> kind of per your point about a lot of

4501.44 -> bells and whistles

4502.4 -> and essentially we're adding it back so

4504 -> why don't we just click into

4505.76 -> um when we like command click and to

4508.4 -> resolve builder content and see what's

4510.08 -> in there i think we've created like a

4511.44 -> little wrapper function

4512.64 -> around fetching the contents that does

4514.56 -> what we want

4515.679 -> yeah there we go okay cool

4519.04 -> yeah we passed the name and targeting

4521.12 -> attributes so yeah oh targeting

4522.64 -> attributes is what needs to go

4524.08 -> in right uh yes exactly so you could do

4527.199 -> like an object spread

4528.48 -> and sort of pass the locale i think

4530.56 -> locale probably makes sense to always

4532.159 -> pass

4532.719 -> uh anyway so we can either just ignore

4535.04 -> the facts that we have it

4536.239 -> would i be able to put it here uh that

4539.199 -> object is the user attributes for

4540.8 -> passing

4541.52 -> so a little bit a little bit more

4543.6 -> confusing targeting attributes

4545.52 -> yeah exactly oh i understand okay

4548.719 -> i well i only sort of understand so this

4551.36 -> locale that's in here is already in here

4553.52 -> so if i hard code this to french

4555.92 -> i should get the french version yes we

4558.8 -> should assuming everything's published

4560.159 -> and

4560.64 -> we might have a brief caching period we

4562.159 -> totally should

4564.239 -> okay so let's go look out here let's go

4567.36 -> to the home page

4572.719 -> uh the next.js dev server in static mode

4574.8 -> is super slow

4576.56 -> uh oh i think that's probably the

4577.679 -> homepage collection i think it lists the

4579.6 -> collections on top and shopify stores

4581.44 -> come with a homepage collection

4583.199 -> okay so here we go we've got we're in

4586.08 -> french

4586.8 -> then if i change it over to spanish

4592.96 -> and if i change it to english

4597.28 -> cool all right so that makes sense i i

4599.84 -> i'm following you here i

4601.12 -> uh so we can just kind of pass in these

4602.88 -> custom things so then we would figure

4604.32 -> out

4604.88 -> how to determine that either from the

4607.36 -> the headers from the

4608.64 -> the browser preferences uh you know

4610.719 -> whatever or

4611.679 -> yeah from a selector like you had

4613.04 -> mentioned um

4615.12 -> any of those would give us the ability

4616.719 -> to determine what the user's preferences

4618.4 -> were for

4619.04 -> for language and show them the right

4621.679 -> thing

4622.56 -> cool this is i mean this is slick this

4624.239 -> is i i can see

4625.84 -> i can see the the power of this approach

4628.32 -> right

4629.28 -> um totally yeah no i'm glad it makes

4631.6 -> sense for context too

4633.28 -> adding custom localization to a shopify

4635.52 -> store with the out of the back side up

4637.28 -> uh the out of the box setup sorry is one

4639.679 -> crazy crazy adventure

4642.88 -> so one thing that you know if any

4644.239 -> shopify developers are watching this

4645.6 -> hopefully should be a breath of fresh

4646.719 -> air that's quite simple to just sort of

4648.159 -> like create and pass params and update

4649.92 -> it on the fly

4650.8 -> and so and we let you be in control of

4653.04 -> how you want to manage that like you

4654.239 -> said maybe it could be

4655.52 -> maybe it's for static like to optimize

4657.44 -> for static build we'd probably say it

4658.8 -> would probably be best to be on like a

4660.32 -> sub path

4661.199 -> that way the pages can be generated you

4663.04 -> know statically served from the cdn

4664.8 -> again with something like netlify we'll

4666.4 -> do that in a super duper optimized way

4668.719 -> and um you know any other things that

4670.88 -> don't need to be rendered on the sort of

4672.88 -> server side the initial page load like

4675.04 -> maybe that announcement bar could be

4676.32 -> dynamic or maybe like when you slide in

4678.239 -> the cart

4678.8 -> some content that could be totally

4680.239 -> dynamic based on cookies or other crazy

4682.32 -> stuff

4683.199 -> yeah and and so this um i believe we are

4687.84 -> like we should be good to deploy this

4689.36 -> right if i want to get init

4692.159 -> um and then i'm going to get add

4695.36 -> pages git commit that

4698.96 -> and do uh um

4702.48 -> update locales

4706 -> good then i can push uh oh wait i need

4709.679 -> to

4711.52 -> repo create

4716.64 -> i love this cli we'll make it a public

4721.76 -> continue that's so cool i'm glad i got

4724.719 -> the

4724.96 -> remote origin already exists

4730.08 -> it does you do a fork or something

4735.28 -> oh it did okay so get remote

4738.56 -> remove origin and then we'll try that

4741.76 -> again

4744.719 -> in the morning um

4747.84 -> in the chat is totally right this uh one

4750.159 -> way to look at what builder is

4751.679 -> they were mentioning sort of like weebly

4753.04 -> and stuff like that honestly those can

4755.04 -> be great for if you're like an

4756.08 -> individual smb

4757.6 -> you know i have friends who have no

4759.04 -> development skills they just make a

4760.32 -> weebly site or squarespace or wix or

4762.159 -> even webflow and it's awesome

4763.679 -> but then as soon as you want to add like

4765.12 -> a line of custom code suddenly it's like

4766.96 -> oh my god

4768.08 -> or like you end up in like dreamweaver

4769.76 -> land or in a land where there's just no

4771.76 -> ui control

4772.88 -> we basically try and like macro level we

4775.6 -> try and bridge that chasm

4776.96 -> you know whereas today um if i didn't

4779.36 -> know how to code i could make a

4780.48 -> recipe site but as soon as i had

4781.84 -> developer want to add a little bit of

4783.199 -> code a lot of times it's throw away the

4784.88 -> whole site

4785.679 -> start over from scratch build it jam

4787.28 -> stack but then have no drag and drop

4788.96 -> control

4789.76 -> we kind of try and fill that chasm and

4791.84 -> say actually you can you can have an

4793.76 -> interface that's like a

4794.88 -> wix weebly squarespace or webflow but

4797.36 -> you can control the tech stack make it

4798.96 -> fast hook it up to real e-commerce

4800.56 -> websites powered by shopify or any

4802.32 -> platform and

4803.199 -> stuff like that which is i'm cool i'm

4804.64 -> glad sort of the followers are sort of

4805.84 -> rocking that well

4806.88 -> nice nice nice yeah um so what i'm going

4808.88 -> to do is i'm going to import

4810.8 -> the oh i'm going to have to nullify in

4812.239 -> it first so let's nullify in it

4814.48 -> oh yeah you might want to um copy your

4816.639 -> dot m development to

4818.4 -> m.production so those keys we added are

4820.88 -> running in production too

4822.639 -> i think what else we're going to do so i

4825.04 -> have a i have a plan

4826.96 -> um so let's do lwj builder io

4831.36 -> uh next build that should work yeah

4834.4 -> we're gonna

4834.96 -> we're gonna use the essential next js

4836.8 -> plugin anyway so that's all gonna do

4838.239 -> what we want

4839.6 -> um cool yep happy with that

4842.639 -> all right so we've got a deploy key

4844.239 -> added and then what i'm going to do is

4845.92 -> i'm going to import

4847.44 -> my environment variables directly into

4849.28 -> netlify so now these are

4851.28 -> in nutlify which means that we can run

4852.88 -> nullified dev which

4854.639 -> also means that i can now ignore my

4857.28 -> environment variables because i don't

4858.48 -> need them anymore

4860 -> so

4864.32 -> these should all let's just ignore all

4866.239 -> of them dot and

4867.92 -> all get out of here and then we can get

4872.84 -> removed

4874.48 -> get remove cache is that right yeah i

4876.719 -> think that's right you just do dot

4878.159 -> even cool okay

4891.52 -> okay so now if i push this

4894.88 -> what should happen let's let's find out

4897.76 -> we're gonna now if i open this

4900.159 -> and you're gonna open the right browser

4902 -> you did

4903.76 -> okay so what should happen let's find

4906.8 -> out

4907.52 -> is it should automatically set up the

4910.239 -> the next.js plugin for us

4912.56 -> um and this should just work

4916.719 -> and is that automatically determined

4918.239 -> like just by having a next config

4919.76 -> and audit no it understands we yeah we

4921.92 -> use some heuristics to figure out what

4923.6 -> framework you're building with and if

4924.8 -> it's next we have the the essential next

4926.639 -> js plug-in which will do

4927.92 -> like it makes sure that the the

4931.04 -> stale wire revalidates stuff will work

4932.96 -> on on netlify

4934.32 -> and things like that no that's awesome i

4936.88 -> think for e-commerce sites stale while

4938.56 -> we validate his killer having to do

4940.719 -> full static builds without the

4942.239 -> revalidation um it's difficult

4944.08 -> if you have so many products like large

4945.76 -> catalogs so that's an amazing feature

4947.52 -> that you all support

4949.199 -> yeah i think the the the tricky part of

4952.08 -> stale wall revalidate is is what we just

4953.84 -> saw today which is where you know you've

4955.84 -> deployed

4956.96 -> but then you see out-of-date content and

4958.719 -> you got to tell people to refresh a few

4960.239 -> times and so

4961.76 -> there are a few ways to approach it i i

4963.76 -> think um

4965.199 -> where i've been leaning is is on uh

4968.639 -> trying to get like you know it always

4970.96 -> depends on the

4971.679 -> the number of of products it depends on

4973.679 -> the frequency of changes

4975.12 -> um yeah but like because of that stale

4978.719 -> part where people might see something

4980.32 -> wrong for like a minute or two

4982.159 -> um when you're trying to do things like

4984.239 -> keep your pricing up to date

4985.76 -> i do it client-side um oh 100 yes

4988.88 -> right and and so a lot of it that's like

4990.719 -> if it needs to be up to date right now

4992.239 -> stale bar revalidates actually going to

4993.76 -> get you into trouble because

4995.04 -> people will be looking at old data for

4997.199 -> the first time they load the page

4998.96 -> and if they don't know to refresh it a

5000.239 -> couple times like they're just going to

5001.44 -> think that

5002.159 -> something went wrong when they click it

5003.52 -> on the the one price and then they get

5005.04 -> to shopify's checkout page and it's the

5006.639 -> other price

5007.679 -> um yeah or availability is the other

5009.84 -> common one people will do client-side

5011.52 -> for the same reasons

5015.84 -> i don't think it's running the plug-in

5019.44 -> did it run the plug-in

5022.88 -> it didn't okay so i need to why didn't

5025.679 -> that work

5029.04 -> well let's just add it

5034.719 -> so i'm going to add this plugin add it

5037.84 -> to

5038.159 -> this one there's a there's a reasonable

5041.84 -> chance that i have uh

5043.12 -> that i have screwed this up because this

5044.639 -> is my account and i add a bunch of like

5046.96 -> i'm on a bunch of feature flags right

5048.719 -> now

5050.56 -> so there's a decent chance i broke it

5052.32 -> for myself so let's uh

5053.679 -> let's see what happens here but this

5054.8 -> will this will build again

5057.199 -> and we'll get the we'll get everything

5059.84 -> up and running

5060.96 -> i also want to check just to make sure

5063.76 -> what version of next are we using

5069.12 -> we're using next 1005 that should be

5072.639 -> fine

5075.52 -> the there was a uh next is tricky

5079.04 -> because their minor versions

5080.56 -> cause breaking changes uh sometimes and

5083.28 -> so like 1006

5085.679 -> 1006 to 1007 was had some breaking

5088.32 -> changes and then like

5090.08 -> most recently i think 0.9 was a breaking

5093.6 -> change

5094.32 -> because they switched from like

5096 -> synchronous config loading to async

5097.84 -> config loading and that broke a bunch of

5099.6 -> stuff so there's

5100.48 -> there's challenges but yeah so this is

5102.48 -> this is installing and loading that that

5104 -> should build properly

5105.199 -> and then we should we should be good to

5106.8 -> go so while we're doing that how about

5108 -> we do this let's do a let's do another

5109.6 -> shout out

5110.4 -> we've had this show today completely

5112.56 -> live captioned

5113.52 -> thank you so much to wyco captioning for

5115.12 -> being here uh and that is made possible

5117.52 -> through the support of our sponsors

5119.679 -> we have netlify fauna auth0 and

5123.04 -> asura all kicking in to make this show

5125.12 -> more accessible to more people which

5126.639 -> really means a lot to me make sure you

5128.719 -> head over it's on the home page every

5130.32 -> week

5131.36 -> so that you can go and check that out

5133.12 -> and keep in mind that while you're there

5135.199 -> you can go check out the schedule we've

5136.4 -> got so much exciting stuff coming up

5138.239 -> later this week on april fool's day and

5140.159 -> no this is not a joke we've got prince

5142 -> coming back on the show if you don't

5143.44 -> know prince

5144.239 -> you should make sure you come back on

5145.76 -> thursday this is going to be really fun

5147.04 -> we're going to be playing with

5148.4 -> the the event sub api from twitch doing

5151.679 -> some real-time stuff trying to play with

5153.199 -> the overlays on the show

5154.56 -> uh then next week i've got cassidy

5156.639 -> williams coming on we're going to troll

5158.239 -> sarah

5158.88 -> sarah drazner who until very recently

5160.4 -> was our boss um

5162.32 -> then uh nicholas burke is going to come

5164.4 -> we're going to do some stuff with prisma

5165.76 -> which if you don't know prisma it's like

5167.28 -> a

5168.239 -> orm like thing for databases it's very

5171.52 -> very cool

5172.159 -> they've been doing a ton of work on it

5173.52 -> and i'm super excited about that

5175.36 -> uh yeah we're going to do forms in

5177.12 -> angular we're going to have nathaniel

5178.8 -> kenwa back to do

5180.08 -> custom ivr and you may have seen uh ben

5182.96 -> ben

5183.28 -> in the chat ben code zen but uh

5186.32 -> i'm gonna take a vacation i'm taking a

5188.32 -> vacation this year

5189.679 -> i don't know when the last time was that

5190.88 -> i took an actual vacation but

5193.12 -> just because i'm gonna go on vacation

5194.56 -> doesn't mean that the show shouldn't go

5196.159 -> on

5196.8 -> so ben hong is going to take over

5200.32 -> learn with jason we're going to do a

5201.6 -> week of learn with ben

5203.36 -> i'm so excited to try this out it's

5205.12 -> something that i've been kicking around

5206.239 -> for a long time

5208.08 -> it's going to be an absolute blast so so

5210.159 -> the week of april

5212.76 -> 25th

5214.719 -> after this week so after shawn dies on

5216.32 -> the show we're going to do a week of

5218.56 -> learn with ben and it's going to be so

5220.08 -> much fun

5220.96 -> um but yeah so that's an experiment i

5223.199 -> want to see what happens with guest

5224.239 -> hosts i think it's going to be an

5225.6 -> absolute blast uh steve where should

5229.04 -> people go if they wanted them no my

5230.719 -> build failed

5234.239 -> deploy directory out does not exist why

5236.4 -> does it think that there is

5240 -> next config must set the oh okay so

5242.88 -> we've got things set in here that we

5244.159 -> have to fix we need to set the target

5247.6 -> is it not setting it for us

5251.36 -> target property to serverless let's do

5253.52 -> it

5255.44 -> and then we'll deploy it one more time

5256.8 -> and this one's going to work and while

5258.56 -> we're waiting for this to

5259.76 -> to build uh server or less

5263.199 -> i can spell save

5269.92 -> uh fix add config that's

5272.96 -> i think that might be why this didn't

5274.239 -> get automatically picked up is that the

5275.679 -> next config

5276.4 -> is is not compatible with nullify so

5279.6 -> let's

5280.08 -> get push that that'll get going and once

5283.04 -> that is in

5283.92 -> we'll watch this deploy here we go it's

5285.76 -> gonna work this time

5287.84 -> okay so steve uh everybody's gonna go

5290.08 -> follow you on twitter

5291.04 -> right now right right chat how many of

5293.04 -> you have followed i'm gonna refresh this

5294.32 -> page how many of you have followed since

5295.6 -> we started this episode

5297.679 -> yeah i don't have a lot of followers six

5299.12 -> of you there you go all right let's get

5300.96 -> the rest everybody else get in here

5302.719 -> um steve where else should people go if

5304.159 -> they want to learn more about builder io

5307.36 -> yeah i would say just go to builder.io i

5309.52 -> think there's a lot of

5310.56 -> resources linked to there you'll have to

5312.08 -> go incognito because of being logged in

5315.28 -> uh and also actually the other cool spot

5317.44 -> is our our

5318.32 -> github we have a lot of open source

5319.92 -> stuff if you go to github.com

5323.04 -> builder builder yeah there's a lot of

5325.36 -> really cool stuff here

5326.56 -> there's examples how to get started with

5328.56 -> your tech stack of choice i saw

5330.48 -> some people don't want to use react

5331.679 -> you're in luck you don't have to you can

5333.04 -> use vue

5333.6 -> angular or even sort of roll your own we

5336 -> even have a sort of like framework list

5338.08 -> html api you can just hook up and do any

5340.239 -> stack we have

5341.6 -> sdks examples plugins um a lot of cool

5345.36 -> stuff and you can leave us get up issues

5346.639 -> and be like hey i hate this product

5348.239 -> or hey i want this feature and we

5350.08 -> respond to them all and we're helpful on

5351.679 -> the mall

5352.159 -> so i'd recommend anyone to poke around

5354 -> there you can even check out other sort

5355.679 -> of related open source projects we have

5357.6 -> like a really cool one we have is a

5360.239 -> import from figma so you can make a

5361.84 -> design in figma

5363.12 -> using their cool auto layout feature

5364.719 -> which is a lot like flexbox and you can

5366.32 -> just suck it into builder

5367.84 -> yeah and just repeat that and it's cool

5371.04 -> because you can do that as a builder

5372.4 -> customer just import design and publish

5374.48 -> we're also jason if you hit there's like

5376.08 -> a code icon up at the top by the

5378.239 -> published

5379.199 -> um text yeah by the undo redo

5382.88 -> and if you go to git output code you can

5385.36 -> actually turn any content yeah into code

5387.679 -> of your choice if you hit that you'll

5389.28 -> see tabs for

5390.239 -> in go there react view html yeah

5393.679 -> and so you can sort of grab code

5396.8 -> this is pretty fun to just import a

5398.4 -> design and turn it into code so

5400.4 -> you don't have to be a paying customer

5401.92 -> just start using it and if you're tired

5403.36 -> of copying and pasting code

5404.719 -> and having a re-paste hook it up to

5406.48 -> builders apis and now you can import

5408.4 -> publish so you can see more about that

5410.48 -> on our github play around with the

5412.08 -> features it's pretty fun stuff

5413.84 -> very very cool stuff yeah so um let's

5416.719 -> see this is actually generating static

5418.239 -> pages this time so i think it's going to

5420.08 -> work let's

5421.36 -> let's hope oh yeah this is this is what

5423.12 -> we want to see this is from the

5424.719 -> the next plugin um so this should be

5427.679 -> live here in just a second

5429.12 -> uh and with that we are out of time so

5431.84 -> let's go ahead and find a

5433.36 -> channel to raid steve thank you so much

5435.76 -> for hanging out today this was super fun

5437.84 -> i really appreciate it builder i o looks

5440.08 -> really really exciting i think

5441.6 -> i'm excited to see what people are out

5443.679 -> there building with it

5445.36 -> everybody's going to go follow you on

5446.56 -> twitter uh y'all thank you so much for

5448.4 -> hanging out today chat it was an

5449.679 -> absolute pleasure

5451.04 -> we will see you next on thursday we're

5454.4 -> gonna see you on thursday it's gonna be

5455.679 -> great

5456.4 -> talk to you soon chad

5459.679 -> let's go to this scene i got

5462.32 -> discombobulated at the end i forgot

5463.679 -> what's going on okay bye for real

Source: https://www.youtube.com/watch?v=qenhhg7xIGQ