Fast & Furious - Going headless with Nuxt.js! - Samuel Snopko

[Music] [Music] hi lovely people fellow developers good jazz and actress enthusiasts and everybody who want to learn a little bit more about the uh going headless uh welcome to my warehouse office slash i'm middle of the moving so this is like a kind of temporary setup for me i hope you will enjoy it and the quality will be good anyway so don't waste any time and dive directly to the talk and the slides first of all my talk is called fast infuriates and we will be fast and furious and we will be going headless with dark jazz especially we will be using storyblock as a headless solution and uh nakja's for creating the website a little sample with uh articles and featured articles and we will be creating that from the scratch to the point uh where it will be possible theoretically to be deployed so let's use outreach a minute uh as much as possible uh at first uh i would like to tell something about me my name is samuel snodcom and i'm really happy to be here i was doing a front development uh some years and now nowadays i'm doing the uh development relationship of developer relations at storyblock and i joined them uh this year so maybe uh that's why we are going to talk about the story block and the nakjas i was using the snake jason story block also like uh some years before that so it's uh not only because i'm the deveralda i really like this combination so another thing about me is like i don't like a lot of slides and do a lot of spies and talking about the tillery i like to jump to the coding and you want to follow me then you can find this talk at the following url you see currently on the screen and right now the question would be how to start and i did and test different setups for to start to create my own templates and anything but at the end uh the development cycle as and not just so fast they think the best thing to start is directly start with a create next app so just go for yarn create next app and basically uh you will get uh this default option like default process step by step with all the stuff you need to do going from name uh programming language uh using of the uh of the ui framework which i am going to go for tailoring css i'm not going to use any modules uh from the next js but you will need to access later i really encourage you to use linters but this is a different topic for their own talk so i'm not going to do that now also the testing don't do that in this test in this talk we will be doing a universal application but would be applied we could do that also if it's a spa and the third would be the server i'm using vs codes so jsconfig is for me and the username so whatever and the kingdom whatever so where we will end is basically a project like this i already prepared that to save some time and i already started also the local local hall so you definitely go for yarn dev to test if everything is running as you want to so let's check it if everything is running and you can see this is the welcome screen from the nagjes and uh this basically means we set up everything and i just and we do we do have to now to start setupping the content on the headless part so in our cm assistant so let's go for the story block uh create our own account and after some registration we will end basically in the dashboard where we see all our spaces our projects and we can create a new project so i'm going to go through from scratch and click on the create new one and i'm going to copy the name of the new project which will be blazing with last minus showcase we are creating this from the scratch and this is really how every new space looks like as i am today your guide i will be closing this one and let's have a quick over what we see right now we are in the content section and basically we see the first uh screen and this is the story the story representing the index page or the home page or how or any other name you would have it for it you can create it delete it or you can create any other one but let's open it and see the default content created by storyblock for us to just uh work with it so the first in the middle you can see the preview where should be shown our website but at the moment is not shown because it's not configured to do that and we do that in a few minutes or seconds so let's close this and focus on the content which was already on the right side and now it's in the middle so we can like definitely like go and edit that content let's go change this to next js or better to toronto we can add also a new block one of those which are currently created and like defined and we have three of them so we could like create uh another one like a new teaser we can save it uh and we can even publish it and basically that would like trigger the webhook on the netlify or where's whatever you are going to deploy and then basically check the json of it so how it will look like the content delivered by the cms to our nakjs project and also like how to look like the production content and this is all that stuff you can already do without doing anything like special setup it's a very very easy and uh and uh user experience is great so the question is how to make work this uh preview because that's one of the key features we would like to see our website and see how how how is it look like before we go to production so you can see here in the middle there is a token and we should use this token to connect storyblock with the nag js project do that we just have to jump to the terminal and basically go for a yarn at story block next module which was created uh by my team colleagues and uh if i do that i will install it uh and then all you need to do is go to the next config and i already like prepared some cheat cheats so here in the modules you just have to set up the storyblock.net module and the minimal possible needed setup is basically the access token i just shown you in the website so this is this access token or if you would like to use a different access token you can always create your own for different content under the settings api keys and go for a different access level and create it like something like production access copen and then then create a new token save it and uh you would see how i'm in this case two tokens so let's use the token i just showed you in seconds ago yeah live coding save it and please don't do that this uh this i do because it's really faster use a dot and file and save your token in dot infra and don't push it into the github or any other service so let's start yarn dev and now we should see a new build from the next jess and this could take a little bit time because of all that process going on in my machine so i will okay so it's it was built and the local house is running we don't have any errors right now so let's uh jump back to the code so what is the next step uh let's check if everything is working here so the content do we see any change in the content we don't see any any change in the content but we know that we already connected story block with the knack jess so the next thing is uh to make uh the premiere like working it's like the setup as you hear uh can see the url we have here the your server address home and the zero other should be probably in my case a locals because my uh application is running on the local house so let's jump back to the settings and uh edit this one so the default location is like the caucasian very by default story open i change to localhost and if you need you can like liquidate also multiple uh locations like uh production and yeah you can add here like versa all netly filing on any other url so let's save it and let's check uh what do we see now in the content and the home story and we see the change we see error uh as you can see right now it's the error from the negative so this is okay this is like uh very good stuff because we already doing uh some progress to getting a next js error is kind of good and the reason why we have organic jazz error is because uh we are asking for the slash home page but we didn't define that in our project so if you check here in project in the pages folder you can see that there is no uh home page home.view there is index.you and this basically means that it should be a slash so empty slash we could do this like a code uh some mapping for the slash home and show the right content or we can use a quick hack we created in the story block and in the visual editor you can override the real path for visual editor and in this case the real part will be only the slash and after safe i should see a preview or welcome screen from the new nexus and it's working but still i don't see a content so there is like some content i created on the right side but i don't see that in preview so what should i do to that as a storyblocks built on the itemic design principles and you are building and it's basically the content is component based con content uh everything here is content a component even the whole page is the whole story is a component but also this every sub uh sections of the page are component and the best way to explain it is like in the component section at this moment we have a four of them we have a feature grid page and these are those all are components the page is a content type so it's a representing we can create using it as stories uh the different samples are like the article page outdoor page or all the pages but not only that it could be also the items or like uh your items you are selling or authors which doesn't have to have on page but you want to have them in the separate folders but then we have other components as feature grid and teaser which are nest stable components and these create or the blocks which you can be used on different pages and from that we have the name the story block so we have a stories and the blocks and together story block so the next table components can be added to any other component using using the field blocks and this means that you can create a never-ending a chain of nested components and the combination basically of all those comments create opportunity for building a very rich website and layout that you would like to and need to have so in this case uh the feature have only one field called name and it's typed text in the grid there is a field type block so that means that into the columns i can add a different uh other nest table components or blocks and i can like also restrict that only to a specific component so let's say i like i would like to restrict it only to feature and teaser not another grid then the teaser it's also only one field head headline with the text and the page is a field called body of type blocks that i can add any other component there pretty simple but still i didn't created that and i don't uh it doesn't help me exactly to show them in the next.js application and how this is working is that if you check the final rest api uh response then you see here that i have here the field body on the page component and the first uh object in this array is my uh teaser component here with the uh content uh hello toronto headline contains a hello toronto so this is basically this component here with the text and why i don't see here that probably is because i didn't create those components on the nakja's side so let's create them at first in nagjes to create them in the nigerians you do you you can go to component folder and just like code a default view as you would do normally but here i already prepare myself so i have here the feature the view we literally view just sorry taylor installing and also rendering the block.name i'm using the prop called block to send data to my component and this is like my pattern here and then here i have a v edit table which is you which is used in later to connect the story block editor visual editor with uh my component in the knack jess and then you can see uh outline of the components and the sections and if you click on them you can even see that the right content is will be open on the right side you will see that in the seconds and the teaser it's the same thing just blocked with headline blocker renders headline with little bit styling from the tailwind the grid is using uh basically the dynamic component which is uh which doesn't know if there will be a teaser or the future so we don't we cannot like say like hey okay always render the future so that's why we are using the default dynamic component here and then you can do like uh use the is and if the block.component is teaser we will be rendering the teaser if that will be right running the feature we will be rendering the feature so that's it here in the drive json basically the we are asking what is the value of this and if it is teaser if this will be teaser here then we will render this uh teaser here dot view file and a little bit styling from the uh tailwind as always and the last component is the page which is here and it's also using the dynamic component with the same price principle and additionally to that you can see that we are looping through the block.body so the the body of my page which contains all the components very very very easy and uh straightforward in my opinion okay so i created and explained my component let's register them so first of all i need to uncomment this code and also add it into next config i wanted to use a neckjs slash component plugins but it's uh not possible with the dynamic component this is a like little bit still in the working progress so let's save it and let's hope that everything is working and building let's take a little bit time so i will be so okay my next was built and uh we should uh should check our local host if everything is running and uh we still see the welcome screen and the reason why we don't see the components and what we wanted to is because we didn't ask uh or we didn't we didn't request any data from the story block and we will do that in the index.uh view and pages uh right now uh this could be like a bit done and also like a little bit more common but for this purpose it's enough so let's open the index.view file and close this two other component files and now we remove the first the welcome screen html uh then i'm going to uncomment my code which will be doing nothing else just like uh dynamically asking itself okay what do you want to do render here and in my case it will be the page uh then i will not need any more logo so i can remove the logo here uh then i have here a little bit code from myself to load the data and then i don't need to have any styling anymore so let's save this and we should see a change and yes but the website was updated and we see my our content it's pretty simple but here we can already click we see the outline this is the we edit table i mentioned and this is working only with the draft content because in the production content we don't see all the identifiers so i can click here and you can see that on the right side uh it's uh changing the prairie of the component i am i want to do so like this is like feature number three i can change the teaser to something else and i can save it and after save i see even the reload so how does does this exactly working so in the index view i'm like set up in like my dummy data which is like empty story with the content then in mountain even i am listening for story for publish and change event and so these are the basically save and publish and if uh the save and publish happen then i will be reloading the website and under basically reloading uh the website uh there is like i think that's a function called or yeah defined which will ask for a storyblock api the content of the home story so that's here the whole this is like like statically asking always for the whole content but normally you would go for something like this you would go for this content full slogan you will find it out according to the route and your path you are currently on and the same thing goes for the version that usually for the preview or like uh localhost you will be using the draft content but if you would go for the production then you will find out like okay uh do i need a production content and you will render all the production content uh let's skip this uh here and basically then you will return the the data and that will be basically replacing my data here and that's all nothing else as you can see after save the content was changed but i think we can do even better because we have a modern framework like dark jazz or vue.js and uh what if i would be not listening for the save or change events but i would like say listening for the input and this is already possible because i have it here if i uncomment this part here and i will need to reload also my application then i can click into the hello world and write something like hello conference uh is this cool and i see live editing and why is this cool and why i think really that this is important is that uh this brings me to the another two features that i think are really important to anyone uh working with the cms and that's the real-time editing experience that you see what you are doing so uh you can like click around and then if you save then you are saving something that you are happy with you don't save because you want to prior your content and see like those partially updates and then you will basically pollute your versioning because here in the story block you have the versions i created and did some changes and you can see what did uh what i did and if i would save after every small edit to pray with my content like how is it look like on the mobile how is it look like on the ipad and how does it look good do i really want to have this hello conference do i need uh then i would have there a lot of small inputs and and then in the in the time it will be like basically the whole history would be unusable so this is why i think you and everybody like content editors we are writers uh and even the revive revivers sorry reviewers should uh save only if they are already like really uh happy with the final content okay but this is still kind of a hello world sample and i was like let uh i wanted to show you how to build a little sample of website with a featured articles so let's create a new article new component i i will jump back to the component section and create the article as the article in the future should act as the content type then uh uh it's here you see this is the article so i i make it our content type and i will create the stories and then in the future probably we will render uh websites from this article but for now i will just add there a few fields hero image uh title then give me a second i need to add there also intro outdoor and uh pros so where will be my text the video image as you can guess that will be asset and it will be image then the title the text is quite good so i'm not going to change that for the intro text i would like to just longer text uh without the any like styling the outdoors there are like many ways how to implement outer and i will go for the most simple one right now for single option and as a store source of the single option i would just uh define here a few options so let's do my name and let's add also a dominic and let's save it and the last one is the pros which will be like where we keep our text this is also like multiple ways how to implement this um but uh right now i would go for the rich text so i'm not a markdown i would really go for the reach because you're all the possibilities of doing a custom classes etc so i created my article which is a content type and right now the cool thing is also i don't have to create anything in the next jazz to start and tell my editors and writers to like hey you can create the content you don't have to wait for me till i will be done with my part in the front end so let's go to the content i will create for you a articles folder i will set up there that you can create their articles and then i will allow you to create articles so here let's create my first article yep and as i didn't create it any preview template for you you will see this error or you can close it and you will you can focus on the content so upload an image uh i prefer something nice uh okay then let's call it article number one article number one uh there are some text which i stole from nexus and choose the sum of the author and there will be my text later but i'm not going to do that and save it and let's create two more articles okay i created two more additional articles to save some time and now we would like to like feature these articles on the home page so what should i do or what we should do so in the content in the home uh i would like to create here in the visual pro a section that would feature those articles i just created but i didn't have i don't have any component here to use or that represents that section so what should i do is probably to go to component and in the components create one more component called fee uh featured articles and it will be next stable component this time so let's create that one and there will be only one field for now and it's called articles because we would like to like select some articles uh from our folder so let's add it there and as we are going to select the multiple of them then i would go for multi-option right now and as a source uh will be our stories created a few seconds ago and all we need to can can do also is like restrict it to a like specific folder which in this case is articles so let's save it and also we are done and we can go to the home page like our home and i can add already a featured article here so i can add it here i can even select all my three articles i can save it i can or even publish it and i can go and see that in the drafts public draft json i already have that component with the uids of those articles but as you can see i don't see that in the preview so what should i do what is missing here what is the step and the step missing is here is the neck jazz component so as you can guess i already created the featured articles there a lot of uh tailwind styling and basically here is the rendered also a title that i forgot uh to put into the schema and then there is a unordered list of articles uh where i am using the article teaser and i am going to send her some content from the blog so in the article teaser we are doing nothing else just rendering the title intro and the outdoor and here we are also like the rendering image the resizing the hero image we used we i'm using for that uh storyblocks image service to replace basically uh and like crop the image to 300 250 okay that works so this works and i need to also like register these components so let's uncomment these four lines these lines and now at this moment if everything is running okay we should see update on the home page and right now now we don't see images and i think it's because the ad blocker here so by pause on the side and let's do a reload and hopefully we will see also the images and here we see our images and there is also this yellow part uh which is basically uh our title so let's fix the title very quickly so here very quickly you can access also the schema of the component i can add the title i would like to like add it on the first place because the order matter always uh here i would like to put like featured articles save it and you as you can see basically these these are my articles already there and i even can change the order of them so it's as you can see here the article number one is the last one so let's put it on the first place and now it's in the first place i can save it as if i'm happy with it but the question is like how did i get the content and how did i get the content is a good question because as you could see in the drive.json i had only the uids like here so what did i do what did i do is basically in the index page i am asking to resolve some relations so here in the mounted event and also in the async data i am sending to storyblock api or telling them like hey if you find a component called featured articles and there is a few articles please could you resolve those relations uh for me because those are the relations to other stories and i would like to get that content and i do the same thing here in the mountain even that basically i will be uh resolving using the storybrokerage those relations and just getting the content from the storyblock which is much easier as to save it in the view and that was how i did it like in some older talks so and this is basically almost everything i wanted to cover today because we created a very simple sample and what you can do with this approach with this atomic or component-based approach is that right now i have a featured articles and if i would like to like copy paste it add it here i would like i can very easily create like samuel's articles oh i can write some mueller's articles and basically just uncheck the article that's not from me i can save it publish it and you can see that already like created a new component or content according to the content and i could also like add here a styling like uh make it blue or something like that or choose a different layout and then also we can go for preview and all that stuff as i said i'm very happy and this is almost everything so if you wonder what and you could do with that and you would like to continue where i left you right now so basically create a website with the hydra multi language uh with uh the big big hero area and also uh the sub pages you can go to storyblock.com.js multi-language website tutorial and just continue and create a beautiful website like you can see on this uh screenshot and that it's uh basically all of for me i'm really happy to be here i hope you like my talk you learn i i i you learn something today and you will be able to use it like in the future so one more time thank you very much to opportunity to be here and i'm looking for your uh questions and i can answer them on the twitter uh sms or you can damn me or you will find me on the discard in the next jazz or even the discord in the story block thank you very much and have a nice view jess [Music] toronto [Music] you

Channel: VueConf Toronto

Views: 2,133

Rating: 4.9166665 out of 5

Keywords:

Id: e51NNnQ_Kng

Length: 30min 31sec (1831 seconds)

Published: Sat Nov 07 2020