Build an E-commerce Site with Next.js and Shopify
Build an E-commerce Site with Next.js and Shopify
Build a modern e-commerce web store using Next.js and Shopify. Jason will tackle building a custom app with a shopping cart in this episode.
Repo: https://lwj-store-nextjs-shopify.netl…
Demo: https://github.com/learnwithjason/lwj…
Links
https://www.learnwithjason.dev/store
Watch future episodes live at https://twitch.tv/jlengstorf
This episode was sponsored by:
- Netlify (https://lwj.dev/netlify)
- Nx (https://lwj.dev/nx)
- Backlight (https://lwj.dev/backlight)
Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)
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
4.1 -> JASON: Hello, everyone. I'm out of focus!
Why? Look at this. I have to trick this camera
9.54 -> into focusing on my face. I think my face
is, like, distinctly not person shaped or
16.36 -> something because this camera does not believe
that I am a face worth focusing on, which,
21.61 -> if I'm honest, is kind of messing with my
self-esteem.
25.72 -> Well, hello, everyone. Welcome to Learn With
Jason. Today's going to be a solo episode.
30.59 -> We had a change of schedule. I know some of
you all showed up looking at Rust for JavaScript
34.35 -> developers. That episode is still going to
happen, but we pushed it back a little bit
38.6 -> because Syd is still working on the course.
It's not quite ready to go out, and we didn't
43.539 -> want to do the episode before the course is
actually ready. So if you want more information
48.809 -> on that, find Syd on Twitter and keep an eye
out. We'll reschedule as soon as he has a
55.059 -> launch date for it.
What I am going to do in the meantime is I
61.35 -> have been meaning to just start playing with
some new ideas for the Learn With Jason store.
68.03 -> So the Learn With Jason store has been up
for a while. If you have not seen it, I have
75.2 -> some things for sale. So you can find my -- these
rainbow Corgi rubber ducks that I absolutely
83.21 -> love. You can find a bunch of stickers.
So I built this piece of the site pretty quickly,
90.369 -> right. I was just trying to get something
out there because I wanted it to work. But
94.45 -> it's powered by Shopify. I don't know. I just
want to see if I can make it a little better.
99.34 -> So today what I want to do is dig into just
building a new experience for it. I thought
104.979 -> I could build it with Next.js, try out some
of the features. We're going to look at potentially
110.679 -> playing with -- maybe we'll play with some
edge functions. We'll see. And just see what
117.7 -> we can put together in 90 minutes of playing
with Next and Shopify.
123.329 -> So let's see. So hydrogen is very cool. I
do really like hydrogen. And you're not wrong.
134.34 -> However, I want to do a whole episode on hydrogen,
and I would love to get one of the Hydrogen
139.47 -> devs to teach it. Me fumbling through it,
I don't think, is going to be giving it the
144.03 -> right -- I don't stream for long enough to
learn something from scratch. I don't think
149.78 -> I would, without a guide, get far enough for
it to be a particularly engaging episode.
156.52 -> So I will do, if I can find any Shopify devs
out there, you want to teach Hydrogen, hit
163.32 -> me up. But today we're going to use Next.js
because I'm familiar with the technology.
168.38 -> Also, it's just very popular. Everybody is
building with Next.js today. I thought this
173.37 -> might be a good way for folks to get a sense
of how to build with it. How do you use Next.js
177.79 -> to build an e-commerce store if you don't
want to use a template or if you've never
182.31 -> done one before? But you want to use Shopify.
So let's go ahead and dive on in. So what
190 -> I'm going to do is instead of doing the normal
thing where I just talk for forever, I'm just
194.02 -> going to start building some stuff because
I have this sneaking suspicion that I'm going
198.29 -> to spend way too long on CSS. I want to make
sure we actually build something today.
202.4 -> So first and foremost, this episode, like
every episode, is being live captioned. We've
207.361 -> got Rachel here today from White Coat Captioning.
Thank you very much, Rachel. That's made possible
211.57 -> through the support of our sponsors, Netlify,
Nx, And New Relic, all kicking in to make
215.44 -> this show more accessible to more people,
which I very much appreciate.
219.22 -> We're going to be working with the store data
here. So this data is already in Shopify.
228.26 -> So the benefit here is I already have a working
Shopify store. So I'm not really going to
232.72 -> go through how to set up Shopify. I'm more
going to be looking at if you've already got
237.62 -> Shopify data, how do we get it out and into
a store.
241.04 -> I have other episodes, if you are curious.
You can search for some Shopify stuff. I got
246.47 -> a whole bunch of episodes in here where we've
got Kelly Vaughn, who's just a great teacher
251.57 -> on Shopify in general. We built some stuff
with Fauna and discount codes in Shopify that
256.97 -> was pretty cool, some more advanced workflow
stuff. We used Builder.io to put together
262.59 -> a Shopify site. Another one with Kelly. I
set up Gatsby in Shopify. So we have a lot
269.06 -> of Shopify content in here if you want to
look at it.
272.06 -> But today we're just going to play a little
bit, see how far we can get. So what's up,
278.51 -> everybody? I see some familiar faces. Ryan,
what's up, buddy? Yeah, Adrian, what's up.
287.54 -> Yeah, like I said, the Rust for JavaScript
developers is going to be later. It is going
295.58 -> to happen, it's just not today. Welcome, welcome.
Thank you, all you first-time chatters. Glad
300.59 -> to see you all here.
Let's do some stuff. So the first thing I'm
306.59 -> going to do is I'm going to just make a new
project for this. So I'm going to make -- let's
311.6 -> call this LWJ store. I might rename that later.
For now, that's going to be good enough. Then
323.26 -> the next thing that I'm going to do is I'm
going to try npm create Netlify. Let's see
333.63 -> if this works. I think this works. This is
a new feature that I haven't tried. I might
339.91 -> have to do something different, but I think
it's going to let me pick which flavor of
344.84 -> thing I want to deploy. I think it'll let
me deploy a brand new Next site.
348.42 -> So here's Netlify. I want to configure a new
site. We're going to call this LWJ store Next.js
362.29 -> Shopify. And base directory. Yep, this one.
Oh, this isn't going to do what I want. You
374.79 -> know what, I'm not going to do that. I thought
it was going to let me create a Next.js site
379.91 -> here.
So let's do one of these. And I'm going to
382.24 -> do npm create Next -- what's the quick start
command for Next.js? Let's go to docs, getting
393.9 -> started. Cool, let's do that. I'll do one
of these.
406.62 -> Big Hairy Dude, what a user name. (Laughter).
Let's see. I'm going to put this project -- oh,
414.12 -> wait. I need to do it here, don't I? What?
What? Oh, because we started that project
422.43 -> and killed it. So let me get rid of that one.
I'll do another one. Here we go.
427.46 -> Oh, Lee. What's up, Lee? So we're going to
do the install here, get this all running.
439.889 -> And now we have a basic Next app. So it looks
like we got some pages. Gotten a API route.
449.58 -> Got some public stuff, some global styles.
So we'll go in and clean all those things
454.4 -> up.
We've got all the basic scripts. Only a few
461.699 -> dependencies in here. So I'm just going to
start this up with Netlify dev. All right.
471.13 -> So there's our site. And that is all doing
what I want. Good, good, good.
476.75 -> So I'm going to go in and just start cleaning
things out. So let's go to our index page.
482.82 -> I'm going to leave that head. I'll throw one
of these in here. The rest of this I'm going
493.36 -> to leave out. So we've got a main tag. Won't
use that image. Probably going to dump a lot
508.23 -> of the styles. We don't need that. Probably
don't need that. We don't need -- let's see.
522.579 -> Let's see what this looks like.
Okay. So that's a plain old thing. So we're
528.619 -> using system font. Cool with that for now.
This looks like a reset. Great. We've got
535.06 -> our home module. I'm just going to throw that
whole thing away. All right. So we've got
542.99 -> home.module.css. That means these no longer
work. So we'll just have a plain old -- yep,
548.67 -> that's good.
Where do these colors come from? Color scheme
553.07 -> dark. What is the color scheme, though? Is
that just like a thing? That's something to
567.529 -> dig into. Not rabbit holing on CSS today.
I'm probably going to intentionally make this
571.839 -> a little ugly to prevent myself from overfocusing
on CSS. Thanks for the sub, Big Hairy Dude.
583.339 -> Appreciate it. Should I learn Next.js after
studying React for like two months? Sure.
590.459 -> The thing that's cool about most of these
frameworks is that Next.js is cool. A lot
595.829 -> of companies are using it. It is going to
be a useful tool to have in your belt. Other
602.559 -> frameworks like Remix are going to teach you
about the platform. If you're learning React
609.459 -> and you start using those other frameworks,
you'll start to see where the edges of React
613.49 -> are and the nuances of the different frameworks.
I'll try to call out some of those today as
619.309 -> we go. But yeah, lots of things. Look, Benjamin,
I'm not going to do it. Not going turbo on
626.99 -> CSS today. What I am going to do, though,
is I think just to keep my life simple, I'm
634.29 -> not going to do any color variations. So we're
going to have a straightforward thing here.
641.1 -> Then I'm going to put together a container.
That container is going to have a margin of
647.04 -> 5 rem auto and a max width of 600 pixels.
I think that should be good. Okay. So that's
660.079 -> our container.
Now we've kind of got this centered area where
665.91 -> we'll put all the code in. So I've got that.
Then this API route, we're not going to need
673.529 -> yet. App, let's see. We need that. Index.js
has not a whole lot in it. So let's go with
687.8 -> Learn With Jason store. We'll say please buy
a duck. Then we can say Jason has so many
702.069 -> ducks, please help.
Favicon, we don't really need that, so I'm
710.42 -> going to leave it out for now. I think it'll
still give me an error, but I don't really
715.619 -> care at the moment. So then that's going to
be -- we've got our container. We have got
722.189 -> our main that doesn't really need anything
yet. We've got our H1. The next thing I want
726.639 -> to do down here is I want to get a div that'll
be a class name of styles products. That'll
735.541 -> be where we put the actual products themselves.
Then I want to do add products.
744.61 -> So let's take a peek into the Shopify API.
What's up, Xander? What's up, Tony? Yeah,
755.389 -> I mean, like Tony said, there are good framework
options out it. They're all valid. And it
762.079 -> really depends on what you're trying to build.
Next.js is a great framework if you're building
767.92 -> something very complicated. Like if it has
-- if it's a dashboard, if it's got lots of
772.93 -> moving parts, if you need to load data from
a bunch of places, if you've got a lot of
778.589 -> variability in what you're building. If you're
building a plain old page. I mean, I could
783.67 -> make an argument it's overkill for me to build
a store right now with Next.js for what I'm
789.649 -> going to end up doing. But I also just kind
of want to learn. There's some stuff in Next
794.399 -> 12.2 I haven't used. I'm curious how these
nested routes work. So I want to play with
798.929 -> those a little bit and see. Because I think
it's cool, and I want to try it out.
806.249 -> So like I'm doing this to learn. If I was
building this for production, like building
810.35 -> it for Netlify, I probably wouldn't build
a swag store with Next. I would probably build
815.709 -> it with something lighter weight on the JavaScript.
But you know, these are where the trade-offs
822.11 -> come in. What are you trying to accomplish?
Also, what does your team know? If you're
825.959 -> working on a team of ten people and nine of
them know how to use Next.js, you're going
830.61 -> to be faster with Next.js, and you have to
weigh that against the cost of learning something
834.749 -> else. But if you have a bunch of front-end
devs who are really good at HTML and CSS,
839.879 -> Eleventy is going to get you there. But if
you don't know CSS, it could be trick you
848.089 -> because you're trying to learn the platform
instead of using something you already know.
854.079 -> So it's deadlines. It's trade-offs. It's what's
your user base. How long does it have to live?
860.869 -> Does it need constant, steady maintenance?
You're going to roll over the way it looks
865.36 -> every couple weeks? That constant iteration,
sometimes you need more component-based stuff
871.889 -> to make that easier.
All these things come with costs and benefits.
879.889 -> And you just got to make sure you actually
run through those and make sure they work.
885.97 -> Oh, my goodness. Jonathan just showed up with
the worst pun. The worst. Thank you for hanging
892.739 -> out. It's good to see you. I haven't seen
you in a minute. How you been, man? I know
899.16 -> how to eat cheese. I know how to eat cheese.
Can we do -- dang. Can we do that?
904.759 -> Ryan, I'm not going to be building a checkout.
I'm going to use Shopify checkout. I like
909.049 -> that Shop Pay is just built in. So you get
order tracking and those pieces without me
916.56 -> having to do anything. And I just kind of
am okay with the fact that the checkout looks
920.779 -> like a Shopify checkout because honestly,
I find that to build confidence. When I go
925.93 -> to a store and hit their checkout page and
it's a Shopify checkout page, I know that
930.769 -> they're using Shopify. I know that the payment
system is vetted. I know that it's not going
936.48 -> to some rando's inbox and they're going to
manually enter that credit card information.
941.329 -> So I kind of prefer the Stripe checkout, the
Shopify checkout. And from a developer standpoint,
947.559 -> I want the easy thing, and it's definitely
the easy thing.
953.359 -> So, let's see. (Laughter). It's deadlines.
Yeah, definitely got to get back to Portland.
964.22 -> It's very hot here now, but dang, it's going
to be cool. Yeah, yeah, yeah, the Shop app
971.67 -> is kind of like built into the checkout. We
can look at that in a minute here.
974.859 -> So the first thing I should probably do is
let's go to my Shopify store. Where is it?
981.799 -> Shopify.com. I need to log in. I don't remember
where. So I'm going to do it over here. That
990.339 -> sounds right. I thought I was logged in. Are
you looping me right now? No, here we go.
1000.449 -> So here's the Learn With Jason store. In it,
I have a bunch of products. So we can see
1009.589 -> the products that are in here. We've got like
sticker packs. We've got the Corgi duck. Then
1015.17 -> down here I have -- is it here? Where is all
this stuff? Is that the wrong address in there?
1026.14 -> Boy. Where's my -- apps, that's what I'm looking
for. Nope.
1032.199 -> Oh, no. They changed my dashboard. And now
I don't know where things are. Store details,
1042.329 -> plan, online store, store importer, sales
channels, develop for your store. Private
1051.19 -> apps have moved. That's what I need. Develop
apps, Learn With Jason. And this, I think,
1057.38 -> is my -- I'm going to pull this off screen,
just in case it shows a key.
1063.37 -> All right. So I have choose permissions, shared
secret. I'm looking at this off screen because
1078.19 -> I can't remember if this API key needs to
be private. I'm pretty sure the API key can
1082.711 -> be public, but the password is private. But
just in case, I'm not going to show you either
1088.21 -> because I'm sneaky.
So what I'm going to do is off screen here,
1094.47 -> I'm going to get a new window, pull this out.
I guess I have to do it over here. And just
1103.72 -> take my API key in secret. Get those into
a doc for myself so that I can use them. And
1114.659 -> that is how I'm going to actually hit the
end point here. But then what I need is I
1120.6 -> need to go and find the -- let's go to the
Shopify developer API. And I'm going to put
1133.19 -> this back up here.
So I want to get a list of my products, and
1144.23 -> I think I can do that through store front
API. That's the one I want. And I've got the
1150.85 -> GraphQL store front API, which is dope. I
think I want the Node.js one. Npm package?
1164.75 -> Hmm. Hmmm, that's interesting. I've never
seen that.
1170.769 -> So what's this going to give me? Let's take
a look. So we're going to go to getting started.
1179.81 -> And I need to install Shopify API. All right.
So let's start installing things here. I'll
1189.039 -> stop here and I'm going to npm install Shopify
API. I'm not going to need .env, I think,
1198.59 -> because Netlify will already give me that.
I'll add TypeScript as well, which I think
1205.01 -> is a dev dependency. We'll add it anyway.
Doesn't really matter.
1220.75 -> Not using express. Examples. It was dev. That's
okay. Oh, I'm going to need the node types
1229.12 -> as well. So then once I get down in here,
do I really want to change a bunch of things?
1242.48 -> Is it going to -- maybe I'll just ignore that
and see what happens. It's doing a lot here.
1251.64 -> Doing a lot here, y'all.
What's up, Ricardo? Lots of first-time chats
1259.83 -> this time. What's up, y'all? Yeah, TypeScript
should be a dev dep. That's what I thought.
1266.69 -> I should have listened to my gut. I didn't.
I'll fix it. So let's go back over here. Going
1273.85 -> very slow.
So here's TypeScript. I'm going to drop it
1277.429 -> down here. Then the other thing that I'm going
to need is I also need node. That should fix
1285.529 -> -- did that break my stuff? Okay, good. Oh,
damn it, I put it in the wrong place again.
1292.39 -> Again! Let me take this and move it down here.
Do another one of those, make sure it's in
1301.21 -> the right place. Good. Okay.
So now we have the Shopify API. We've got
1305.03 -> our node types. We have TypeScript. I don't
actually -- you know what, I'm starting to
1309.22 -> think I'm severely overcomplicating this.
I should probably just hit the end point,
1313.97 -> right? Let me -- do you just have, like -- what
if I just want to call the thing? So you make
1327.08 -> a call. Get your active Shopify shops. Then
I want to make a request. I don't know how
1338.289 -> I feel about this. This might be more than
I need. Like, I kind of just want -- store
1347.88 -> front API call. That's what I want.
So, got a shop, gotten a access token, and
1362.889 -> then -- I don't like this. Okay. No offense
to the devs who built this. I shouldn't dunk
1373.44 -> on other people's code, but this feels like
a lot. I don't want to use it.
1377.19 -> Instead, I'm going to go to the Learn With
Jason site, where I've made a call. I'm just
1383.149 -> going to copy the way that I did it there,
which I think I did through just a straight-up
1391.49 -> call. So I've got a post to Shopify, which
I'm going to need. So let's maybe dive into
1398.58 -> that function. I've got the utils folder up
here. Here's my post to Shopify. And this
1406.57 -> is going to make a GraphQL call.
So why don't we grab this, bring it out here.
1415.929 -> I'm going to set up -- how does Next handle
utilities? Great question. Let's try. I'll
1428.88 -> set it up at the top. Let's set up a new file
called utils. That's supposed to be a folder.
1438.74 -> Let's delete. And I'm going to set up a new
one called utils. Then we'll just do Shopify.js,
1450.029 -> drop this in here, and let's just do a quick
-- oh, I made this TypeScript. Is this going
1457.73 -> to explode? Good question. Don't know. I guess
we'll find out.
1463.62 -> So I have the ability to post to Shopify.
You send a GraphQL query and any variables
1470.279 -> you need. I'm going to -- this is not a TypeScript
project. So I'm just going to drop the TypeScript
1477.47 -> out. Let's see. Then get rid of this. Do we
have any TypeScript in here? No, okay.
1494.159 -> So we send a query and variables. We await
a fetch. I'm going to have to install node
1499.47 -> fetch, which I can do here. Then we need to
set up the Shopify API end point. So the way
1511.96 -> that works is I can go Netlify env set. Then
I want Shopify API end point. And I need to
1520.299 -> figure out what that is. Because it's in the
-- I guess I can just go look in my site.
1530.89 -> So if I go to app.netlify.com -- oh, I can
show y'all something cool while we're in here.
1538.929 -> In the site settings, you can go to the build
and deploy. Then check this out. This is cool.
1547.84 -> I'm going to go to labs. Then we've got deploy
contexts for environment variables. So check
1556.83 -> this out. Now when I go into my sites, I go
back in here. I'll go to my site settings.
1565.87 -> Then I'll have environment variables.
So now I want to migrate my environment variables
1571.85 -> over here. And what that'll give me is all
of my environment variables are now set up
1577.74 -> like in here, which is super cool. Then I
can set them to only work in certain contexts.
1584.02 -> So if I edit this, I can say specific scopes.
Now the environment variable only shows up
1590.21 -> in functions and not on builds. So this is
super cool if you, like, need an API key to
1595.809 -> make an API route work, but you definitely
don't want it to be available to the client-side
1600.149 -> code. You can just uncheck this. Like, how
cool is that?
1604.51 -> So I'm not going to do that. I need this same
thing, and there's nothing sensitive about
1608.74 -> this one, so I can just ta-da. I'm going to
take that, come out here. I'm going to set
1615.909 -> it. This is going to fail because I didn't
actually set up the site yet. No site ID found.
1622.57 -> So I'm going to Netlify link, and this is
going to be to the -- I have to get out to
1629.5 -> the site I just set up over here. This one.
And we'll go to site settings. It's going
1635.21 -> to give me a site ID. So I can copy that.
And I'm going to enter a site ID. Bada-bing,
1641.549 -> bada-boom. So we'll run that Netlify env set
again. And what this will give me, if I go
1650.11 -> and look at my environment variables now,
is I've got my Shopify API end point.
1658.11 -> So this is pretty nice. It's set. It'll run
now. I'm going to do the same thing -- let's
1665.09 -> see. If I hide this, oh, perfect. So what
I can do is I can Shopify API key. Shopify
1680.179 -> store front API token is what it needs to
be called. And that token is the one that
1685.591 -> I put over here. So I'll drop this in. And
if I wanted to, I could set it up to where,
1693.059 -> like, we had a beta store. Oh, you son of
a -- damn it. I'll go roll that token.
1702.88 -> Actually, the API key -- is the API key public?
Does anybody know? The API key is not sensitive
1708.78 -> because you need the password to do any changes,
right? What was I just looking for? Don't
1720.13 -> know what I was looking for. Just scanning
the chat real quick. Yep, yep, yep. Lots of
1729.15 -> first timers here. Thanks, y'all, for hanging
out. Benjamin, get to the CSS. I'm gonna.
1736.23 -> Let's see. Is there at least a learn how to
build Shopify sites? There's a dev store that
1743.97 -> you can't go public with. So if you look at
Shopify dev store, you can create a development
1753.84 -> store. This would be how you do one you want
to learn with, but you can't actually sell
1758.64 -> anything through it.
What else? Nettles, boops. What's up, Britney?
1768.179 -> Chris with the sub. Thank you so much. Hacked,
yeah. Yep, yep. Yeah, so the Rust thing got
1778.289 -> reschedule. It's not gone. It's just going
to happen later. We needed some more time
1783.34 -> for Syd to get his course launched. So stay
tuned. We'll update the schedule once that's
1788.37 -> live. But today we're doing some Shopify.
All right.
1792.96 -> So we've got this API token. I'm almost positive
-- authentication. The API token header on
1804.84 -> all queries, right. So I'm not using the secret.
So I'm just going to go ahead and trudge forward
1817.46 -> with this. I don't think we need to worry
about this. This will let you read from the
1821.539 -> store, but that's okay because all the data
in the store is read. I want that to be public.
1828.07 -> Yeah, Britney, the Netlify init thing would
have done it, but I started it before, which
1835.059 -> created the site. Then I didn't finish linking
it because I wanted to create the Next site
1840.279 -> first. So I haven't -- I didn't finish setting
it up. So I'm going to have to do some manual
1845.48 -> things to make it all work.
So I've got my token. Any other things here?
1851.34 -> Great. This is going to be my Shopify query.
Then in the API routes, I want to create a
1857.919 -> -- we'll call it products.js. And I'm going
to go back to my Learn With Jason code, where
1866.77 -> I've already done this. So let's go to products.
If anybody wants to follow along, you can
1876.871 -> see the code to all of the Learn With Jason
site here. This site is build in Remix, and
1884.529 -> it was super fun to build. There's a lot of
cool stuff in there. Today we're playing with
1888.429 -> Next because Next is also fun, and I want
to learn things.
1891.669 -> So let's build out -- this one is running
TypeScript. So I'm going to export const -- or
1905.049 -> no, this is a Next API route.
1906.82 -> So I have to go look at their API routes.
I want to see example. Export function handler.
1924.499 -> One of these.
So what I'm going to do is up here, I want
1929.85 -> to import from utils
and Shopify. There you are. That's great.
1954.69 -> So then what I want to do is I want to get
-- does this blow up? We're going to find
1961.36 -> out. So const data equals await, post to Shopify.
Then we have our query, which I'm going to
1972.012 -> have to write, and variables, which I don't
know if I need, but I'm going to get ready
1977.44 -> for that. And then we'll just return whatever
we get back.
1986.6 -> So our query is going to match -- let's just
use the same one I'm using on the site already.
1992.759 -> This will be my product list here. So this
is all the data I use to get products on the
2000.559 -> Learn With Jason site right now. Let's just
do a quick run through of what all that is
2005.83 -> because if you've never looked at GraphQL
before, this can be a lot.
2010.23 -> The query name is get product list. The products
themselves are going to be sorted by price.
2017.32 -> That's what the sort key is. And we're going
to get the first 100 products. We order by
2021.83 -> reverse, presumably because that's what I
-- I don't know why I chose to do that. Probably
2027.519 -> to put the duck at the top, would be my guess.
Edges is a Graph theory kind of term. If you
2034.419 -> think about graph theory, you've got nodes.
Those are dots. Then you've got edges, which
2038.889 -> are the lines that connect the dots. So edges
can contain relationship data. Typically speaking,
2044.389 -> when you make GraphQL queries, at least in
most basic use cases, edges is just the thing
2049.94 -> that wraps the nodes.
So an edge is a relationship between nodes.
2053.14 -> The node itself is like one of the products.
And then inside of that, I want the ID. I
2059.25 -> want its handle. Description, title, how many
are left. Then variance is a Shopify thing
2063.91 -> where you get sizes or colors or things like
that. So within the variance, I also want
2070.7 -> the edges and nodes. Then I want to get the
title, how many of them there are, and the
2075.74 -> price. We also want to get the max variant
price, the min variant price, in case you
2081.64 -> need a price range because you can do something
where like an extra, extra small is $10, but
2087.42 -> a quadruple XL is a bigger item and costs
more to make, so maybe that's $15. And you
2092.5 -> want to be able to show the range is $10 to
$15. Then we want to grab any product images.
2097.91 -> In my case, I'm grabbing the first product
image. But hey, any of y'all who have ducks,
2104.38 -> maybe send me images with the ducks.
I know a lot of you have tweeted them. Maybe
2109.991 -> it would be found to put some people doing
fun stuff with their rubber Corgi ducks. This
2115.51 -> is the duck, by the way. I love this duck.
I get a lot of joy.
2138.84 -> (Audio feedback)
2177.93 -> JASON: Is it still doing that? (Echoing).
Okay. Okay. Nope, still broken. Check, check.
2247.2 -> We doing it now? Oh, my goodness. That was
absolutely bizarre. Okay. Okay, I think I
2318.441 -> fixed it. I had to, like, quit my whole browser.
That was the weirdest thing I think I've ever
2325.87 -> done on this stream. Because it was like my
whole tech setup just, like, absolutely rebelled
2334.63 -> just now.
So weird. Thanks for sticking through that
2340.29 -> with me, y'all. That was one of the -- that
was a fun little mystery. Okay. Anyway, so
2347.61 -> now assuming I have done all of this correctly,
which is a 10,000-foot if, let's start this
2356.17 -> thing up again. And because I have set those
environment variables in Netlify, it will
2362.03 -> pull them down for me. That's part of the
local dev experience, which brings me joy.
2367.49 -> And if I come over here and bring this back
up and I go to API products, we get an error
2384.44 -> because I screwed something up, I think.
Let's see. Unexpected end of JSON input. That's
2389.97 -> fair. But what was it? So we had all the pieces.
The pieces should have been correct, but we're
2399.42 -> missing a thing. So the thing we're missing
is -- oh, I have a theory. I think I got the
2406.09 -> wrong Shopify could or the store front API
token. So give me a second off screen. While
2415.551 -> I update that token.
Go to apps and go into my develop apps for
2427.25 -> your store. Going to get into this thing.
Going to scroll on down past the admin API
2434.79 -> to the store front API, which is the one I
actually needed. So let me copy that, and
2441.27 -> we'll go back into app.netlify.com.
I am going to my site. Nope. I meant to go
2455.47 -> to the environment variables. Here. And then
I need to update this one. So we'll go options,
2462.41 -> edit. And here's the new one. Save that variable.
All right. So then we're going to stop and
2470.85 -> restart. Theoretically speaking, this will
start working. Ta-da! Okay.
2482.01 -> So now we've got products, right. So let's
see, we are just about halfway through the
2488.61 -> episode. We have some products. Those are
being loaded on the page through an API route.
2492.29 -> I would like to use these now.
2497.87 -> So let's go to my index.js. I'm going to -- let's
just list them, which means I need to export
2508.24 -> -- is it a const? Let's go to Next.js, get
static props. So export async function, get
2522.03 -> static props. Async function, get static props.
That's going to return props, and inside of
2534.25 -> this, I want it to have my products. So I'm
going to just hit that API route.
2542.14 -> So I'm going to do a const data equals an
await fetch. That's going to require node
2554.18 -> fetch, I think. Let's see if it poly fills
that for me. I'm going to get the API products.
2562.91 -> That should be all I need. So then we'll do
then -- actually, I'm going to do it a different
2568.82 -> way. We'll do an if the response is not okay,
we're going to console.error response. And
2587.24 -> we'll return. If we get down here, what I'll
do is we'll get products equals res.json.
2604.61 -> We need to await that. So that'll give us
our products. Then I can just drop the products
2610.59 -> right in here.
So then to show that, we're going to get our
2615.78 -> products, and I can put together in here a
pre, and we'll JSON stringify products and
2631.74 -> do some light formatting so it looks okay.
And let's just give it a shot, see what happens.
2644.46 -> Only absolute URLs are supported. Okay. That's
fine. We can solve that problem. What's the
2650.25 -> easiest way to solve that problem? I'm going
to solve it by saying const URL equals new
2658.75 -> URL of either process.env.URL or we'll do
HTTP local host 8888. Then we'll do URL.path
2674.11 -> name is going to be API products. And in here,
we can do our URL to string. That should solve
2685.57 -> that problem, so let's try it again.
So that didn't work. That means we should
2690.55 -> have a console error. And our console error
is -- oh, it's picking up the wrong URL. Interesting.
2704.78 -> So it's pulling the URL there. That's fine.
So I'm going to just -- we'll hard code is
2710.112 -> for now and remember we need to fix this later.
Try again. Now we've got products.
2726.62 -> Okay. So now we've got our products. I want
to clean this up a little bit, though, because
2729.96 -> we're not going to use all this data. Any
amount of data we load in JSON is going to
2735.39 -> get shipped in the static props. Like whatever
we return from static props is going to end
2740.94 -> up in the -- I think it ends up down here.
Yeah, so this is all page bloat. You have
2746.81 -> to make sure you're only sending data you
need, otherwise you end up shipping a whole
2751.1 -> bunch of stuff that's not relevant.
So I'm going to do some data, like, modifying,
2759.13 -> massaging, whatever we want to call it. And
let's see. Yeah, let's give it a shot.
2768.8 -> So what I want -- let's design our ideal product
here. So what I want is a title. Actually,
2778.52 -> I'm going to need an ID. I'm going to need
a title. What else do we have on the store
2786.09 -> here? Let's go to the store and take a peek.
We've got a title, a description, a price,
2794.58 -> and this add to cart button. That will put
it over here. So let's get the title, the
2808.78 -> description. We've got the inventory. Look
how many of these I have. Please buy a duck.
2814.94 -> Then I've got the price and this one. So I
don't need to care about this price range
2823.84 -> because I don't think I have a price range
on any of these. Let's just peek. Price range
2836.76 -> is the same on all of these. So there's no
need to use that one. So I can skip that.
2843.77 -> With the images, I just need that first image.
I didn't set alt text because I'm a monster.
2849.39 -> Dang it. Okay. So I need the description.
I need the image. I need the price. They're
2861.481 -> all going to be USD. So I can make some assumptions
for my store you would maybe not make for
2865.95 -> another store. Then we would have the -- actually,
I don't need the quantity. I just need to
2871.97 -> know if it is in stock and probably I don't
even want to return it if it's out of stock.
2878.44 -> Instead, we can just filter on quantity is
over zero. Do we have any other quantities
2888.82 -> we want? I need the slug, which is the handle.
And what else? I think that's it, right? I'm
2902.84 -> going to say yes because I don't have T-shirts
or anything I would need. So what I can do
2911.19 -> then is I can loop through this. So products
is going to be -- oh, wait.
2922.43 -> Products is going to actually be here. So
this will be like data. And what I'm going
2929.43 -> to do with my products is do a data.products.edges.
And we're going to map over that. Products.edges.
2944.67 -> Then each of these is going to be a node,
which I'm -- we're just going to keep node.
2953.62 -> And inside here, I can return some pieces.
So the first thing we want to do is say if
2959.84 -> the node.total inventory
is less than or equal to zero, we're just
2977.06 -> going to turn false. Then we'll have to add
filter Boolean, and that'll let us get rid
2988.06 -> of anything that returns false.
Then what I want to do is return our object
2995.74 -> here. And we should be able to do that as
ID would be .ID. The title is going to be
3005.66 -> node.title. Description will be the same.
The image is going to be down here as node.images.edges
3021.26 -> 0.node.source. Ugh. So, we're just going to
node.images.edges.0 -- oh, this is gross -- .node.source.
3034.51 -> Yeah, don't like that. And I'm actually going
to change this to be a source and an image
3049.06 -> alt. And sorry, this is not ideal, but it's
what I'm going to do because I don't have
3055.45 -> time to go write alts on everything.
Then for the prices, what we want is the -- I
3065.29 -> guess we'll go, like, variance edges. Feels
like this is the right price to get in terms
3072.06 -> of just general correctness. Price range would
let me get there faster, but I'm not going
3077.62 -> to do that. So we're going to go with node.variance.edges
zero. That goes into node.priceV2.amount.
3101.14 -> And that's going to be fine. Then slug is
node.handle. Assuming I did all of that right
3108.5 -> and didn't typo anything, what we should get
as a result is we should get back updated
3116.54 -> products that are much cleaner. There we go.
And look how much less data this is, too.
3122.48 -> So this really simplifies the amount of data
that gets sent to the browser, which is going
3126.76 -> to make the page perform a little better.
That'll all be good.
3133.69 -> The YouTube link on my Twitch bio is broken?
Oh, that's not good. What did I do? Hm. Y'all
3145.07 -> don't like my cursive font? I like my cursive
font. This is operator mono. It uses like
3153.24 -> an italic version for certain things. But
you know, everybody is down on whatever you
3160.38 -> want to do. Ah, Dank Mono. Yeah, that's another
one. I feel like everybody was using Operator
3171.3 -> Mono, and it cost money. I don't know how,
but I talked myself into buying a font just
3176.14 -> for my software. I guess that's what it takes
to be a hacker.
3186.8 -> So now I got my products. I want to make them
actually show. And what I'm going to do with
3192.79 -> those products is, I think to start, let's
just put a component right in here. I like
3200.66 -> this idea of making React, like organizing
React code where everything is in one file
3207.27 -> until it gets uncomfortable to do so. So I'm
actually just going to put the product component
3213.32 -> right here. What I want it to do is once we
get one, we're going to return I guess it'll
3220.14 -> be a div. We'll give it a class name of styles
product. Inside of it, we want to show image
3233.78 -> first. And do we want subpages? Yeah, we should
probably try. Are we going to have time? We'll
3239.5 -> see.
So I'm going to start with the image. It will
3244.23 -> be linked. That will be to /productslug. Let's
subpage it. We'll go product. Then inside
3257.38 -> of that, we're going to do an image source,
which will be product.image source. The alt
3264.77 -> will be product.image alt. What are you yelling
about? Intrinsic elements. Oh, yeah, I probably
3278.579 -> should do that.
We'll go with a product.title. Let's set up
3286.83 -> a paragraph that's got product.description.
Let's then set up another one that's going
3294.94 -> to have a class name of styles.price. That
will use product.price. Is that what I called
3307.13 -> it? And for that one, I probably want to do
like a currency formatter, but because I am
3316.76 -> short on time, I'm going to just hard code
a dollar symbol. Just because I don't want
3323.71 -> to get -- that's going to break on me, isn't
it? Damn it. Okay. Just do things the right
3330.31 -> way. That's what you should do.
So we're going to do formatted price. That's
3335.88 -> going to be new in intl currency. Number format.
And options, we want currency is USD. Is that
3362.38 -> right? I'm just going to try this and see
if it does what I want. So then formatted
3368.39 -> price is going to be formatted price.format.
Did that
3382.32 -> do what I want? Let's try it. Oh, wait. I
need to actually use this.
3385.35 -> So in here, we're going to products.map. We'll
get the product. Then go with one of our products.
3398.43 -> How many times can I say product in one line
of code? All of them is the answer. So if
3405.79 -> I did this right -- looks like I didn't. Missing
key prop. It needs a key. Got it. The key
3412.65 -> is going to be the product.id. That's what
we need it for. And now I have, look at that,
3419.4 -> there's our store.
So let's do a little bit of styles. Not very
3424.01 -> many. And what I'm going to do is just set
up a basic grid here. So let's go to our index.
3431.27 -> We have the products. Then we have a product.
So inside of this, we're going to set up products
3439.69 -> as a displayed grid. I want grid template
columns to be repeat three. We'll take a gap
3456.76 -> of like two rem. Then the product, I don't
think, is going to need much. So actually
3466.67 -> what I'm going to do is just get one of these
and let's see what that did. That's okay.
3474.54 -> Then let's also set the product H2 to be font
size 1.25. A little less -- a little easier
3486.67 -> to read, right.
So clearly my formatter didn't work because
3491.43 -> I didn't set it up right. So let's go get
into the docs and see if we can find a currency
3498.59 -> example. We need style currency and then the
currency style. That's what I missed. Let's
3504.98 -> go back into our index. We'll say style currency.
Now if I did that right, there's our currency.
3521.46 -> Okay. So this is pretty cool. This didn't
take much. It gave us what we wanted. We're
3526.88 -> happy. We've got a listing of products. Then
what I want to happen is I want to show these
3531.94 -> products on an individual page. So for that
to happen, we need to build another API route
3541.881 -> that is -- let's see. Data fetching. I don't
need that. I need API route, and I want dynamic
3549.83 -> API routes, which will live at -- I guess
I just need dynamic page routes.
3557.12 -> So I would set up, like, /product/handle or
whatever. So let's go with product. Then it
3566.59 -> would be slug.js. Okay. So in this, I'm going
to actually copy a lot of this out. Because
3578.08 -> I just want to kind of prove the concept.
I'm going to call this one page. Then we've
3592.44 -> got our product itself. And I'm going to -- we're
going to do a map, but this time instead of
3602.17 -> a filter, we can start with a find. So I'm
going to find and we'll get the node. I want
3613.48 -> the node.handle equals, and we need the page
slug, which I need to find. Where is it coming
3627.2 -> from? It's going to be like params or something.
Can I see an example? Hmm. Dynamic routing.
3646.78 -> Show me one of these. And we get ID and comment
out of the router.query. So I need to use
3663.05 -> router out of Next router. And that is going
to live up -- that doesn't sound right. Doesn't
3672.461 -> sound right at all. What if we just do one
of these to figure out what it is.
3677.87 -> I'm going to get args. Then I'm going to console.log
args to see what's in there. And we get -- let's
3692.39 -> bounce to one of these. Unexpected token and
no handle. Oh, that's right. So let's start
3699.84 -> by hard coding one of these. We'll say -- what
is this one called? Rainbow Corgi toy. Okay.
3709.44 -> That should theoretically give us -- these
were missing the styles. Oh, it needs to go
3718.86 -> up a layer. Get static paths is required.
All right. So let's export async function
3735.271 -> get static paths. And that one is going to
use the same data, actually. So I'm going
3745.23 -> to get this and put that up here. Then for
this one, what I want is we're going to return
3753.46 -> -- where's a link to the get static paths?
Return paths.
3764.06 -> So I need to return paths. And the path I
want to return is going to be data -- where's
3777.59 -> my map? Then we're going to get our node.
And in our node, we're going to return node.handle.
3793.5 -> That'll give us an array of paths so that
we've identified all of the pages. URL is
3801.19 -> not identified. Oh, because we didn't grab
that piece out. That's fine. We can go get
3806.53 -> that. So this is where I'd probably want it
to be, like some kind of helper function.
3815.91 -> But that's okay. Callback must be returned.
So we'll go false because I know that one
3823.33 -> exists, and I'm not going to look up the others.
Path does not match the page. Provided path
3832.279 -> -- what does that mean? Oh, because I have
to map these to include the whole thing. So
3852.97 -> product.edges.find.map. So I think then what
I want to do is with this find, we will just
3865.38 -> find. Then I want to just update this piece.
That's a Boolean. So this is inefficient,
3887.12 -> but it's a small list. So I'm not going to
stress about it. I'm just going to put the
3889.68 -> find at the end. Then the filter is not going
to work anymore because it's going to be single.
3896.07 -> Undefined reading handle. That's because we've
changed it to a product. So instead, I'm going
3905.24 -> to get the slug. How about now? Product.map
is not a function. Yes, it is. No, it's not,
3919.22 -> because we're returning product. That is a
product. And this will then be product. Instead
3931.25 -> of an array, we're going to get a single,
which means I'm going to drop this in like
3940.6 -> that. We don't need the key anymore. Ta-da!
So now we've got the ability to do all of
3949.51 -> that, and I can put in something like a href.
Let's go back because it's going to yell at
3956.12 -> me if I'm not using the Next thing again.
Now we have boom. All right. So not perfect
3970.19 -> but also -- oh, because I hard coded. Hold,
please.
3974.54 -> So we have to look and see what the our URL
components are. So we get params and slugs.
3987.44 -> So I want get static paths params. Then here,
I want it to be where we hard coded. It's
4010.68 -> going to be params.slug. Now we have a working
store. We don't have checkout. I'm almost
4025.57 -> assuredly going to run out of time before
we can do the checkout.
4028.97 -> So let's go back to the -- why not link? Honestly,
I didn't --
4036.14 -> I don't remember exactly the syntax. I would
rather get the store than fix that error.
4040.4 -> So I'm going to go to Learn With Jason on
GitHub. I'm going to see if we can do a really,
4048.26 -> really quick and dirty checkout page, just
so we can see that flow working.
4055.01 -> I'm going to go in here, and there should
be one called checkout. How does this work?
4065.08 -> Shopify, add to cart. Shopify, create checkout.
So this is the piece I need, and we get a
4071.11 -> cart ID. Oh, no. It's got so many pieces that
I don't have time to put in. Okay. So maybe
4078.21 -> let's talk through this so that it's not completely
lost. But so the way this works is when you
4084.75 -> first load up a cart or when you load up the
page, we need to create a cart.
4089.92 -> To create a cart, we go to Shopify. We try
to get a cart using the ID. The ID is coming
4100.13 -> out of our -- where does it come in? It comes
out of the event body. So we're posting it.
4108.12 -> And if we don't have one, then we create a
new one. Right. So if we don't have a cart,
4117.44 -> then we return an empty cart. That's right.
If we do have a cart, then we get all of the
4123.16 -> items in the cart and return those as our
cart. And that's what this looks like.
4128.9 -> So you can see here I've got my cart. If I
refresh the page, this is actually loaded
4136.42 -> from Shopify. So if I go in and look at my
application and look at my -- I think it's
4141.06 -> in my local storage, I have cart ID. So this
is my Shopify cart ID. This stays live with
4149 -> them and shows that I've added things to my
cart. So that's what we're doing there. We're
4155.001 -> retrieving that cart. Then when I want to
add something to the cart, I then take the
4166.299 -> product, which we get our cart ID and an item
ID and how many of the things we want. So
4172.27 -> we post those, and that lets me run this add
item to cart, which is -- where does that
4179.569 -> come in? Add item to cart comes out of this
util here, which if I remember correctly,
4185.359 -> is going to be another GraphQL query.
So once we've added it, we then update our
4194.109 -> cart. And we return the updated cart with
the lines in it. If we don't have a cart,
4200.92 -> then we can create a new one, which is another
function, create cart with item. That will
4205.291 -> then give us our new piece.
Basically, this means if you don't have a
4208.77 -> cart, you can add something, and it'll create
the cart on the fly. Otherwise, it creates
4214.87 -> the cart ahead of time, and you have one that's
there, which is what happens when I refresh
4219.36 -> the page here. This is me looking at my cart.
And that's loaded, so if I empty the cart,
4226.61 -> it'll say empty, refresh, gone, and I think
if I reload this, yeah, the cart ID is gone.
4232.53 -> So it clears that cart ID. But if I add another
one, I've got my sticker, and I've got a new
4239.28 -> cart ID.
So this is my new cart ID that will persist.
4243.58 -> Whenever I reload the page, it shows me more
things. So if I add another thing, it puts
4248.19 -> that in. Then as I add more stuff and navigate
around the site, the cart stays persistent.
4253.4 -> That's the functionality there.
Then if I want to go check out, I use my cart
4259.37 -> ID and say, hey, Shopify, give me a checkout
URL. That checkout URL is going to be how
4268.67 -> we go to the Shopify checkout, which if I
go here, that's this URL. So I'm going to
4274.57 -> click it. I'm creating a checkout. Then it's
going to redirect me to that checkout. And
4280.32 -> you end up on the Shopify checkout page.
So this is where you see the Shop Pay, Google
4288.87 -> Pay, Meta Pay, whatever you're using. If I
enter my email, it'll automatically text me
4294.39 -> a confirmation code. So this is how all these
pieces work. If I give you a discount code,
4304.12 -> you can use the discount code.
So a lot going on here. In fact, here's what
4310.561 -> I'm going to do. I'm going to make a discount
code for everybody right now. And let's call
4315.08 -> this one LWJ chat friends. This one is going
to be -- we're just going to do a 20% off
4327.811 -> discount. So LWJ chat friends, and we're going
to do a 20% off discount on any products,
4345.36 -> and we'll say -- yeah, yeah. And this is going
to be good for the next, we'll say, three
4355.42 -> weeks. We'll end it on Friday the 26th.
So if you get this code -- oops. If you use
4362.75 -> this between now and the 26th, you can get
20% off anything in the store. Let me save
4368.42 -> that and drop this one.
4373.63 -> Here you go, friends. If you'd like to get
anything from the store today, it's 20% off.
4389.06 -> All right. Let's do a little bit of looking
at how the rest of that works. So on the client
4395.98 -> side, what we would need to do is on the page
itself, which is here, then we've got -- yeah,
4405.91 -> there we go. I've got my routes, and I've
got the store. I think I did all the coding
4414.67 -> here.
So you get all your products, and we format
4421.13 -> cart. Where's my checkout button? Checkout
button sends to API store create checkout
4429.96 -> with the cart ID. This is what's cool about
this. There's no magic here. You're just posting
4435.81 -> to this API route, and then that API route
that we looked at up here -- Netlify functions,
4444.94 -> create checkout -- it's going to get that
checkout URL. And do you see here how I'm
4452.19 -> doing a redirect? So basically, we create
this and then immediately redirect to the
4457.29 -> new URL. That's how you get that experience
of clicking the button. Then you get to the
4464.32 -> checkout page and everything works.
So what I need to do and what will happen
4469.52 -> in the future is we'll go through and actually
clean this up so that each one has its own
4476.35 -> page. These need to have their own presentation
layer so they can be a little nicer looking
4483.29 -> when they're on a single page. I'd love to
be able to show, you know, like I said, if
4487.21 -> you get one of these rainbow Corgi toys, send
me a picture of it. I've seen a lot of really
4492.29 -> cool ones. People put them next to their actual
Corgis. People had some fun stuff where they
4498.16 -> set them up on their desks. If you have any
of those, send them to me. Maybe this next
4502.03 -> iteration that has product pages will be -- will
include those. I mean, obviously if you give
4507.21 -> me permission to do it.
So lots to do still to make this actually
4511.86 -> functional, but it's fun. I'm happy about
it. I think it was cool that we were able
4515.62 -> to get this far on an e-commerce store in
just, you know, about an hour and 15. And
4524.54 -> that five minutes of me just having to shut
down the whole stream while things echoed.
4531.18 -> So not bad. Not bad at all, everybody. I'm
pretty excited.
4535.97 -> Yeah, Josh is calling out that Kelly did an
episode with me where we set up a checkout.
4544.6 -> So let me find this episode here. Custom cart.
There we go. So this is a whole episode that
4552.54 -> you can watch where we set up the cart. This
is the process of getting the cart set up
4557.94 -> and created, of adding things to it, removing
things from it, and creating the checkout
4562.83 -> URL. So this was part of Jamstack Conf 2021.
So last year. And we used the store front
4570.42 -> API. This was a super fun episode, part of
a much bigger app where we built out a whole
4575.571 -> Shopify store front.
But yeah, lots and lots of good things going
4579.11 -> on in here. Definitely worth checking this
one out. Kelly is very funny and very knowledgeable.
4583.55 -> So make sure you go give that a look.
4587.94 -> Any questions, chat? We got a little bit of
time. Not enough time for me to really build
4592.27 -> anything, but enough time for me to maybe
deploy this. Why don't we do that, actually.
4597.5 -> If y'all have questions, ask them. While you're
doing that, I'm going to deploy this thing.
4603.54 -> So I'm going to do a readme. It's one of these.
There it is. Insert snippet. Then I do this
4618.67 -> LWJ snippet thing. Then I grab the episode
name. Then I got the episode slug. Drop that
4637.53 -> thing in here. Demo name is going to be LWJ
store Next.js Shopify. That's going to be
4648.83 -> the repo name as well. It asked me for a description,
so I copy/paste the one from the description.
4661.25 -> So then I'm going to git add all. I'm going
to git commit and say code after episode.
4671.58 -> And we're going to git hub repo create.
I want to push the existing repo to GitHub.
4678.13 -> That's this one. LWJ store Next.js Shopify.
Good. But I want it to be on the Learn With
4685.79 -> Jason repo. So I'm going to copy this and
drop this in. I'll put it in the org. It's
4692.29 -> going to be public. And I do want to add a
remote. Origin is good. Would I like to push?
4698.84 -> I would like to push.
So then I guess I need to upgrade my GitHub
4705.69 -> CLI. Yeah, then what happens? Then because
I started setting this up sort of oddly, I'm
4713.92 -> going to finish in the browser. The environment
variables were already set up. I don't have
4721 -> to do anything. I am going to go over here
to the link repository. I'm going to use GitHub.
4727.92 -> I don't need the Netlify account. I'm just
using my own. So I'm going to get Learn With
4734.4 -> Jason. We're going to search Shopify. I have
a million repos, so that takes a minute. There's
4743.64 -> my new setup. And it's smart enough to know
-- do I have a yarn? I do have a yarn lock.
4751.79 -> Mmm, I don't want to use yarn.
So I'm going to get rid of the yarn lock.
4758.21 -> I'm going to go back into my package JSON,
make sure it's not using yarn. Okay. And then
4763.24 -> I'm going to do npm run build. And -- oops.
Don't need to hit save. It's a website. We've
4772.02 -> already got those. So I'm going to deploy.
And it's off to the races. It should just
4783.36 -> work. Let's -- I feel like when I get out
of the automatic setup like I just did, sometimes
4790.76 -> I forget a step. So this first one might give
me an error. Then I'll have to fix a little
4794.92 -> piece.
Why not yarn, out of interest? To be completely
4797.9 -> honest, my preference, it really is just I
don't have -- I use npm. So that's my thing.
4814.15 -> Let's see. Use npm. I think this is actually
going to fail because I didn't have the -- I
4826.51 -> think I missed all the pieces because npm
isn't there. Why doesn't it like that? Are
4835.58 -> you going to freaking fail because I'm -- oh,
that is uncool. Like, I get that linter errors
4842.89 -> are there to help you, but that's -- that
is not great.
4850.68 -> So what do I need to do? I need to go and
get these images. Will it import for me? Of
4861.68 -> course not. Let's see. Import image from next
image. Then what is your API? Image source.
4874.23 -> Alt probably. I hope that works. I'm just
going to leave it alone. Then do I need to
4881.64 -> do anything --
does that automatically come in? It does.
4891 -> And what is the API for these? Did they finally
fix this? Make internal props.
4908.73 -> Then we can go back up to our index and do
the same thing. So give me an image. That
4918.4 -> needs to come in from next image. Then we
need a link. That's going to come in from.
4926.5 -> I hope this works. Just start it up again
and see. Must use width and height or layout
4942.03 -> fill. Fine. Like that. This is where a linting
error would be helpful. But it doesn't have
4958.52 -> one. Here's my product. Invalid source prop?
Yo, you're killing me. Don't make me use -- don't
4974.17 -> fail my builds on your silly stuff if you're
not going to just work.
4983.46 -> Now I need to do this. And now you'll work?
I did configure it. Images. Module exports,
5001.65 -> yeah. Do I have to stop and restart? Restart
the server, okay. Cool. Yep, that's what you
5019.671 -> would expect it to do. That makes sense.
Okay. So I guess we'll switch out the image.
5027.84 -> I'm almost out of time. So, cool. Yeah, this
is fine. We're going to do width equals -- how
5034.63 -> big was it supposed to be? Maybe 200. Does
that work? Width and height.
5046.5 -> So hopefully these are all square. No, that
should be right. If I make it 400, does it
5063.61 -> blow things out? So I'm going to have to do
the same thing on the other one. And now it
5079.45 -> all works. I don't see any errors. So let's
try this one more time. Git commit. Push.
5103.9 -> And now it's going to build and actually run
this time. So off we go.
5112.09 -> Don't you fail me on a linting error. All
right. Did y'all come up with any questions?
5126.66 -> No questions I'm seeing. So while we're waiting
for that to build, which should only take
5131.81 -> a minute, let's do another quick round of
shout outs. So I'm going to give a shout out
5138.05 -> to Rachel with White Coat Captioning. Home
page. We've got all the captions coming to
5145.59 -> you live. That's White Coat Captioning on
the scene. That's made possible through the
5149.29 -> support of our sponsors. Netlify, Nx, and
New Relic all kicking in to make this show
5153.19 -> more accessible to more people. And we've
got a lot of good stuff coming up. I just
5158.19 -> sent over some new episodes to get added,
so this list is incomplete.
5162.46 -> But later this week, we are going to be working
with Varun on automated accessibility tests
5167.85 -> with Storybook. I'm pretty excited about this.
Storybook is in a lot of teams' workflows.
5174.96 -> And accessibility is one of those things you
want to do, and it is sometimes confusing
5179.41 -> and really, really easy to miss stuff. So
automating some accessibility tests is going
5182.86 -> to level up your team and get you a lot of
good stuff.
5186.71 -> We've also got fun stuff coming up. I think
next week we're going to have Fred back on
5192.37 -> the show to talk about Astro1.0, which is
dropping also next week on Monday. So that's
5200.52 -> exciting. Get ready for Astro 1.0. We're going
to talk about what that means. All sorts of
5205.3 -> good stuff coming.
Oh, Adam our Guile is going to come on. We're
5208.271 -> going to talk about CSS open props, which
is sort of like -- it's like CSS variables
5215.94 -> that you can import and use sort of like you
would do Tailwind or something, but you don't
5220.87 -> have to install anything. It just works. I'm
very excited about it. I've been following
5226.12 -> Adam's work for a long time. This is going
to be an exciting one.
5228.93 -> Then we got Will coming on. We got David coming
back on. We're going to talk about some state
5234.739 -> machines, I think. Just a lot of good stuff
coming up. Make sure you add on Google Calendar.
5240.11 -> That'll put the episodes on your calendar.
You can follow on Twitch. You can also find
5243.12 -> me on YouTube, since it appears I broke the
YouTube drink, I'll drop a new one. This is
5251.58 -> the correct link. So you can go follow Learn
With Jason.
5255.57 -> And my build freaking failed again. Why? Oh,
gosh darn it! That's annoying. So my API route
5268.29 -> is going to fail because I have to deploy
the API route to call the API route, which
5272.35 -> means that I can't call it. You know, I'm
going to have to fix this off stream. Basically
5276.43 -> what that means is in order to do what I am
doing, I need to deploy the function and then
5283.75 -> do it. So in another project, what I'd probably
do is deploy an API separately so I could
5289.731 -> use the API to build the site.
5292.07 -> I could also build all that API stuff into
Next, but if I want to use it somewhere else,
5297.13 -> I'd like to be able to use it. I guess I could
put -- well, I did put it in an API route,
5301.51 -> right? But -- yeah, I don't want to build
it into the server page because I want to
5307.77 -> be able to get to my product. So I just need
to do a little bit of clever deployment. I'll
5311.85 -> turn off the product loading, deploy the site
so it doesn't call that API route. Once it
5315.4 -> it's deployed, I'll turn it back on. That'll
fix the whole thing.
5319.72 -> But yeah, stay tuned. You can follow along
with the git history. That's go live here
5323.7 -> as soon as I get time to fix it. Otherwise,
thanks, y'all. Appreciate you hanging out.
5328.58 -> As always, it's been a blast. So let's go
find somebody to raid. We're going to go see
5336.85 -> Ben Myers, who's I think about to go live.
Is that right? Yes. So we're going to go raid
5343.06 -> Ben. Everybody go say hello. We'll see you
all next time.
Source: https://www.youtube.com/watch?v=md98Phfnyt4