Beginner Next JS Website Tutorial With Strapi CMS (Hosted)
Beginner Next JS Website Tutorial With Strapi CMS (Hosted)
Source code
Front-end:
https://github.com/Tom0901/Dev.io
Back-end:
https://github.com/Tom0901/NextTutback2
Gist with CMS Data
https://gist.github.com/Tom0901/346ff…
Packages
Strapi-Provider-Upload-Cloudinary
https://www.npmjs.com/package/strapi-…
Deployment
Heroku CLI
https://devcenter.heroku.com/articles…
Strapi docs
https://docs.strapi.io/developer-docs…
00:00 - Intro
02:00 Strapi config
16:00 Next front-end
1:02:16 Deployment
Content
0.08 -> hey there so today we're going to be
1.28 -> building this fully responsive next js
3.84 -> website and we're actually going to be
5.2 -> hosting it as well
6.64 -> now this website is also driven by a
8.639 -> headless cms so all of the content you
10.639 -> see here is going to be driven by a back
13.28 -> end that we're going to configure and
14.799 -> host on heroku you can see that back end
17.039 -> just here so although it's a simple
19.039 -> website it has a really cool feature
20.64 -> that i just really quickly wanted to
21.92 -> demo
22.8 -> if we want to add content to the live
24.8 -> site all we have to do is simply come
27.519 -> over here add some dummy content in our
29.599 -> back end hit publish and immediately on
32.399 -> a refresh you're going to see your
33.52 -> content appear you don't have to rebuild
35.28 -> or rehost the website or any of that
36.96 -> inconvenient stuff but anyway if at some
39.04 -> point you find value in this video or
40.719 -> you like the content at all please do
42.399 -> leave me a like it helps out
43.52 -> tremendously and if you have any
44.879 -> questions leave them in the comment
46.079 -> section down below okay so now we're
47.68 -> ready to start like all good projects we
49.84 -> just start by making a new directory you
52.239 -> can call this anything you like i just
53.76 -> call my next tart demo and then just
55.76 -> drag and drop it into an instance of
57.92 -> visual studio code or whatever your
59.68 -> favorite code editor is
62.16 -> then we're going to actually start
63.359 -> coding so first thing we're going to do
64.96 -> is run mpx create next app and i'm just
68.159 -> going to call mine front
70.24 -> because it's the front end and all this
72.32 -> is going to do is just create as a
74 -> starter project using next that we're
75.439 -> going to be able to build on top of as
77.2 -> you may have guessed it's quite like
78.479 -> create react app okay that will probably
80.479 -> take a while but once it's finished
81.84 -> we're going to go ahead and get started
83.68 -> with the strappy project
85.28 -> we're going to go to the quick start
86.64 -> guide just here
88.24 -> and just grab this line of code here
91.6 -> uh then what you're going to want to do
93.439 -> is just edit it so the my project
95.84 -> section
98 -> reads whatever you want to call your
99.2 -> project i'm just going to call this one
100.56 -> back
101.92 -> and then we just paste that into the
103.52 -> terminal
105.04 -> and it's going to create us a strappy
106.799 -> starter project
108.799 -> once again this one will probably take a
110.159 -> while okay so once that's all installed
112.159 -> you'll be greeted by something that
113.52 -> looks like this and it will actually run
115.36 -> the server for you straight off the bat
116.88 -> as well so all you have to do is press
118.32 -> control and click localhost one three
120.719 -> three sevens forward slash admin and
122.479 -> you're gonna be greeted by something
124.479 -> that looks like this just here
128.08 -> so you can see we're already running our
129.599 -> strappy cms and it's going to prompt us
131.12 -> to create an admin
132.8 -> now before we go any further though
134.48 -> because we're going to be running two
135.92 -> servers at the same time we're going to
137.2 -> be running the development server for
138.48 -> the front end and the back end what i
140.319 -> want to do is just open two instances of
142.08 -> visual studio code so it's really clear
144.16 -> when i'm putting in commands for the
145.68 -> front end and when i'm putting in
146.72 -> commands for the back end so we're going
148.4 -> to go back to vs code and we're just
149.92 -> going to close this instance of vs code
151.599 -> down
152.48 -> then we're going to get two completely
154.16 -> fresh windows of vs code so i've got two
156 -> windows of vs code just here
157.84 -> and then once again you can just go to
159.599 -> wherever you've saved your directory and
161.599 -> then what you're going to do
163.519 -> is just drag and bought drop back into
166.239 -> one of these windows
168.08 -> so we're opening up back in one of the
169.36 -> windows and then we're going to drag and
170.4 -> drop front into the other one
173.04 -> all right so if we press control comma
176 -> on windows we can bring up another
177.519 -> terminal or we can just put
179.519 -> go up here and press new terminal like
181.2 -> this
182.4 -> and we're in the front end now okay
185.12 -> so
185.84 -> in order to run the front end
186.959 -> development server the command is npm
189.28 -> run dev
190.8 -> that's the command for next js to start
193.76 -> its development server and you can see
195.28 -> that's now running on localhost 3000. so
198 -> if we go ahead and control click that
200.56 -> it'll open up a new window in our
202.64 -> browser at localhost 3000 and you should
204.72 -> get this next starter website and then
207.519 -> if we go back to that other instance of
209.44 -> vs code that has our back end and you
211.12 -> can see over here it says back
212.64 -> again we can just press control speech
214.239 -> mark and we get the terminal up or you
215.68 -> can open it using the ui
217.36 -> and then the command for strappy is
219.12 -> actually npm run develop
222.64 -> so just try and remember that if you're
224.4 -> in the front end you run npm round dev
226.239 -> to run the development server and if
227.599 -> it's the back end of strappy it's npm
229.599 -> run develop and we've just run another
231.92 -> instance of
233.599 -> our strappy back end on localhost 1337
236.879 -> forward slash admin
239.04 -> so what we've got now in our browser
241.84 -> is our front end running on a
243.28 -> development server and our backend
244.879 -> running on a development server and
246.48 -> we're now in a place where we can start
248.48 -> configuring our backend okay so we're
250 -> going to start by creating an admin user
252.159 -> on our strappy cms and you're going to
254.799 -> notice it's going to redirect us to
257.04 -> forward slash admin which is like pretty
259.04 -> much where we're going to want to go if
260.639 -> we want to do any editing
262.479 -> so
263.28 -> localhost 1337 forward slash
267.84 -> not admon admin
270 -> is where like all the business is going
271.6 -> to be done in the future okay so if you
273.28 -> get lost that's what you need to be so
274.88 -> all you need to do is fill out this form
276.72 -> with your details and yeah click the
279.28 -> let's start and then it's going to bring
281.04 -> you to this view here which is um your
285.04 -> strappy cms
286.56 -> but anyway before we begin with any of
288.56 -> that we have to go to the plugins
291.52 -> section because we need a bunch of
293.199 -> different plugins in order to make this
295.04 -> a more fully featured cms and don't
297.36 -> worry i'm going to explain what all of
298.72 -> them do individually but just for now
300.32 -> we're just going to go ahead and install
301.68 -> all of them really quick get it out of
303.36 -> the way get our cms up and running okay
305.36 -> so first thing we're going to do is
307.199 -> actually install a graphql api plugin
310.72 -> from strappy
312.4 -> and so we're just going to come over
313.44 -> here to the marketplace and for this one
315.12 -> it's really easy we just click download
316.56 -> just here
318.4 -> and then if you come over to your
320 -> terminal for your back end you're
321.6 -> actually seeing that the terminal is
322.8 -> going to be installing graphql after
324.639 -> you've clicked that button
326.32 -> and this is going to take a while but
327.919 -> once it's finished you're going to have
329.28 -> the graphql endpoint in your backup okay
331.6 -> so once that's done installing you can
332.88 -> check it's installed by coming down here
334.4 -> into plugins and you should see this
335.84 -> little graphql icon here now the next
338.8 -> thing to do after this is to install
341.28 -> cloudanary and for this we're going to
343.36 -> need to go to this url which i'll leave
345.6 -> in the description and we're going to
347.44 -> install this npm package we just need to
349.6 -> click just here and it's copied to our
351.44 -> clipboard and then it's important you go
353.52 -> to the back end now and you're going to
355.28 -> press control c hit yes to terminate
357.919 -> here paste that in and we're just going
360.08 -> to install it at the root level of the
361.52 -> back directory while that's happening
363.6 -> what you're going to want to do is go
364.8 -> over to cloud and airy as well
367.919 -> which is just like a image sharing
369.919 -> website and it's got a nice free tears
371.68 -> that's why we're using it and go ahead
373.52 -> and sign up and create an account
375.199 -> because we're going to need some api
376.56 -> keys and stuff in order to make all this
379.12 -> stuff work with our cms
381.44 -> okay so once that's installed you're
382.72 -> going to want to go back to the npm
384.88 -> website just here and follow the
386.4 -> instructions on here so what we need to
388.24 -> do is make this plugin.js file
391.36 -> at this level of the directory so we're
393.68 -> just going to take this here
396.4 -> and we're going to the config folder and
398.96 -> we're going to create a new file and
401.52 -> name it plugins.js
405.36 -> paste in that exact information
409.28 -> we got from over here and once again
410.96 -> i'll link this down in the description
412.479 -> if you can't find it all right and you
414 -> can see it's referencing like these
415.84 -> cloudinary emv variables so what we need
418.639 -> to do is actually make those emv
420.4 -> variables
421.919 -> so when you logged into cloudnary
426.319 -> you should have seen that there's like a
427.919 -> dashboard to the top left of the ui if
430.96 -> you click that it gives you all your
433.039 -> cloudinary details here
434.8 -> so all we need to do is create an emv
436.639 -> file that contains these three variables
439.36 -> just here
441.039 -> so let's go back to vs code we need a
443.039 -> cloudinary name
445.36 -> a cloudy key and a cloudinery secret and
448.24 -> they have to be exactly this so we're
450.479 -> going to go to our emv.example
453.039 -> we're going to rename that
455.199 -> just.emv
458.88 -> uh open that up and then we're going to
460.88 -> paste in
464.16 -> all of those emv variables we see in
466.319 -> these quotation marks here then we just
468.479 -> need to get the values from our account
472.319 -> so i've just pasted mine in yours going
474.24 -> to be unique to you so you need to go
475.84 -> ahead and do that and then if you press
477.68 -> ctrl speech mark again we're going to
479.759 -> want to run the server with npm run
481.919 -> develop
483.12 -> and now when we go back to localhost
484.72 -> 1137
486.4 -> and we click on media library we should
488.08 -> be able to upload some assets so if i
490.8 -> just grab any old image
493.759 -> let's go with the thumbnail of my last
495.28 -> video if we click upload on that what we
497.759 -> should see is that it not only gets
499.28 -> uploaded to the cms but it's also going
501.44 -> to get pushed to our cloudnary account
505.28 -> and this is important because
507.44 -> strappy doesn't have any way of storing
509.12 -> images as such so it needs like a third
510.96 -> party in order to have these images
513.12 -> stored here and then it's going to be
515.12 -> able to serve them to the front end that
516.479 -> way so if we go back over to cloud and
518.64 -> re and this time we click on media
520.08 -> library you should see that there we go
522.479 -> we just uploaded a bunch of different
524.8 -> sizes of this same image here so um
528.16 -> cloud re actually like splits up into
529.839 -> small medium large et cetera so it can
531.76 -> serve with the most optimized image and
534.399 -> that's pretty much it we've linked our
535.839 -> cms to our cloud marine okay so now
538.64 -> we've configured most of our strategy
540.48 -> backend all that's left to do is to
542.32 -> start adding actual content to it so to
544.48 -> avoid this being really boring and you
546.48 -> just watching me copy and paste a lot of
547.76 -> stuff into it what i've done is i've
549.519 -> created a github gist that you can find
551.36 -> at this url just here and i will link
553.519 -> that in the description and this
554.88 -> contains all of the copy for the website
557.839 -> and all of the images for the website as
559.6 -> well and that's where we're going to
560.8 -> start we're going to start by scrolling
562.8 -> down and what i want you to do is just
564.16 -> download all of these images so just
566.16 -> right click save image as
568.399 -> on all of these different images that
570.08 -> i'm using
571.279 -> or you could source your own it doesn't
572.88 -> really matter as long as they're the
574 -> right resolution once you've gone ahead
575.68 -> and downloaded all of those i want you
577.279 -> to come over to the media library here
579.2 -> that we set up with cloud mary and as
580.959 -> you can see i've already uploaded a
582.56 -> bunch of these images and i'm just going
584.16 -> to show you how to do one
585.839 -> so we go ahead and click upload assets
588 -> we click browse files you'll probably be
590.24 -> in downloads
592 -> but mine are in just like a folder on my
593.76 -> desktop and then you're going to select
595.519 -> whichever image you want hit open and
597.92 -> then click upload to the asset library
600.16 -> once that's finished you should have a
601.76 -> selection of images that look roughly
604.079 -> like this and then we can start actually
606.24 -> creating content types next
608.56 -> so for that we go to the content types
610.399 -> builder and essentially what content
612.399 -> types are are there like a structure
615.36 -> that your content goes into they're like
617.2 -> the shape of your content
619.2 -> so what we do here is we click create
621.44 -> new collection type and we're going to
623.12 -> keep the names really simple the first
624.56 -> one's just going to be called blog post
626.32 -> with no spaces no capitals like that and
628.88 -> then the first field on it is just going
631.12 -> to be a title
633.6 -> and that's going to be a short text
635.04 -> field you can then go into advanced
637.279 -> settings and hit required field if you
639.12 -> want that'll save you some errors later
640.56 -> down the line
641.839 -> and then go ahead and hit add another
643.519 -> field
644.48 -> next field is going to be a rich text so
646.48 -> you click rich text i think i called it
648.16 -> blog body
649.519 -> and once again you can go and hit that
652.24 -> it's going to be a required field hit
653.839 -> add another field this one again is
655.68 -> going to be a text field called
657.279 -> description
658.56 -> you can make that required if you want
659.92 -> to hit add another field next one again
662.88 -> is going to be a text field this time
664.399 -> it's going to be a slug and then our
666.64 -> last field is going to be a media field
669.6 -> and we're going to just call this one
670.8 -> splash
672.079 -> and again i've gone ahead and made all
673.92 -> of those fields required by clicking
676.079 -> advanced and going to require just there
678.48 -> then we hit finished and that's our blog
680.56 -> post done if we hit save on that
683.44 -> our server is going to restart and we'll
684.959 -> have that content type available to
686.88 -> create instances of that content with
689.44 -> cool so once this restarted you can test
691.519 -> that it worked by looking at your
693.04 -> collection types just here and you can
694.64 -> see that there'll be a blog post you can
696 -> enter stuff into there's one more
697.76 -> content type we need though and it's
699.519 -> really simple so we just hit create
700.72 -> collection type this one's going to be
702.48 -> about content
704.56 -> once again just no spaces really simple
708.32 -> and this one is literally just going to
709.44 -> have a rich text field that we're going
710.8 -> to call body uh we're going to go ahead
712.639 -> and make that required again
714.48 -> hit finish hit save the server will
716.399 -> restart and you should have both of
717.76 -> those content types available cool so
719.36 -> now we can actually start adding that
720.639 -> content and i'm just going to show you
722.24 -> how to do one of each because it's
723.76 -> pretty much just copy and pasting from
725.519 -> the gist so we go to blog post we hear
728.32 -> add a new blog post and then like i said
730.56 -> all the information is in the gist but
732.48 -> what you have to pay attention to is
733.92 -> there are some embedded images within
736.24 -> the bodies of these
737.839 -> so we go to blog post one
740.56 -> and we're going to grab the title
742.8 -> and then you you know you copy and paste
744.48 -> it across but i'm just going to show you
745.92 -> the blog body because that's like a
747.04 -> little bit different so we're going to
748 -> take the blog body from blog body one
750 -> we're going to copy that across
752 -> and you're going to notice that there's
753.76 -> these links to images now these are
757.12 -> specific to my cloudnery
759.44 -> so you can't really use these i don't
761.36 -> think they'll work so what you're going
763.04 -> to need to do is just make a note of the
764.56 -> name this one's mark uh jonah units
769.279 -> and then just get rid of that link and
772 -> then go ahead and hit
774.639 -> upload image and you should have an
776.48 -> image in your image library that matches
778.959 -> it the marquez one
781.04 -> and then you're going to hit finish and
782.72 -> it's going to give you an embedded link
784.32 -> that's specific to your cloudary if
786.32 -> you've uploaded them all into your media
787.92 -> library
788.959 -> so that's really the only bit that can
790.88 -> trip you up
792.16 -> with this um blog post thing is that
794.48 -> there's some embedded images within the
796.399 -> body cool so i've gone ahead and filled
798.24 -> out the other fields just by copying and
799.92 -> pasting from the gist and the last one
801.44 -> is just the splash so you literally just
803.279 -> have to click this one because it's a
804.32 -> media field then it gives you access to
806.24 -> your media library and the image i used
808.079 -> for this one is unsurprisingly the how
810.16 -> to become a web developer one you hit
812.24 -> finish on that and then you should have
814.48 -> all your fields filled in and you just
816.639 -> hit save and then i also want you to hit
819.36 -> publish as well that is important make
821.04 -> sure you hit publish cool so that's how
822.8 -> you add the blog posts um the about
824.8 -> content is
826.16 -> really similarly simple just hit about
828.32 -> content on the left hand sidebar hit add
830.959 -> new about content
832.72 -> go over to the gist
834.56 -> uh should be the first thing this time
836.72 -> just copy and paste everything because
838.72 -> this is all markdown
840.399 -> uh go ahead and paste it in and then
842.079 -> you're gonna be looking for
843.839 -> the links in it there's just one in this
845.519 -> one and once again just make a note of
847.76 -> the name
849.279 -> and then go ahead and embed an image
852.639 -> from your library in there
854.48 -> honestly it doesn't really matter which
856.639 -> ones you use because these are all
858.399 -> pretty similar dimensions they're
859.76 -> massive
860.959 -> um so you they're pretty interchangeable
863.199 -> you can use any image you want in any of
864.56 -> these places i think i used this one on
867.68 -> it though so we're going to go ahead and
868.8 -> select that one once again hit save and
871.44 -> hit publish and that's how you create
873.279 -> your about content and your blog posts
875.68 -> there's one more blog post for you to
877.36 -> add on your own that you can find in the
878.639 -> gist but once you've done that there's
880.8 -> just one extra step to do so if we go
883.76 -> over to localhost 13337 and we go to
886.56 -> slash blog posts
888.72 -> that is actually where our blog posts
891.04 -> should be found and we should be seeing
892.88 -> some jason show up here but what we're
894.56 -> actually getting is that it's forbidden
896.32 -> because we're just on like a public user
899.6 -> um that's not authenticated or anything
901.04 -> like that and we don't have access to
902.639 -> request this information so we have to
904.8 -> tell strappy that we want people to be
906.48 -> able to access our blog posts and our
908.32 -> about content content types via that url
911.6 -> so what we do for that is we just go
913.12 -> down to settings here
915.36 -> we go down to roles
916.959 -> and there's two roles there's an
918.079 -> authenticated and a public we need to do
919.76 -> this for both of them so on
921.76 -> authenticated we need to find our about
924.839 -> content collection type and we want to
927.839 -> click find and find one
930.399 -> as available and then the blog post as
932.8 -> well we want to click find and find one
934.72 -> and hit save
937.36 -> and then we just need to do the exact
938.8 -> same thing
941.92 -> for the public
944 -> type as well so we go find and find one
946.079 -> on about content
947.68 -> find and find one on blog post
949.759 -> hit save
951.04 -> and now if we go to that same url we get
954.32 -> a bunch of json we've got our blog posts
956.56 -> and we can also do this for about
958.88 -> content and again we get a bunch of json
961.519 -> and that's pretty much it for our
962.48 -> backend we're going to go on to
963.6 -> configuring our front end now okay so
965.519 -> now we're going to go to the front
967.12 -> directory and the first thing we're
968.32 -> gonna do before we start writing any
969.6 -> codes is make sure you have the same
970.959 -> snippets as me so i have next js react
973.199 -> snippets by ijs you can come over here
975.519 -> into extensions and then just search for
977.839 -> this and you should be able to find it
980.16 -> and i also have something called react
981.92 -> snippets by running coder highly
984.16 -> recommend you get both of those before
985.6 -> we start
986.8 -> um okay and then when we do start first
989.12 -> thing to do is come into your explorer
991.68 -> go to the root level and create a new
994.48 -> dot emv file
997.839 -> and we're just going to have one
999.199 -> variable in here called strappy base url
1004 -> all capitals and then just an equal sign
1006.399 -> and then what i want you to do is just
1008.8 -> go to your cms and then just grab the
1012.639 -> first part of the url there and paste it
1014.72 -> and that's what you want so you want it
1016.24 -> to be something like http localhost1337
1019.68 -> and we'll just get rid of that trading
1020.88 -> slash okay so now what we have to do is
1022.72 -> actually request things using graphql
1025.039 -> from our strappy backend and we're going
1027.439 -> to start by doing that in index.js and
1030 -> this is what you should have just from
1032.48 -> your create next app you should see
1034.319 -> something like this so first thing we
1036.319 -> need to do is
1038.4 -> introduce you to get static props so all
1040.24 -> i want you to do is come to the top here
1041.6 -> type gsp and press enter and if you've
1044.079 -> got the same extension as me it should
1046 -> write something out like this and it's
1047.36 -> basically just an asynchronous function
1049.52 -> that's going to return something that
1051.44 -> will be accessible in your props in this
1053.44 -> component so with graphql we just use
1055.919 -> fetch and we're always going to make
1058.08 -> post requests but it's a little bit
1060.24 -> different because we're going to post
1062.24 -> like a json object and we need to know
1064.96 -> what that json object is before we
1067.12 -> actually are able to make that request
1069.36 -> so to do that there's some handy tooling
1071.44 -> that strappy provides so what i want you
1073.36 -> to do is go over to localhost 1337
1075.919 -> forward slash graphql
1077.919 -> and you get this graphql playground and
1080.64 -> if i just get rid of like my query here
1082.96 -> what we can do is
1085.2 -> write query pretty much everything
1086.72 -> starts with query and then you open it
1088.88 -> up like an object
1090.32 -> and now because this is linked to your
1093.039 -> cms you have access to everything that
1095.36 -> you've written in your cms so you can
1096.96 -> press control space and it will give you
1099.52 -> all of the different content types and
1102.08 -> stuff you defined so we're going to go
1103.76 -> to blog posts
1105.039 -> and then obviously there's something
1106 -> inside of blog posts so we want to open
1107.679 -> up these brackets control space again
1110.64 -> and we want the title
1113.44 -> we want the blog body
1115.2 -> we want the description
1118.16 -> and we want the slug as well
1121.039 -> and then lastly we want the splash and
1124.88 -> with the last one that splash there's
1126.96 -> actually stuff inside of the splash so
1128.96 -> what you need to do is open it up with
1130.88 -> control space again and you can see you
1132.64 -> can get like width id all of this good
1134.24 -> stuff we probably just want url to start
1136.4 -> with
1137.2 -> and then that is our query if you go
1139.919 -> ahead and press play i've already done
1141.76 -> it but you're going to get something
1143.039 -> like this that contains all of your blog
1144.48 -> posts with all of those things that
1146.64 -> you've got on it so what we want to do
1148.24 -> is just copy everything from blog posts
1151.2 -> down to here we don't need the query
1153.28 -> wrapper and that's going to be
1155.76 -> the thing that we post to our api and
1157.52 -> that's going to be what tells it what to
1158.96 -> bring back for us so let's go ahead and
1160.48 -> code that in the front end so first
1162.24 -> thing we need is a constant called fetch
1164.96 -> params
1167.039 -> and this is just going to be equal to an
1168.64 -> object and this is going to be where we
1171.2 -> tell strappy that we want to make a post
1173.919 -> request we want the headers to be
1177.039 -> content type application
1179.84 -> slash json like it always is with this
1182.08 -> kind of thing and then
1183.919 -> lastly we want the body the important
1186.08 -> part
1187.6 -> to
1188.799 -> be
1190.84 -> json.stringify we need to send this as a
1192.799 -> json object
1195.039 -> and then inside of this object here
1197.84 -> we need a parameter
1199.44 -> that's query and then that needs to be a
1202.64 -> template string so you're going to put a
1204.24 -> back tick and then just go ahead and
1206.08 -> paste your query in there and that fetch
1208.88 -> params variable should be everything you
1210.96 -> need to send in a fetch request to tell
1213.12 -> strappy to get our blog posts so that's
1215.2 -> kind of the next thing we need to do we
1216.24 -> need to do that actual fetch request so
1218 -> we have a console called res and we're
1219.919 -> going to await a fetch and obviously the
1222.64 -> first parameter effect is always a url
1224.799 -> and we have our url in our emv so
1228.72 -> now we're just going to bring that in
1230.4 -> and the way we do that in next.js is i
1232.48 -> usually just go to the top of the file
1234.48 -> and we have a constant i'm going to just
1236 -> call this url
1238.799 -> and then the way we access the emv file
1241.2 -> is we go to process dot emv dot variable
1244.799 -> name so this one was strappy base url
1248.159 -> right and that should bring us back
1250.96 -> this string that we have just here so
1253.28 -> that first parameter of fetch we want to
1255.36 -> have another template string so
1256.96 -> backticks
1258.08 -> and then dollar sign curly brace to put
1260.32 -> our variable of url in there and then
1262.559 -> all these requests just get made to
1264.48 -> slash graphql and then the second
1266.88 -> parameter is our fetch prams and that's
1269.84 -> gonna bring us back some json we need to
1271.76 -> unpack so
1273.36 -> uh we're gonna have a const just called
1275.28 -> data
1276.799 -> that's equal to res dot json
1281.2 -> uh and we need that one to be await as
1283.76 -> well cool and that's our fetch to
1285.84 -> graphql that should be bringing us back
1287.919 -> some data but we still actually need to
1290.32 -> get that data into our component here
1293.52 -> and we do this with the return statement
1295.36 -> just here so instead of just returning
1297.44 -> like an empty object what we want to do
1299.12 -> is return data right and we do that by
1301.919 -> just returning data like that now we
1304.96 -> should be able to put a variable like
1307.2 -> props for example or we could just call
1308.96 -> it data for simplicity and we should be
1311.52 -> able to console
1312.799 -> log out something interesting
1315.36 -> okay so that returned an error for me um
1317.679 -> and what it ended up being was i just
1319.76 -> missed the opening pair of brackets in
1321.6 -> the query here so if you get a similar
1324.08 -> error to this all you need to do is just
1325.76 -> add a pair of brackets
1327.76 -> just here so now if we go ahead and
1330.84 -> refresh our localhost 3000 in the
1333.12 -> browser again and check our console we
1335.679 -> can see that we have a blog post object
1338.32 -> cool
1339.28 -> so we're actually getting something back
1341.36 -> from our api now but we need to extract
1343.679 -> some stuff from this to do anything
1344.88 -> interesting with it right so we can see
1346.96 -> that it's on
1348.799 -> data
1350.08 -> blog posts okay so data has an object
1353.44 -> inside of it called data
1355.52 -> and there's an easy way to solve that
1357.039 -> what we can do is just go to props and
1359.12 -> say okay we want data off of data
1362.159 -> so that saves us having that extra layer
1364.24 -> of uh data on our object
1367.36 -> so now if we refresh our server there we
1369.36 -> go we get something that's a bit more
1370.48 -> interesting we get blog posts and we've
1372.96 -> got a bunch of different stuff on it
1374.24 -> we've got an array
1375.6 -> okay
1376.64 -> so just so we can just display something
1378.799 -> in the ui all i want to do is just come
1380.64 -> to here
1381.78 -> [Music]
1383.52 -> uh i'm just going to stick an h1 in for
1385.2 -> now
1386.4 -> and inside of that h1 all we need to do
1388.88 -> is just go on to data
1391.44 -> dot blog posts
1394.159 -> uh we're going to go to index
1396.64 -> 0 on that and we're going to go dot
1398.96 -> title and this is a variable so it needs
1401.76 -> to be inside of jsx
1403.52 -> so it needs to be inside of brackets
1404.72 -> like that
1406 -> cool and then if we go back to our
1407.84 -> browser
1408.96 -> there we go right at the top how to
1410.4 -> become a web developer the ultimate
1412 -> guide
1413.2 -> okay so now we fetch that data we
1414.72 -> actually have to start making the
1415.679 -> website look a bit more like finished
1417.6 -> project so if we just go back to it
1420.4 -> you'll notice that it looks pretty
1422 -> similar to the starter app and that's
1423.6 -> because i've just reused the css from
1425.6 -> the starter app and i've just like
1428.159 -> scoped it to different components
1430.48 -> and made it a bit more uh usable in like
1433.2 -> a full featured website so what we're
1435.36 -> going to do is we're going to work
1436.32 -> through this page and basically turn
1438 -> each of these elements into a component
1439.919 -> that we can then reuse on the about
1441.919 -> pages and the individual blog pages
1444.24 -> which will come to build in a second so
1446.64 -> we're going to start off by building
1447.76 -> that header so if you go back to your
1449.76 -> front directory you'll notice you have a
1451.44 -> styles
1452.799 -> directory in there with home.module.css
1456.64 -> file and pretty much all the css we're
1458.88 -> going to be using is contained within
1460.559 -> this file so it's literally just a case
1462.4 -> of like copying and pasting this out
1463.919 -> into a different file and scoping it to
1465.679 -> the components we're going to build and
1466.96 -> we're going to start with this container
1468.4 -> class just here we're going to need to
1469.919 -> use that in multiple places so instead
1471.919 -> of repeating ourselves with lots of css
1473.44 -> files we're just going to build one
1474.48 -> component with one css file and reuse
1476.799 -> that component in lots of places so what
1478.96 -> we're going to want to do is go to the
1480.24 -> top level and create a new directory
1482.159 -> called components and then inside of
1484.48 -> components we want a new file called
1486.48 -> content
1487.6 -> wrapper
1488.96 -> dot js and this is literally just going
1491.52 -> to be a react functional component so we
1493.279 -> type rfc and press enter and we get a
1495.76 -> function component we can keep it as
1497.52 -> content wrapper that's cool and then in
1500.72 -> brackets all we want to do is get
1502.96 -> children as our props and then we want
1505.2 -> to give
1506.64 -> the just renders those children
1510.08 -> and that's literally it and all we're
1511.84 -> going to do is just put some styles on
1513.279 -> this div and then that's going to be our
1514.72 -> contact wrapper really simple so let's
1516.64 -> create that css file we're going to want
1518.08 -> to call it content wrapper again
1520.08 -> and it's going to be module dot css
1523.52 -> because we're using css modules
1525.84 -> and all this does for like versus a
1527.36 -> regular css file is when
1530 -> um you inspect the class like in the
1531.84 -> browser it's going to have some crazy
1533.52 -> like unique identifier and it's just so
1536.08 -> you don't have like two class names and
1538.4 -> different css files clashing uh and then
1540.72 -> we're just gonna paste that class in
1542.4 -> that container class which once again i
1544.4 -> just got from like line one to nine of
1546.64 -> home.module.css
1548.32 -> uh and then all we have to do is just
1550.159 -> apply this class to that div in our
1552.64 -> content wrapper component so to do that
1555.44 -> we just import uh usually people call it
1558.159 -> styles we can actually call this
1559.279 -> anything
1560.32 -> and we're importing it from dot dot
1561.84 -> slash styles forward slash content
1564.88 -> wrapper dot module dot css cool and then
1567.919 -> we just need to give this div a class
1570.24 -> name
1571.6 -> that's equal to styles
1574.08 -> dot whatever our class name was and in
1576 -> this case it's container
1578.4 -> and that's basically how css modules
1580.32 -> work you import like a variable from the
1582.4 -> file
1583.44 -> from the right like path
1585.6 -> and then you go on to the different
1588.08 -> objects in it which are the different
1589.36 -> classes so if we had one that's like
1591.52 -> called dot example for example
1594.48 -> you could go and go to styles.example
1596.88 -> and you'd get those styles instead cool
1598.64 -> so that's our content wrapper component
1601.6 -> and that's obviously going to wrap all
1602.72 -> our content inside of index so what
1604.4 -> we're going to do next is apply that in
1606.24 -> index and you can see that the div at
1608.559 -> the top has styles.container already on
1610.96 -> it that we're importing from
1612.32 -> home.module.css
1614.32 -> so all we need to do
1616.08 -> is
1616.96 -> just replace that div basically with our
1618.72 -> component
1620.159 -> so we're going to import
1622.48 -> content wrapper from dot slash
1624.88 -> components content wrap up cool and then
1627.039 -> we're just gonna use that instead of
1629.279 -> this like top level div
1631.12 -> easy peasy and we don't need this class
1633.44 -> name here because obviously we're
1634.799 -> already applying the styles and then the
1636.64 -> last div i've got a cool extension
1638.96 -> called auto rename tag um which you
1642.24 -> might want to get it's kind of cool
1643.84 -> and that's what just happened there just
1644.88 -> renamed that bottom one for me but you
1646.48 -> might have to do that yourself so just
1647.919 -> make sure the top and bottom div are now
1649.919 -> your content wrapper and i'm also just
1651.6 -> going to get rid of this h1 that's like
1653.36 -> rendering some of our blog posts because
1654.96 -> we're gonna do something better with
1655.84 -> that in a second
1657.12 -> and then if we save that and go back to
1658.799 -> our browser you're gonna see that
1660.24 -> nothing has changed but now
1662.48 -> we have a component that can be reused
1663.919 -> on those other pages so after that the
1665.76 -> next thing to do is to build this like
1668 -> header navigation bar okay so the first
1670.159 -> thing we need to do is go into the
1671.679 -> components directory create a new file
1674.24 -> uh call it header.js and then we're
1676.559 -> gonna press rfc and press enter again to
1679.6 -> get a react functional component and
1681.52 -> we're going to import two things into
1682.88 -> this we're going to import link um so if
1685.919 -> you type i m lnk
1688.48 -> it will come up with the intellisense
1690.159 -> for import next jslink and then you just
1692.159 -> press enter and you've got the import
1693.919 -> statement for the link
1695.2 -> and then we're also going to want some
1696.399 -> styles again so let's go ahead and go to
1699.84 -> our styles directory and create a header
1703.279 -> dot module
1704.48 -> dot css file don't need anything in it
1706.559 -> just yet and then go back to our header
1709.039 -> component and we're just going to import
1710.96 -> just like before styles uh from dot dot
1714.64 -> slash styles forward slash header dot
1717.679 -> module dot css and then because this is
1720.64 -> a header we're gonna use the html header
1722.799 -> tag so the way links work index.js is
1725.12 -> you just use the link component
1728.159 -> that we've imported
1730.08 -> and then inside of the link component
1732.32 -> you give it an a tag and the a tag is
1734.96 -> where you apply the styles but the link
1737.039 -> component is where you actually put the
1738.32 -> href so you'd go href and this one we're
1740.96 -> going to call this one like home so
1742.08 -> we'll just have it as a slash and then
1743.919 -> we'd apply some styles in this a tag
1745.919 -> which we'll do in a second and then if
1748.08 -> we just
1749.12 -> copy that
1750.32 -> and then we want the second one to go to
1752.559 -> about and we're gonna have a slash about
1754.48 -> root that we'll create in a bit and then
1756.32 -> what we should have is uh
1759.36 -> kind of the right hand side of what's in
1761.2 -> my browser this home and about and we'll
1763.279 -> style it up to look like that in a
1764.32 -> second so we just need to make that
1765.76 -> button as well uh so that one's gonna be
1767.679 -> a little bit different we're gonna have
1768.799 -> a but a div um that's actually gonna
1771.679 -> wrap our link tag and again the href
1774.72 -> goes inside of the link and this one's
1776.88 -> just gonna go to
1778.64 -> home again and then inside of that again
1781.679 -> we want an a tag always needs to have an
1783.76 -> a tag inside of a link tag and then
1785.919 -> inside of that we're gonna have a button
1787.919 -> like a regular old html button that will
1790.24 -> style up nicely and this button is gonna
1792.559 -> say dev dot io
1795.039 -> because i'm kind of unoriginal but you
1796.72 -> can call this website whatever you like
1798.32 -> obviously
1799.44 -> all right cool so now that's done we
1800.72 -> just need to apply um some actual class
1802.64 -> names to this so let's go ahead and
1804.24 -> write that css okay but before we go and
1806.48 -> style it let's go ahead and look at how
1808.799 -> this looks in the browser currently
1811.039 -> um so let's go into index.js and we can
1813.679 -> just bring this in
1815.679 -> so if we come up to the top we want an
1817.279 -> import header from
1820 -> slash components forward slash
1823.679 -> header cool so now we have that
1825.279 -> available
1826.64 -> we can just render it want to go under
1829.679 -> the head tag from
1832.48 -> next
1833.52 -> and we'll just render a header like that
1835.279 -> nice and simple it doesn't take any
1836.559 -> props so
1838.08 -> should be good to go and then let's have
1839.76 -> a look at what this looks like in the
1841.039 -> browser cool so it looks kind of bad
1842.88 -> right
1844.24 -> but we have our button and our two link
1846.559 -> tags and if we hit him we end up going
1848.72 -> to slash about and we end up going home
1851.44 -> and home cool that's what we want that's
1853.36 -> the behavior we want let's style this up
1855.84 -> so let's come into header.module.css
1858.48 -> um and you can see i've got a dot header
1860.24 -> class in here now
1862 -> and basically all it is is a flex box
1864.24 -> and this width and margin stuff here is
1867.279 -> uh the same as the content wrapper class
1870.32 -> so it's just gonna make it like line up
1872.72 -> nicely so the edges are right uh so what
1874.88 -> i suggest you do is just uh pause the
1877.279 -> video take a look at this copy it out or
1879.919 -> you can just like pull it out the github
1881.6 -> repository okay cool but we actually
1883.44 -> need to apply that don't we so
1885.76 -> let's go to our
1887.919 -> header tag here
1890 -> and we want a class name and that's just
1892.32 -> going to be styles.header
1894.88 -> cool so if you come back to our browser
1896.24 -> now what we've got is something that
1897.679 -> looks a little bit more like a barn and
1899.039 -> a nicely spaced top bar
1901.039 -> um it's a little bit wonky but so we're
1903.2 -> going to fix that okay next thing to do
1905.76 -> is the actual button styles
1908 -> so all i've got here is like some styles
1910.399 -> for the button container
1912 -> um just to make sure it stays to the
1913.519 -> left hand side i've put a line itself
1915.2 -> select start and giving it a width and
1917.76 -> then
1918.72 -> these button styles here
1920.399 -> are just using
1922 -> the nexus color and then there's some
1924.48 -> stuff to just make it look a little bit
1926.08 -> prettier and then i've put like a hover
1928.64 -> effect on it where the colors just
1930.559 -> change when you hover on it
1932.48 -> so once again pause the video take a
1934.159 -> look at those styles copy them out or
1936 -> just take them out of the repo and then
1937.84 -> of course we actually need to apply
1939.44 -> those classes again they were
1941.039 -> buttoncontainer.btn.btn
1943.519 -> so we need to go into
1945.279 -> header this one's going to be our btn
1947.44 -> container so we give it styles.btn
1951.919 -> container and then obviously the button
1954.64 -> and then obviously the button is going
1955.84 -> to get the
1958.2 -> styles.btn class then the last styles we
1960.96 -> need to apply are going to be to these
1962.24 -> link tags and they're all going to have
1963.679 -> the same one
1964.88 -> so
1965.679 -> uh when you apply styles to the link
1967.6 -> tags this outer wrapper is where you put
1971.12 -> the href and all the routing stuff
1973.519 -> that this inner a tag is actually what
1975.6 -> you're going to be styling so we're
1977.36 -> going to put our
1979.039 -> class names in here at this level and
1981.279 -> we're just going to call it styles.lnk
1984.08 -> and then take that same class name and
1986.159 -> just copy and paste it into
1988.32 -> all of the other a tags on the page and
1990.32 -> then we actually have to write that css
1992.559 -> so let's go back to
1994.039 -> header.module.css and then these are the
1996.399 -> styles for
1998.24 -> those link tags so just take a look at
2000.399 -> those styles copy them out or again just
2002.72 -> like pull this whole file from the repo
2004.64 -> if you like all right cool so all those
2006.48 -> styles should be applied and we should
2008.399 -> have something in the browser there we
2010 -> go
2010.96 -> that looks a little bit like the end
2013.279 -> product but it's still a little bit
2014.88 -> wonky and i'm going to show you how to
2015.919 -> fix that just now okay so here's what it
2017.84 -> looks like in the browser we've now got
2019.12 -> our menu in and then we're gonna work on
2021.2 -> getting our blog post displayed in the
2023.039 -> ui like here and i'm just gonna show you
2025.44 -> the finished product so we want
2026.399 -> something that looks like that so we've
2028 -> just kind of converted these little
2029.36 -> things into our blog post so what we're
2031.76 -> going to do is we're going to go over to
2033.76 -> our
2034.72 -> front directory again and we're going to
2036.24 -> think about the data that we've been
2038.399 -> fetching so if we go ahead in the
2039.679 -> console
2040.72 -> we've still got logged out this blog
2042.399 -> post right and we're going to make one
2044.399 -> small optimization just to make this a
2046.159 -> little bit easier
2047.76 -> so instead of destructuring data off of
2050.56 -> data here
2052.079 -> we're actually gonna do it just here
2054.879 -> so we're gonna just already destructure
2057.28 -> data so what we return is just going to
2059.2 -> be um this object here instead of having
2062.639 -> to do it in the props
2064.32 -> so essentially what we've done is we've
2065.52 -> moved the destruction of data from props
2067.76 -> just here
2069.44 -> to our variable up here and then what we
2072.079 -> can do is we can actually just
2073.52 -> destructure off
2075.359 -> blog posts
2077.2 -> in our props so instead of getting like
2079.359 -> an object with blog posts on it we're
2081.04 -> just getting the blog posts array now so
2082.96 -> when we console.log
2085.119 -> blog posts you should see that change
2087.04 -> down here so now we just have an array
2088.8 -> which is blog posts and all of our stuff
2090.96 -> in it so it's just a little bit neater
2092.32 -> just a slight optimization
2094.079 -> and then we're going to take out that
2095.52 -> console log because we don't need it
2096.72 -> anymore
2097.839 -> um we're going to come down to the h1
2100.4 -> and we're just going to change this to
2101.44 -> like dev
2102.88 -> dot io right
2104.96 -> and then we're actually going to start
2106.24 -> thinking about displaying this data
2108.56 -> so we already have these nice styles
2110.24 -> that next gs has given us and we're
2111.68 -> basically going to make a component out
2112.96 -> of those first and then map over all of
2116 -> our blog posts and display one of those
2117.359 -> components for each of them so basically
2119.68 -> how we're going to start this is we're
2120.72 -> going to copy one of these a tags here
2123.68 -> it doesn't really matter
2125.04 -> which one
2126.4 -> just copy that because we want the
2127.76 -> styles.card and we want this rough
2130.079 -> structure in h2 and ptag and then we're
2132.24 -> going to go
2133.92 -> into our components directory
2136.72 -> and create a new component called
2138.76 -> blog.js right then we press rfc tabs
2142 -> create a react functional component and
2143.76 -> we're just going to return that to start
2145.28 -> with just that a tag
2147.119 -> but we're going to change this a little
2148.4 -> bit as we go along so first off we need
2150.56 -> to think about the props that this
2151.68 -> actually needs to take and if we go back
2153.599 -> and look at like one of the
2156.48 -> items in these array you can see we've
2158 -> got title blog body
2160.32 -> description and slug
2162.32 -> now we don't want to display the whole
2164 -> like blog body because it's just the
2165.44 -> overview we just want to display like
2166.88 -> the description and the title is our
2168.32 -> actual content and the slug is what we
2169.839 -> need to direct it to the right place so
2172.32 -> we're going to take description
2175.04 -> title
2176.4 -> and slug and if we go back to the ui in
2179.599 -> the browser basically like what we want
2181.68 -> is for this top bit here is obviously
2183.28 -> our title that's the description and
2185.119 -> then it's going to route us using the
2186.8 -> slug to the correct page all right cool
2189.599 -> so there's the props that we need and
2191.44 -> then we also need this to actually link
2193.04 -> to things so when you're linking to
2194.96 -> external things
2196.48 -> um within nextgeners you can use a tags
2199.119 -> like they have here
2200.48 -> so that's fine because they're linking
2202.32 -> to another website their own docs but we
2205.28 -> want to link internally so we have to
2206.96 -> use their router again so we're going to
2208.4 -> need to use
2209.52 -> next router so we just type rn lnk
2213.359 -> press enter and we've got link again
2216 -> and then what we're going to do is just
2217.76 -> wrap this a tag in unlink
2220.079 -> and then once again because this is
2221.28 -> next.js the href actually lives on the
2224.88 -> link
2226.16 -> and the styles any styles you apply go
2228.64 -> on the a tag so we're going to do this
2230.64 -> href here
2231.92 -> and instead of going to like this
2234.24 -> external website
2236.079 -> we're going to make this a variable
2238.24 -> um and we're going to go to
2240.72 -> slash posts forward slash and then we're
2243.28 -> going to add on to the end of that like
2245.28 -> whatever our sluggers
2247.119 -> oops not s dogs log
2249.2 -> and that's going to take us to whatever
2250.96 -> our slug is so like in the case of this
2252.32 -> one it would be ultimate guide and then
2254.16 -> we just have to start rendering like the
2256 -> things we actually want in here instead
2257.44 -> of
2258.16 -> random text so we're going to put
2260.56 -> a title
2262.24 -> in here obviously and then the p tag is
2264.56 -> going to be for our description and
2267.28 -> that's it that's pretty much our blog
2268.96 -> component the last thing we need to do
2270.48 -> is actually apply these next.js styles
2273.04 -> so we're going to need our own style
2274.24 -> sheet for that so we come over into our
2276.88 -> styles directory and create
2279.44 -> blog.module.css
2283.28 -> make blog capital why not
2285.359 -> all right and then the styles we need
2286.8 -> for this
2287.92 -> are the
2289.68 -> styles.cards so what we need to do is
2292 -> find that dot card style in
2293.599 -> home.module.css
2295.2 -> and that's line 81 all the way down to
2299.28 -> line 109 and we're going to take that
2302.079 -> and we're going to put it in
2303.599 -> blog.module.css
2306.88 -> which will give us all the like fancy
2308.48 -> card styles and hover effects and that
2310.16 -> should all be applied now
2312.48 -> so now next thing we need to do is
2314.4 -> import styles from
2317.2 -> uh dot dot slash and then use the auto
2319.68 -> complete styles and then use it to go to
2322.079 -> blog.module.css
2323.76 -> and now that should be applied to this
2326.56 -> so we have our component that should be
2328.16 -> styled
2329.28 -> like i showed you in the browser so the
2330.88 -> next thing to do is go to the index
2332.88 -> go all the way to the top and actually
2334.72 -> bring in this component so we're gonna
2336.4 -> go just under content wrapper actually
2338.56 -> you know we're gonna go just another
2339.359 -> header
2340.64 -> and we're gonna bring in
2342.64 -> blog
2343.92 -> from
2345.28 -> dot dot slash once again we can just use
2347.28 -> the autocomplete to navigate to
2348.96 -> components and then blog.js okay so once
2352.079 -> we've imported that we're going to have
2353.599 -> to do some tidying up with this code
2354.88 -> because there's a lot of stuff in here
2355.839 -> we don't want anymore so first thing is
2357.92 -> we're going to come down to line 54 to
2359.44 -> 57 and get rid of that p tag there
2363.52 -> then we're going to want to keep this
2365.44 -> grid just here because that gives us
2367.2 -> some nice styles that are already
2368.8 -> imported
2369.92 -> and we're going to get rid of every
2371.28 -> single a tag within here
2373.28 -> because these are all like hard coded
2374.88 -> and we don't need them anymore because
2375.839 -> we're just going to render
2377.359 -> a bunch of different ones from our list
2379.68 -> of stuff that we're importing from so
2381.119 -> then we add some jsx and then we're
2382.88 -> gonna go on to our blog post variable
2385.2 -> right which is an array
2387.76 -> so we're gonna go blog post.map map
2389.92 -> takes an arrow function like that so
2392.16 -> that's how you open it up and then it
2393.52 -> takes a couple of arguments the first
2395.04 -> one is going to be like whatever we call
2396.96 -> each item in the array and the second
2398.4 -> one is going to be um the index of that
2401.52 -> item
2402.4 -> so i just called them blog and i and
2404.16 -> then because blog is each
2407.119 -> individual item of this array as it maps
2409.28 -> over it so it's each of these objects we
2411.599 -> can destructure things off of it again
2413.44 -> so we go const and then we can
2415.76 -> destructure off the items that we need
2417.44 -> so we're going to need once again the
2418.72 -> title the description
2420.88 -> and the slug and they're all coming off
2423.119 -> the blog and then what we're going to do
2424.96 -> is use those to feed our component that
2427.119 -> we've imported in and then we need a
2428.48 -> return statement and what we're going to
2430 -> do is we're going to return a blog
2431.44 -> component and that has the correct prop
2434.8 -> so title is going to be title and these
2436.72 -> need to be like jsx variables
2438.16 -> description is obviously a description
2441.119 -> and slug is going to be luck all right
2444.079 -> cool so now if we come back to the
2445.359 -> browser you should see that we've got
2447.28 -> both of our blog posts displaying in the
2449.44 -> ui like that now it's at this point i
2451.52 -> should know that if you didn't add all
2453.44 -> the blog posts from the gist you might
2454.56 -> just have the one that we added together
2456 -> so it might be a good time to go back
2457.44 -> and do that and now the next thing we're
2459.359 -> gonna do is just make them stack on top
2461.599 -> of each other instead of side by side
2463.2 -> just because i like to look better okay
2464.72 -> so to do that all we do is we go to
2466.52 -> blog.module.css and we come to dot card
2469.52 -> and we just change this to width 100
2473.359 -> save that and then there's one extra
2474.96 -> thing i forgot in index as well
2477.599 -> um when you return these blog items um
2480.16 -> you should really have a key you should
2481.599 -> always have a key when you're like
2483.44 -> rendering a bunch of components from an
2485.44 -> array and we're just going to make that
2487.28 -> the second argument in our map so if we
2489.44 -> go ahead and save all of that and we
2491.359 -> come back to our browser we should have
2493.119 -> them stacked nicely like that but
2494.56 -> unfortunately when we click one of these
2496.16 -> links obviously we just get a 404 so
2498.4 -> next i'm going to show you how to
2499.76 -> actually route to a proper page
2502 -> okay so we want to come into the pages
2504.88 -> directory over here and then we're going
2506.96 -> to create a new folder called posts
2509.52 -> and inside of there we're going to
2510.72 -> create a new file called
2512.319 -> squarebracketslog.js
2515.839 -> and what this does is it indicates the
2517.68 -> next that this is a dynamic route so
2521.28 -> essentially what we're going to do here
2522.64 -> is we're going to query strappy for like
2524.16 -> a bunch of different slugs and then
2525.599 -> we're going to get get started paths to
2527.2 -> return a different route for each of
2528.88 -> those slugs that we fetch and we're
2530.8 -> going to display something custom on
2532.16 -> each of those routes
2533.68 -> and this
2535.2 -> slug just indicates next there it's a
2537.44 -> dynamic route like i said but also it
2539.68 -> allows us access to this variable the
2541.68 -> slug so if we press rfc tab
2545.359 -> and bring up the react function
2546.48 -> component we're not going to call it
2548.24 -> uh slug obviously we're gonna call it
2549.68 -> content uh and then we're gonna get rid
2551.44 -> of the react import statement because we
2552.8 -> don't need it then the first thing we
2554.64 -> really want to do in this file is
2557.2 -> deal with that get started path so if we
2558.88 -> probably type gsp and go to get starting
2561.359 -> paths
2562.24 -> press enter we get this cool boilerplate
2564.24 -> and we actually don't need any params
2566 -> for this we're just going to need to
2568.8 -> fetch from strappy so we're going to
2570.56 -> follow
2571.599 -> the same pattern we did before by
2572.96 -> creating a variable called the fetch
2574.319 -> params which is an object inside of it
2576.96 -> we're going to have a method key and
2579.52 -> it's always post because we're using
2580.96 -> graphql and then we're going to want
2583.04 -> headers
2584.16 -> and this one's going to be an object
2585.76 -> that contains
2587.2 -> content hyphen type and then
2590 -> application.json
2592 -> just like normal
2593.68 -> application json sorry and it's giving
2595.839 -> me a little error here because you want
2597.119 -> to make sure you put a comma after each
2599.28 -> key in our object so we just put a comma
2601.359 -> after headers there
2602.64 -> uh and then lastly we actually need our
2604.319 -> body
2605.599 -> so we're gonna json.stringify
2610 -> an object and this object is gonna have
2612.079 -> a query
2613.2 -> key and inside of here we're gonna have
2616.079 -> our query this one's pretty simple so
2617.839 -> i'm just gonna write it out we're just
2619.119 -> going to open up some brackets go on to
2621.52 -> blog posts and then just grab the slug
2624.64 -> because we want every slug for every
2626.319 -> blog post uh yeah and that should be our
2628.24 -> fetch brands and then we need another
2630 -> cons called res where we await a fetch
2634.16 -> request
2635.359 -> and we're obviously going to fetch to
2637.2 -> our graphql endpoints so it's at this
2639.359 -> point we need to bring in our m variable
2641.599 -> for that so if we scroll up to the top
2643.119 -> of the file
2644.4 -> and we're going to want
2646.4 -> a const here called url
2650.319 -> and that's just going to be equal to
2651.68 -> process
2652.16 -> [Music]
2653.28 -> dot emv
2654.88 -> dot strappy base url all in caps
2658.64 -> so if we go back to line 21 where our
2660.48 -> res is we should be able to just have
2663.119 -> like a template string and then we're
2665.04 -> going to have our base url inside of
2667.44 -> that variable and then we're going to be
2668.96 -> going to slash graph ql
2671.76 -> because we want to hit our graph and
2673.599 -> then we're just going to give it fetch
2674.72 -> params as the second parameter and that
2677.2 -> should be good to go and last thing we
2679.2 -> need is just
2680.96 -> to destructure off those posts
2684.16 -> so we'll await res dot json
2688.24 -> and then finally we need to look at the
2690.24 -> boilerplate and the kind of structure
2692.48 -> it's got its paths in so what this
2694.64 -> should return is an array with a bunch
2696.16 -> of different slugs in it and what we
2697.839 -> want to return as paths is an array with
2700.16 -> something that looks like this it'll be
2701.359 -> like params with the key inside of it of
2703.68 -> slug and then that'll be equal to like
2706.079 -> whatever our dynamic slug is so if we're
2708.079 -> an ultimate guide it should be ultimate
2710.24 -> guide right
2711.839 -> and we want to have like a bunch of
2713.599 -> these
2714.56 -> inside of our paths array like that so
2717.92 -> i'm just going to go ahead and like copy
2719.92 -> one of these examples and get rid of the
2722 -> others and we're going to create this
2723.92 -> like paths array ourselves so we're
2725.599 -> going to go const paths
2728.48 -> is equal to
2730.24 -> and then we're going to go on to posts
2733.2 -> it's usually an object called data so
2736 -> we're going to go into dot data which
2737.68 -> should get us the array of blog posts so
2739.359 -> we're going to map over that array
2742.16 -> and map takes an arrow function
2744.72 -> which we open up like that and we've got
2746.64 -> one parameter called uh i don't know
2749.68 -> like blog
2750.8 -> and then inside of here for each blog we
2752.72 -> want to return
2754.4 -> something that has that same kind of
2756.4 -> structure we just nicked out the
2757.839 -> boilerplate except instead of slug being
2760.4 -> ultimate guide we're going to want slug
2762.96 -> to be blog dot slug and i'm now
2766.88 -> realizing that post makes more sense
2768.56 -> here so i'll change that to post and
2770.24 -> then change that one there to post as
2771.68 -> well and then what we should be able to
2773.28 -> do is instead of like having paths
2776 -> return this array we can just give it
2778.079 -> our
2779.04 -> paths variable here and then all we need
2781.839 -> to do is stick a comma after it and
2783.52 -> we'll go with fallback true for now
2785.52 -> which i will explain later and that
2788.72 -> should be our get stag paths um all
2791.76 -> right so let's go below that and then
2793.119 -> we're going to get static props so if we
2795.2 -> type gsp and then
2798.079 -> hit enter we should get a boilerplate
2799.76 -> for get static props and for this one
2801.599 -> we're actually going to want a
2803.76 -> params
2805.76 -> prop
2806.8 -> because on this params variable here we
2809.04 -> can get onto like dot slug we're
2811.119 -> basically going to fetch the strappy and
2813.28 -> say we won
2815.359 -> just the response for whatever slug
2817.599 -> we've got
2818.88 -> and we're going to get that slug off
2820.319 -> this dynamic route so basically when you
2822.079 -> click on like ultimate guide for example
2824.72 -> the variable in here on params.slug is
2827.119 -> going to be ultimate guide and then we
2828.48 -> fetch by slug for ultimate guide
2831.92 -> and if it's something different it'll be
2833.599 -> something different so
2835.599 -> it's going to be that same kind of fetch
2837.68 -> pattern so if we go back up to line six
2840.4 -> and we'll just take fetch params down to
2842.64 -> line
2843.72 -> 23 down to posts
2846.319 -> and we'll take all of that and just
2848.319 -> paste in here
2850 -> all right cool so let's just go through
2851.28 -> this um we still want the method to be
2852.96 -> post we want the headers to be content
2854.64 -> type application json um but we are
2857.04 -> going to change this query quite a lot
2858.96 -> so let's get rid of this query
2862.079 -> and let's go to our browser and then if
2864.88 -> we go to localhost 1337 forward slash
2867.599 -> graphql we get the playground uh
2870.16 -> and i've already got the query out oops
2872.24 -> but i'll run through it with you guys so
2873.839 -> if we hit query and open up this bracket
2876.16 -> and then press ctrl space we're going to
2877.76 -> want to go on to blog posts and then
2879.68 -> here's where it gets a little bit
2880.72 -> interesting if we
2882.079 -> open up some brackets like this
2884.48 -> we get this where option
2886.96 -> and then it's kind of like a key so you
2889.119 -> put a colon and then you get an object
2891.52 -> inside of it and we're going to say it's
2893.119 -> where slog
2894.8 -> is
2896.559 -> uh and we'll go with ultimate guide cool
2899.2 -> and then if we open this up we should if
2902.079 -> we control space be able to get a title
2904.8 -> um let's get a bunch of stuff let's get
2906.559 -> description let's get all the stuff
2907.599 -> we're gonna need uh and i think we want
2909.68 -> blog body
2911.119 -> and we also want the splat
2914.64 -> yeah and then obviously we open splash
2916.8 -> up to get url as well
2919.839 -> all right cool so let's see if this
2920.88 -> query works
2922.24 -> yep that looks like it's working and
2924.319 -> let's just try it with another slug to
2926.319 -> be safe so we can change this over to
2928.24 -> what is next and we should get
2930.88 -> the stuff for what is next so basically
2933.359 -> this uh little where thing just means we
2935.44 -> can filter our responses off blog posts
2938.16 -> by
2939.28 -> some variable and we're going to use
2940.64 -> slug here because like i said we have
2942.24 -> access to that so let's go ahead and
2943.92 -> take this query copy everything
2946.72 -> except that like little query bit at the
2948.319 -> top head on back to our front end and
2951.04 -> then paste that in there now obviously
2953.359 -> we don't want to fetch what is next for
2955.28 -> every page because like i said this page
2957.76 -> generates all of the pages for our blog
2959.52 -> posts so we want this to be dynamic so
2961.2 -> we're going to get rid of this and we're
2962.48 -> going to put a variable in here and it's
2964.079 -> going to be params.slug
2967.119 -> and it's at this point i should tell you
2968.4 -> that if you decided to name your file
2970.96 -> something different so if you named this
2972.559 -> like i don't know post.js in the square
2975.04 -> brackets it would be like params.post
2977.28 -> for you and the name of the variable
2979.2 -> here on params is controlled by whatever
2982.48 -> you call this all right cool so
2985.44 -> that should be the query we need and
2987.52 -> then
2988.559 -> we're gonna fetch the graphql again with
2990.64 -> our fetch params
2992.48 -> and we're gonna unpack it so at this
2995.04 -> point we should probably check that
2996.4 -> we're getting what we want so let's
2997.839 -> console log posts uh we've got error get
3000.88 -> started props has already been declared
3002.64 -> um oh okay so i've got like a weird
3004.96 -> import statement at the top just here on
3006.64 -> line one uh so if you get that error
3008.559 -> that might be what it is there we go
3009.92 -> let's just delete that um and then i'm
3012.16 -> also realizing we should probably return
3013.599 -> something down here
3016 -> um so let's just return hello why not
3018.559 -> and there we go let's get back to the
3019.599 -> index page and i'm gonna click on one of
3021.119 -> these blog posts and there we go we get
3023.2 -> hello rendering out and we should if we
3026.88 -> open up our console
3028.64 -> yeah there we go there's our log so
3030.079 -> we've got data with our blog posts on it
3032.48 -> and that's coming from the get started
3034.48 -> props that we just wrote um all right
3036.559 -> cool so let's go back to that
3038.559 -> how about instead of calling this post
3041.119 -> online 57 why don't we just go straight
3043.2 -> for that data object so let's
3044.96 -> destructure that off and then we can see
3047.76 -> in the terminal again we've got like an
3049.599 -> array with our objects inside of it
3052.839 -> so what we're going to want to do is go
3055.28 -> on to
3056.8 -> data
3058.16 -> dot blog posts
3060.079 -> and there's only ever going to be one
3061.2 -> item in the array so we're going to
3062.559 -> return the zero index of that and then
3064.64 -> get rid of that log and then we should
3066.16 -> be able to bring that into our component
3067.92 -> and we might as well destructure offer
3069.68 -> it so we might as well get like title
3072.96 -> blog body and splash off of it uh and
3076.079 -> then instead of rendering hello here
3077.68 -> let's just render title to see if what
3081.359 -> we've got is working okay cool so there
3083.28 -> it is there's our title
3085.119 -> so if we come back into slog.js the next
3087.28 -> thing we want to do is basically display
3089.359 -> a header here
3090.88 -> and a footer here and wrap it in our
3093.359 -> content wrapper so it actually starts to
3094.88 -> look like the other pages
3096.72 -> so if we go ahead and bring in the
3098.24 -> components we have we already have a
3100.72 -> header right and we get it from dot
3102.96 -> slash slash components forward slash
3105.599 -> header and then we also have content
3108.559 -> wrapper which comes from the same path
3111.52 -> but content wrapper
3113.119 -> so we can go ahead and go back down to
3114.72 -> here and
3116.4 -> we can
3117.359 -> change this react fragment into a
3119.76 -> content wrapper component and then we
3122.24 -> can stick a header just here above title
3125.52 -> uh and then let's go back to the browser
3126.96 -> and there we go we've got it wrapped in
3129.04 -> our content wrapper and we've got a
3130.4 -> header and we've got our main content
3132.4 -> and then we now need a footer but
3134.559 -> unfortunately we don't have a footer
3136.16 -> component yet so let's go over to
3137.599 -> index.js and then i just want you to
3139.28 -> take line 61 to 72 and get rid of that
3143.76 -> we're not going to use it anymore and
3145.52 -> then we're going to go into components
3147.52 -> and create
3149.52 -> footer.js
3153.119 -> press rfc tab
3154.96 -> um to get outfits.js and then in the
3157.2 -> return statement just stick all of that
3159.28 -> stuff
3160.48 -> and then you can see the only two things
3162 -> we actually need in this whole component
3164.64 -> are image from next.js and these styles
3167.68 -> here so let's get rid of that react
3170.079 -> statement and then we imim
3172.64 -> g and press enter let's get import image
3175.76 -> and then we're going to import dials
3178 -> from
3179.2 -> uh dot slash
3181.119 -> styles forward slash footer.module.css
3185.839 -> which we're going to go ahead and create
3187.68 -> so i want you to come to the styles
3189.28 -> directory and then unfortunately i did
3191.92 -> this off screen but what you're going to
3193.28 -> want to do is go into
3194.76 -> home.module.css which contains the first
3196.8 -> styles you need
3198.48 -> just like control f for footer
3200.8 -> and then you're literally just going to
3202.8 -> create a
3203.96 -> footer.module.css file and inside of
3206.319 -> there you want to have dot footer dot
3208.8 -> footer a and logo
3210.88 -> looking exactly like this again you
3212.64 -> should be able to find those three
3213.68 -> classes in home.module.css
3216.4 -> and that's it that's everything we need
3218 -> for our footer component to work the way
3220.079 -> we want it to
3221.599 -> so
3222.8 -> last thing to do is just go into
3224.72 -> index.js here and then we're going to
3227.68 -> render a footer component we're also
3231.119 -> going to want to stick that
3233.119 -> just here in our slug.js file as well so
3237.04 -> now we can just render footer components
3238.96 -> everywhere so it auto imported into my
3241.599 -> slug.js file that's really nice
3245.04 -> and i didn't check the import for index
3246.48 -> actually i should check that there we go
3248 -> it auto imported as well but just in
3250.319 -> case it didn't make sure you check yours
3251.92 -> all right so
3253.839 -> compiles and then we can go back to the
3255.599 -> browser take a look and there we go we
3258.16 -> should have a footer on the ultimate
3260.16 -> guide page
3261.52 -> and we also have a footer on the
3262.88 -> homepage just like normal okay so the
3264.8 -> next thing to do is get blog body
3266.72 -> disturb playing properly now blog body
3269.44 -> is actually what's called markdown so
3271.2 -> what we need to do is have a package
3273.76 -> that just converts that into html so if
3275.92 -> we bring up our terminal close down the
3278.4 -> server and then we want to run npm i
3281.359 -> react dash markdown and while that's
3283.92 -> installing we can scroll up to the top
3286.4 -> and then we're going to import react
3288.24 -> camel case markdown from react markdown
3291.2 -> package we just installed and then
3293.44 -> literally all we have to do is just take
3294.72 -> this component and instead of wrapping
3297.44 -> blog body and jsx we're going to wrap it
3299.28 -> in this markdown component just here and
3301.52 -> then if we restart the server
3303.76 -> with npm run dev when we go to the
3306 -> browser we can see we've got all this
3308.319 -> markdown here
3309.68 -> and there's just a few things we need to
3310.88 -> do css wise to get this looking decent
3313.44 -> the first thing is to just go into the
3315.76 -> global css and make sure you've got an
3318.24 -> image with 100 in there just at the
3320.88 -> bottom
3321.839 -> and then the next thing to do in the
3322.96 -> existing css is go to content
3324.88 -> wrapper.module.css
3326.799 -> and this container you just want to get
3328.72 -> rid of the min height and the height
3331.04 -> values
3332.72 -> because we're not going to need those
3333.92 -> anymore
3335.359 -> and then we just have to create our own
3336.96 -> css module uh with a couple of styles
3340.079 -> just to constrain this width here and we
3342.559 -> should be good to go
3348.24 -> so i'm going to come into the styles
3349.76 -> directory and i'm going to create
3352.16 -> blog page
3354 -> camel case
3355.76 -> dot module dot css
3359.28 -> and then inside of here
3361.52 -> i'm just gonna paste some styles and you
3364.16 -> guys can get these just out of the repo
3366.4 -> but literally like the most important
3368 -> thing here is it's a flex box and we're
3370.079 -> constraining the max width and then
3371.44 -> we're just adding some margin and
3372.48 -> padding really simple stuff
3375.04 -> and then let's save that go back to
3376.64 -> slug.js
3378.4 -> and we're going to go ahead and import
3380.079 -> styles from that css module we just
3382.799 -> created so
3384.599 -> blogpage.module.css and then
3387.04 -> we're just going to go down here just
3389.92 -> below the header
3391.599 -> we're going to wrap all this stuff in a
3393.119 -> main tag so your markdown should look
3395.2 -> like that now just with your h1 and your
3397.04 -> react markdown in this main tag
3400.079 -> and then in here we're just going to
3401.359 -> give it that class we just created which
3403.359 -> is on styles dot grid i believe it's
3406.72 -> called and then if we go ahead and save
3408.48 -> that and go back to the browser now
3410.4 -> we've got this our nice article styles
3414.079 -> and if we go back to the home page
3417.119 -> we can go on to the other article and
3419.119 -> it's styled nicely as well
3421.28 -> and now the last thing to do is just get
3422.96 -> this about page in because it just says
3424.64 -> hello at the minute and then we're done
3425.92 -> with the front end okay so let's go to
3427.52 -> about.js first thing we need to do is
3430.4 -> bring in
3431.52 -> the content wrapper from our components
3434.319 -> and the header as well
3436.079 -> and we're also going to want the footer
3437.839 -> and then we can already start building
3440 -> in our return statement something that
3441.44 -> looks a little bit nicer so we can start
3443.52 -> off with just a header and footer
3444.88 -> wrapped inside our content wrapper
3447.599 -> and then we're also going to want a div
3449.839 -> that's going to contain like our body
3452.96 -> of the about content because if we go
3454.72 -> back to the back end you can see on
3457.2 -> about content we've just got this one
3459.76 -> thing we want to get we just want to get
3461.2 -> body and that's it so
3463.44 -> literally all we're going to do is just
3465.28 -> have a get static props go get that and
3467.359 -> then we're pretty much good for this
3468.559 -> page so let's go into slug.js again
3472.319 -> and let's take the get started props
3474.48 -> from line 70 all the way up to 40
3478.319 -> and we're just going to paste this in
3480.96 -> and pretty much all of this is okay we
3483.04 -> do want it to be a post uh the headers
3485.28 -> are all good it's just this query that
3486.88 -> needs replacing so let's go ahead and
3489.28 -> take that out and then if we go to
3490.88 -> localhost one three three seven forward
3492.72 -> slash graphql
3495.119 -> and type query open up some brackets
3498.48 -> and press ctrl space we can go on to
3501.2 -> about contents and then open up another
3504.079 -> set of brackets
3505.68 -> control space again and we just want to
3507.359 -> get that body right and that gives us
3509.68 -> the data that we want so all we do now
3512 -> is just take that query and put it
3515.28 -> exactly where
3516.799 -> we took that query out of on line 14. uh
3520.24 -> let's just remove these params from the
3522.319 -> get static props
3523.839 -> and then the only thing we need to
3525.2 -> change is this return statement so if we
3527.44 -> go back to our playground we still have
3529.52 -> data and then we have an array called
3531.52 -> about contents with our thing on it so
3534.64 -> what we want to do is still destructure
3536.88 -> data here
3538.4 -> but instead of going to data.blog posts
3540.48 -> we need to go on to
3541.64 -> data.aboutcontents so if i just take
3543.359 -> that about contents
3545.28 -> and paste it in here
3547.119 -> we still want the zero index and then in
3549.2 -> our props
3550.559 -> we should be able to destructure off
3552.72 -> body
3554.16 -> because once again if we look at our
3555.28 -> data structure you can see we've gone on
3557.2 -> to data we've destructed that off and
3558.96 -> then we've returned about contents
3561.839 -> zero and then we destructure off body so
3563.92 -> we should just be getting like this now
3567.359 -> in our actual component and then because
3569.28 -> it's markdown as you may have guessed
3571.119 -> all we need to do is just bring in those
3572.72 -> same packages that we had in slug js
3575.2 -> so if i just go and grab that import
3577.119 -> statement react mark down i'm going to
3579.599 -> bring that in and then i'm just going to
3581.599 -> take that component then inside of this
3584 -> div
3584.839 -> i'm gonna return that markdown component
3588.319 -> with my body inside of jsx inside of it
3591.599 -> okay that should be pretty much good to
3593.28 -> go the last thing we need to do is um
3595.44 -> because we're fetching to our url
3597.2 -> variable we obviously need to bring that
3598.559 -> in
3599.52 -> so
3600.72 -> if we go to slug again let's just take
3602.96 -> that const and bring it at the top so
3605.119 -> we've actually got
3606.64 -> our url variable available to us
3609.52 -> all right cool and then if we go back to
3610.799 -> the browser there we go and once again
3613.2 -> we literally just need to do the same
3614.319 -> thing we just need to constrain this to
3615.76 -> a nice width and we're good to go so
3618 -> let's go back to the front end
3620.4 -> into the styles directory and we're
3622.319 -> going to want to make an about
3624.4 -> dot module dot css and then we're just
3628 -> going to create a classical body content
3629.68 -> with that max width and the padding that
3631.52 -> we want and the margin that we want
3633.68 -> then back in about.js we import styles
3637.599 -> from
3638.599 -> about.module.css which we just
3640.839 -> created that is now i've realized that
3642.96 -> i've misspelled that so
3645.2 -> let's just go ahead and change that
3646.88 -> hopefully you spelt it right
3649.359 -> um
3650.24 -> cool and then back down in our return
3652.079 -> statement we just actually want to give
3653.44 -> this div a class name
3655.119 -> of styles dot body content go ahead and
3658.88 -> save that
3660.319 -> and then back in the browser we have our
3662.799 -> about page looking pretty nice really
3664.559 -> simple
3665.44 -> okay that's pretty much it for our front
3667.359 -> end but there is one last thing to do at
3669.359 -> the start of the video i mentioned that
3670.96 -> you don't have to rebuild the website
3673.52 -> every time you change the back end and
3676.24 -> we can do that really simply by just
3678.72 -> adding the revalidate prop to our get
3681.2 -> started props return
3683.119 -> and we give it a value of 10 why not now
3686.4 -> all this revalidate prop is going to do
3688.48 -> is basically
3689.92 -> all these pages are statically built at
3692.079 -> build time
3693.839 -> but all this revalidate page say it does
3696 -> is it says okay if there's new
3697.76 -> information on the server i will request
3700 -> that new information as and when uh
3702.48 -> maximum of once every 10 seconds
3705.359 -> so we're just going to stick that into
3706.799 -> our get started props
3708.88 -> in slug.js and also about.js we also
3712.64 -> want to go ahead and put that revalidate
3714.48 -> in get started props in index as well
3717.76 -> and then we should be good to go we
3719.52 -> should be able to update the back end
3722 -> and have this front end
3724.16 -> um go and request that information even
3726.319 -> when it's hosted
3727.44 -> okay so now we're ready to deploy our
3729.44 -> backend to heroku first i'm going to
3731.839 -> start by opening up a terminal in the
3733.599 -> backend directory and also a terminal in
3735.76 -> the front directory and i'm just going
3737.92 -> to do these in the integrated visual
3739.119 -> studio studio code and terminals the
3741.2 -> next little prerequisite for this is if
3743.119 -> you don't already have a heroku account
3744.799 -> just search for heroku on google and
3746.799 -> then go ahead and sign up for an account
3748.96 -> and also i want you to click on this cli
3752 -> option just here and then go ahead and
3754.16 -> download the 64-bit installer for
3756.319 -> windows because we're going to use the
3757.44 -> cli for this once you have the cli and
3760.799 -> you're signed into heroku there's a
3761.92 -> couple little changes we need to make in
3763.68 -> the actual back directory so we need to
3766.079 -> go inside config create a sub directory
3768.319 -> called emv then inside emv create
3770.88 -> another subdirectory called production
3773.28 -> and then inside there you're going to
3775.039 -> make another database dot js file and
3778.319 -> then essentially we're following like
3780.48 -> the strappy docks for the deployment
3783.119 -> so um i've got the link in the
3784.88 -> description for with this link um but
3786.799 -> you want to come to strappydocs and you
3789.039 -> want to look for uh heroku install
3791.599 -> requirements and then you're gonna
3792.799 -> scroll down to step four
3794.72 -> and we're going to take this file here
3796.64 -> and that's the database.js file that we
3798.96 -> just created inside of back you can go
3801.2 -> ahead and paste that and everything's
3803.039 -> dynamic in here so we don't need to
3804.079 -> correct anything but you will notice
3805.76 -> that it requires a package called pg
3808.559 -> connection string so if we just take
3810.64 -> that we're actually going to install two
3812.48 -> packages we're going to mpmi pg and that
3816.079 -> package pg connection string and go
3818.72 -> ahead and
3820.079 -> return on that okay so once pg and pg
3822.72 -> connection string have installed
3824.559 -> we should be good to actually start like
3826.799 -> deploying to heroku so we're going to
3828.4 -> start with heroku login
3830.799 -> press any key to continue
3832.64 -> and then it gives you this string here
3834.64 -> go ahead and follow that hit login and
3836.88 -> you should be good to go on your cli you
3839.039 -> should be logged in
3840.4 -> next we're going to go ahead and hit
3841.599 -> heroku create okay so once that's
3843.92 -> created your application
3845.68 -> come back to the docs go down to set
3847.839 -> step 7 and you want to have this
3851.039 -> command here and what this is going to
3853.119 -> do for us is it's going to add an add-on
3855.28 -> that gives us like a postgres sql
3857.28 -> database on our production all right
3859.52 -> that looks like it's worked and now all
3861.28 -> we have to do is
3863.039 -> um initialize a git repository if you
3865.44 -> already haven't with getting it then use
3867.359 -> git add dot to add all of your files
3870.4 -> then we're gonna git commit dash m with
3872.319 -> whatever message you want i'm just gonna
3874.16 -> put like pushing just before we push
3876.4 -> though i've just realized that if we go
3878.88 -> back to this heroic add-ons command we
3881.2 -> actually haven't added a dash a flag and
3883.119 -> the dash a flag tells it which
3884.799 -> application it's gonna add that add-on
3886.88 -> to so if you see here i was kind of
3889.119 -> stupid and i did it without it and it
3891.039 -> added it to a different project the one
3892.72 -> we just created so what you want to go
3895.2 -> ahead and do instead is use this heroic
3897.2 -> add-ons command with the dash a flag
3899.92 -> and then copy and paste your
3902.96 -> new created heroic repository here if
3906.319 -> you have like a fresh heroku account you
3908.24 -> probably don't have to redo this by the
3909.359 -> way because you probably just got like
3910.319 -> one project but
3911.76 -> um this is what you have to do if you've
3913.599 -> got multiple products
3915.28 -> all right cool so we've added that and
3916.88 -> we can see all right awesome so we've
3918.64 -> added our postgres sql add-on and we can
3920.96 -> see it's gone on the right project this
3922.4 -> time now where did we get to so we got
3924.48 -> to get our door and git commit last
3927.119 -> thing is to actually push
3928.799 -> so what we need to do is add a remote
3930.48 -> for that so let's go back to the strappy
3932.88 -> docks and you can see here in step six
3935.839 -> it's it's kind of confusing it's not in
3937.359 -> the deploy step which is kind of
3938.319 -> annoying but you can see here in step
3939.68 -> six there's a tip
3941.68 -> you want to go ahead and take that
3944 -> and then we paste it into a terminal and
3945.599 -> again it's got that dash a flag but it's
3947.92 -> just got like a random app name so you
3950.079 -> want to take your app name go ahead and
3952.079 -> paste that in there and then we've added
3954 -> our app as the actual remote and then we
3956.559 -> can go to the docs again and step 11 is
3958.64 -> the deploy step and the command is get
3960.4 -> push heroku head main go ahead and take
3963.359 -> that
3964.799 -> paste it into your terminal
3966.4 -> and what you should get is
3968.48 -> like this deploy step showing up in your
3970.24 -> terminal here while it's deploying we
3972 -> can go ahead and go to our heroic gui in
3974.16 -> the browser go ahead and click the app
3976.4 -> you just created and we're actually
3978.16 -> going to set up the emv variables for
3979.92 -> this so we want to go ahead and go into
3981.68 -> settings and then we go down to real
3984.24 -> config files and this is where you add
3986.48 -> your environment variables and you can
3988.48 -> see it's already created like a database
3990.16 -> url for us which is kind of nice so
3992.559 -> let's go back into the back directory
3994.64 -> let's go into our emv file
3997.039 -> and we just want our cloud rename and
3999.76 -> key and secret in here
4002 -> i'll just add one so you see how it's
4003.44 -> done so i get cloud rename
4005.44 -> and the key
4007.44 -> and then i just hit add it's as simple
4008.88 -> as that and it's done and there we go i
4010.72 -> just went ahead and added our emv
4012.48 -> variables once again you're going to
4013.92 -> want to use your own emv variables for
4016.079 -> this step okay awesome and then it looks
4018.799 -> like i deployed deployed successfully if
4020.72 -> you look here it will tell us the url
4022.559 -> that it deployed to and let's take a
4024.319 -> look at what that looks like in the
4025.119 -> browser awesome so it looks like our
4027.52 -> production strappy back end now it's
4029.92 -> worth mentioning at this point um when
4032.079 -> we added that extra postgres sql
4034.48 -> database
4035.68 -> what we're not using is the sql lite
4037.599 -> database that we used for our local
4039.839 -> development environment so some of the
4042.16 -> stuff that we've done already we're
4043.839 -> unfortunately going to have to redo
4045.92 -> and basically how it works is like the
4047.68 -> content types that we created have
4049.2 -> carried across
4050.559 -> but the users and the actual blog posts
4052.88 -> and about content we're gonna have to
4054.24 -> read them so if we go to slash admin
4057.28 -> we're gonna have to create a new user
4059.52 -> all right awesome so i've gone ahead and
4060.799 -> done that and then we click let's get
4062.96 -> started
4065.119 -> and then first thing we want to do is go
4068.319 -> straight to settings because we've got
4069.76 -> to reset our permissions up so we go to
4071.28 -> user roles and permissions hit roles
4073.839 -> go into
4074.839 -> authenticated down here and about
4076.799 -> content just hit select all and select
4078.88 -> all for blog posts as well and go ahead
4080.64 -> and save that
4082 -> and that gives
4084 -> an authenticated user permission to like
4086.079 -> access our api
4087.44 -> and then
4088.96 -> same thing settings roles public
4092.799 -> and we want to give people permission to
4095.52 -> get find one find
4097.679 -> and count because we don't want them
4099.759 -> like changing the data
4101.92 -> save that
4103.679 -> so that's our permissions done and
4106.319 -> then we need to go ahead and create a
4107.6 -> user i just created like a rando user
4110.159 -> and put confirms go ahead and hit save
4113.12 -> on that
4114.239 -> and then the most annoying thing is we
4115.92 -> have to re-add all the data for about
4118 -> content and blog posts and we also have
4120.159 -> to re-upload all the images
4122.48 -> so i recommend you go back to my gist
4124.799 -> which i'll link
4126.239 -> in the description down below
4128.799 -> and go ahead and just take it from there
4130.4 -> so the about content for example we're
4131.839 -> just gonna
4133.04 -> copy that
4134.319 -> add a new about content paste it into
4136.64 -> body hit save
4138.64 -> hit publish and we're good to go and
4141.12 -> we're obviously gonna do the same thing
4143.199 -> for blog posts but i'm not gonna show
4145.12 -> you that because it's a little bit
4146.159 -> boring and we've already done it okay so
4148 -> i've gone ahead and filled one out and
4150.48 -> i've just realized there might be one
4151.92 -> area that gives you some minor problems
4154.239 -> and it's the images so i'm gonna go
4156 -> ahead and click save on this i'm gonna
4158.239 -> go into media library and upload some
4160.239 -> assets um i want you to go ahead and hit
4162.4 -> browse files go to the um
4165.12 -> folder that hopefully you created from
4166.56 -> the images in the jius go ahead and like
4168.4 -> select all of them and hit open and you
4170.64 -> should be able to upload them all at the
4172.239 -> same time
4173.44 -> to save you a little bit of time
4175.679 -> now if this isn't working for you if it
4177.279 -> says something like internal server
4178.96 -> error almost certainly what has gone
4181.12 -> wrong is you forgot to put your
4182.88 -> environment variables in
4184.64 -> to heroku or you've got your environment
4187.04 -> variables wrong so just make sure you go
4189.12 -> ahead and double check those if you're
4190.719 -> getting an error at this point
4192.56 -> hopefully that all went well for you
4193.92 -> though and your media library looks
4195.36 -> something like this
4196.88 -> and so off screen i went ahead and added
4198.719 -> all the data types as well so now what
4200.64 -> we should have at this point is our
4202.8 -> hosted backend and all of our content in
4205.199 -> it and now we can go ahead and point our
4206.96 -> front end at this api and we can
4208.48 -> actually consume it which is pretty cool
4210.48 -> and all we have to do to point our front
4212.48 -> end at this is actually just come into
4214.8 -> the emv file in front and then point it
4217.28 -> at
4218.32 -> wherever our back end is deployed so
4220.8 -> mine's even tiger but yours would be
4222.239 -> like whatever your app is called
4224.56 -> and just make sure you get rid of that
4225.76 -> trailing slash at the end because
4226.96 -> remember like
4228.239 -> we're doing url slash graphql so you'll
4230.64 -> have two slashes if you don't get the
4231.92 -> trailing slash and then if we run npm
4233.84 -> run dev we can see that our website
4235.36 -> looks the same as if we were pointing at
4237.679 -> our back end when it was hosted on the
4239.84 -> local development server
4241.92 -> and now we have to do is deploy this
4243.36 -> front end
4244.4 -> and first thing to do that is just come
4246.08 -> to gear and create a new repository uh
4248.48 -> you don't have to add any readme or
4249.679 -> anything and i just call mine dev.i o
4252.32 -> then we're gonna go ahead and just copy
4253.6 -> this line to get our remote for this
4256.08 -> repository uh come back to our
4258.96 -> front terminal close down development
4260.8 -> server
4261.84 -> uh do a gear add dot
4264.88 -> do a quick git commit
4266.719 -> and then we're gonna add our remote
4268.08 -> origin
4269.199 -> then go ahead and run git push dash dash
4271.36 -> set dash upstream origin main
4274.88 -> then if you go back to the browser and
4276.159 -> refresh
4277.36 -> you should see all your files just here
4280.08 -> and then the next thing to do is go to
4282.6 -> vasel.com and sign up for a vasel
4285.36 -> account
4286.56 -> then what you're going to want to do is
4288.48 -> go ahead and hit new project and you're
4291.199 -> going to come to your git repos you can
4293.52 -> see dev.i o just at the top here
4296.08 -> we're going to go ahead and import that
4297.92 -> and then we just have to add some
4300.159 -> environment variables right we just have
4301.92 -> to add
4303.199 -> our strappy base url so let's go ahead
4305.52 -> and take that
4306.88 -> and then
4308.159 -> whatever we reset it to the name of our
4310.08 -> deploy blackened add that environment
4312.4 -> variable
4313.6 -> and then go ahead and hit deploy and
4315.36 -> there we go once that was all done you
4317.12 -> should get the confetti from vasel and
4319.44 -> you should be able to visit your website
4320.719 -> by just clicking like the picture of it
4322.96 -> and there we go there is our deployed
4324.64 -> dev to io and you can see if we go into
4326.4 -> the articles they look the same as in
4328.8 -> development once they load up
4331.6 -> and the about page as well looks the
4333.36 -> same as in development
4335.28 -> the real test of it though is if we can
4336.88 -> add a new blog post and see it show up
4338.56 -> so let's take it out i've gone ahead and
4340.32 -> filled in all the fields and then just
4342 -> hit save hit publish
4345.04 -> and then after a couple of refreshes on
4347.28 -> our front end we get our new blog post
4349.6 -> check it out
4350.64 -> we didn't have to rebuild or redeploy
4352.32 -> the front end at all it just shows up
4354.239 -> because of that beautiful revalidate
4355.84 -> prop that we've got in our guest static
4357.199 -> props anyway i hope you enjoyed the
4359.12 -> tutorial i hope you learned something
4360.719 -> and got something from it and yeah
4362.719 -> thanks for watching
Source: https://www.youtube.com/watch?v=9l3r0EFp9ow