Fast & Furious - Going headless with Nuxt.js!

Hi everybody, how are you doing today? So I hope you are really enjoying the conference so far or you're enjoying the recording of the conference. So if you're watching this, probably you're watching the recording on maybe I didn't make it to the conference. So anyway, this is my talk. It's called headless with Next and we are going to look on headless world and the jamstack world and how it works with Next. And basically we will be building it from scratch to the point that you can deploy a website or your application with Next. And this, as I said, it's a hands-on experience. So my name is Samuel Snopko and why I'm talking to you is basically that I am also a headless head of the developer relations at Storyblog, which is one of the headless CMSs, I love headless CMSs in general. I was working with them for a few years and I was definitely using Next for already like five years. So I think it's the best match and it make and give me so much power to create so many websites and also like to do all the projects that I want to. I'm tweeting as Samuel Snopko and it will be cool if you follow me. So just jump there and go to Samuel Snopko and you can follow me in the case you have any questions during the talk, just write me there. So what we are going to do is I said, we are going to start from scratch and we are going to build the website or your project or application, whatever you are building with Next. You can check the code on this link and feel free to jump there, but there will be also like other links I will be sharing and you can get it. So the best way to start is the first question and as it is a very fast, it's kind of fast and furious. So you are going to, I'm totally recommend to use a Create Next app, whatever you are using, yarn or npm, just go for it, name project and just start. The point is that you will get always the latest information, the latest setup with all the packages you need. You just go through the step by step tutorial and the project is basically like this. This is what you will get and you also saw my notes here. And what does it mean? Basically, first of all, just run the localhost here and what does the localhost should do is basically start your localhost link. The localhost at my moment, it looks like this. I think I just recently updated the localhost of the Next so you may see a different screen and you can have a link to go to documentation of GitHub. And this is basically what you need. So your project is set up, just go through the Next Create app and you will get here ready to deploy. But still you just have the head only. You don't have a content. So for a content, I choose the headless CMS and in this case, I'm going for Storyblock. And Storyblock as a digital platform, a software as a service where you can create and set up your project in matter of the component. So you can get also the real video editing, but even you are able to still follow all the good best practices of the Next and you don't have to do any compromises. So what I'm going to do here is just create it from scratch. I'm going to do the duplication of existing space or play with demo and just really creating the stuff. Now I'm looking on my load where I have also some copy pasting and that I will basically don't do a lot of typos, but anyway, I do typos. So here just created a new project. And as soon as I created a new project, I can close the guide because I'm your guide today and you after this, you do also don't need a guide to be honest. So what you see here is basically the project or your space where you keep your content usually. At the moment, I have only one homepage or home representing the index page or homepage. And of course there are some other areas you could go like check the dashboard and what's going on in your project. But in this case, we just created it. So if I would like open the home, I would see directly the visual editor part. So you see that this is not set up. I have heard some like welcome message, but I also see on the right hand side that I have my component and I can start editing them. I could also like focus only on the component and get the default headless view that a lot of other headless CMSs have, but I am going to focus on the real visual editor today and we will do and use set up this. So we have at the moment a teaser. I could like change it to like, hello London. And I could like, of course save it. I could like publish it and publish. If there will be set up the webhook, that will be set triggering the webhook and the webhook build and starting the deployment on Netlify or Vercel or any other service you would like to use for hosting or your own servers maybe. Of course, there are a bunch of other features that I'm going to go through now and we are going to focus how to connect them first. So at the moment I have my content. I even see like what kind of content I would be getting. So probably it's, if I would be using the rest of the V2, I will be getting something like this in this case. And now I need to get this content to the story, to the next JS, because I have here still the welcome page. So this is my project and in the project, what you need to do next is just install a thing. You just, of course, you will be needing Axios. So using the create next app, just install Axios and then you will need the Storyblock next app module. The Storyblock next module, just install it using the npm or yarn and then jump to the packages to the next config. The next configuration quite well explained already in the next website and you really don't need to set up a lot here. So you, what we are going to set up today is just basically set up the module for the Storyblock. So in this case, you can see here that there is a Storyblock next module called and we access here, the access token. There are like a bunch of other setups, which we are our configuration, which we are not going to cover today, but now we need the access token. Also I would definitely encourage you to save the access token in.N file, but I'm not going to do that now because we just saving some times for a talk. So here is my first access token. But if I need, I can create, of course, as many access tokens I need and I can create a publish draft out cans and then also for different branches in the releases or ID apps. So here I just, I'm going to add my access token. I see my project is rebuilding. So at this moment, basically I should see, maybe I should see an update, maybe not. So let's see what's going on on the screen and on the screen, we don't see any, any update at all. And if you think about it, it's okay because the moment, the moment is just important as not that we are not getting error. So this is running and the building is taking a little bit longer time, but it should run. Yeah, it's running. So everything's running okay. And everything is prepared. So what is the next step? So we already created, we connected and we know it's connected, but we still don't see the content. And even if I go to storyblock, I told you like here is that, here is that visual editing part, but we don't see it here. So let's first head up this. So here you can see that this is saying your server address slash home. And this is like our iframe slash let's call it fake browser. And you can like have a multiple preview links for your different environment. But here I would like to see my localhost at the moment. So what I need to do is basically take localhost address and just going to set up it in the settings. So let's jump to the settings of the project. And here I will just rename the location, the default location. But if I would like to have here something special, like a development location, I can also add here maybe a Versa or Netlify link. So it's worked quite well. I just save it. And now if I go back to the content and open the home, I should see a change. And first of all, I see a difference here. I see error. In this case, the error is a good thing because we are getting the next.js error from this left corner. You can see that. So what does it mean? That this means basically that in my code, the pages, the router doesn't know about the home.vue website or the home slack at all. We didn't set up any router for that. So we need to point to the index page. We could do that like various ways, like setting up the directory max, but we know that the home page is make sense to name it somehow. So all we need to do is in the story block, say like, hey, this one story of this home represents the index page, which is living usually in the real part is just empty slash. So we just add here and override the real part for the visual editor. I suddenly see my preview of the next project and I can close my localhost tab. So now we will be using basically this view. So you see here, I still see only the preview. I don't see really the content I showed you here. I don't see any hello London text. I don't see any greet. So what do we need to do? So we need to first understand what are these components. So these components are the components from the story block. In the story block, you may set up as many components as you need. It's unlimited number. Really the only limitation is your imagination in this case. And you have two types. It's a content types and nestable components. The content types of course used to create the entries or stories in story block. So this could simple as like page, home page, article page, but also a stuff that is not represented by the page as an author that is like appearing on multiple pages. And the nestable components are the blocks on those pages. So let's say we have a header, a hero image, sorry, hero area or a slider or a different stuff. Like here we have a feature, greet, teaser. So basically exactly that stuff that you would be building using the atomic design and usually components that you have already defined in the vue.js or in the next project. So this 99th per case, person of cases, you get the same list and the next project and also in the story block. So here I have right now four of them just created by default as placeholders and the feature. So the feature, as you can see, has only one field, it's name. And if I click on the field here, I can change different field types. There is like default field types for rich text blocks, et cetera. You can check it out in documentation and of course you can always create your own field types. I'm not going to do that. So let's cancel it and not save it. Then I have a grid, which is a little bit special because here I am using a blocks type and this block type basically means that I can use any other nestable components inside this component and in this field. And I can, for example, set a rule like I am only allowed to use a feature. And this way you can create a never ending nesting of the nestable components inside the other components, whether they are nestable components or content types. And of course the page here, I just added here one field. You can add as many fields as you want. In this case, I just add a body because it's a page and the body is also type of blocks because we can add there any other blocks or components we already defined. And the teaser also has only one field, headline, very straightforward and the headline is type text. So what do we have on the next side? Because we don't see still the preview of those components. And the reason is that because we didn't render them. So how to render them? Like first we need to create them in Nuxt. So in the Nuxt, I am creating them. I already created them and you can see here I have a feature component, which basically render with tailwind styling, a name, a text. And the text or the content is I'm getting through the prop called block. And it's like just waterfall from the page level to going to the correct components or blocks. And then there is a special thing, which is called VED table. And this is because in the draft mode of the story block, we are able to enable the real time editing and see the real time editing as we are typing and clicking on the website. Just enhance my experience with the story block and editing the content. For the draft mode, not the production. That's important. The production is not touch and it's so fast as possible or as you can make it. The same goes then for, of course, for the teaser, we are just rendering the headline and same approach you will be seeing a lot of this block because that same thing is happening in this grid where I'm getting my content through the block. But here is a little bit a trick that I'm using a dynamic component from the view to render the dynamic component, because originally I didn't know if there could be a feature or a teaser or another type of the feature. So as I don't know what kind of components will come here, I have here the, I'm looping through the block called columns. So here you can see that this is the field called columns. I'm looping through this. And if I go to the content and show you that in the JSON also here in the REST api, we can go look for columns. We see that here is a component. Basically this component is called grid and it contains a field called columns and this columns held three objects and those three objects represent those three features, which you can see here in the grid. So and the same thing happens here. We just loop through them, find out what kind of type is. So block.component.returns me the type of the component. That's it here. That component is returning the feature. And if this block.component returns the feature, I know that I should render the feature. And this is the default behavior of the view. So this is a really powerful approach you can already use. What is next? So this, and then you just render the feature, quite simple. And the same goes basically for the page. We just looping through the components and through the field called body to its components. So that's the level of the highest. So this is the page. There is a field body and it contains at the moment two components, teaser and grid. So we know that in the order we are going to render them. Great. So still we didn't see them. And the reason why I didn't see them, we didn't register them in the next. So you can do that like multiple ways, like the old way, but the best way would do, I would definitely encourage you to do always at the moment is just go for a component. So you can just, for example, right here, components true. And now next will be automatically importing the components from the components folder if it's required. So in this case, we should slowly see a change here, but we will not see it because we still didn't request it. The data from Striplock, we just connected the Storyblock to the next project, but didn't requested it. So we need still call and use the Axios error, call the api. So do that. We need to jump to the page, index page in this case. And this is also what I'm doing is only in this sample, you can abstract these functions and then reuse them on the many pages as you need. And they're like, I have workshops, how to do it, multi-language or other stuff like this. So what I'm going to do here is maybe I will do a little bit bigger is that I am going to remove basically the stuff here. So this stuff, let's make it a little bit bigger that you see it as the original welcome screen from the next project. So I don't need it anymore. So let's remove it. I added my code. So in this case, I'm finding out what kind of component type I want to render. In this case, I could replace this also with a page. I know that I'm not going to render a logo. Then I will do some, my code, so requesting some data. And basically I can remove all styling. So what is the data or my script here? So my script here is just setting up the skeleton of my data. So like what probably I'm expecting. And then in the async data hook, I'm requesting my data. I'm using the Storyblock api, which was installed by the Storyblock module already. So on the context.app, I have Story api. And here I'm asking for the home content. I'm asking statically for home content and not dynamically because I know I'm on the index page in this case. But in the real world, you will be able to find out the full slack of what you should request on Storyblock by, for example, this line. And the same goes also for the version, because at the moment we are asking for the draft version only. But in the real world, if you go for production, you're going to find out like, should I get for production content or should I get the draft content for Storyblock? So exactly something like that, you will find out the version. And this is basically just asking data. And then in the case we get the data, we will return them to the data and we should see them. So if now everything is rebuilt, yes, we see our content. And this is quite cool. We can like start to edit it like hello view. We can save it. And still we have to reload it to see the update. And this save and reloading is basically polluting our history here because every time we have to like reload and see the preview, we will create a new version of our content, which is a little bit tricky. And I think we can do better with the view and next. So what I mean is that in the mount hook, hopefully call it correctly, we can initialize the Storyblock bridge. The Storyblock bridge is a little bit joust, right? It's also like partially installed already by the Storyblock module. And here you can create the Storyblock bridge instance. And then in the Storyblock visual editor, with the draft mode of the content, we can listen for the events from the visual editor. So those events are of course the into publish and the change. So the publish and change are like basically save and publish. And the input event is anything what you do directly in your content editor here. So if I save it and let the next rebuild really quickly to rebuild, which is look like it's already done, we see that instantly our preview is enhanced. So what does it mean and what's good? This is really cool because we are not only able to add a little bit like outlines and identify our component, which is a little bit css we adding to the now development environment, but we are also have like clicks here. So there's like the connection. And if I click on the feature two, the right content is open on the right hand. I can start and this doesn't work only one way, it works also the other way. So if I start to change the hello, for example, back to the hello London, or I would like to duplicate stuff. So like say I would like to duplicate the hello London on the bottom or maybe I would like to like move this backward. I can start and do a lot of features that are really, really handy to my content editors, content creators, all the marketers, they want to experiment and create this stuff. So like say they would try it out if the six feature was worked so they can duplicate and they can preview it on the mobile screen. They can preview it on the tablets. You can, they can go also like a little bit more dynamic. And then in the upcoming V2, that's even better the visual editor and it's has an even more a more features and power of powers. So yes, this is what you can do very quickly without the saving. And now I am saying only with the version I am really happy about and publishing also on the version I am super happy about. So what does it mean for me is that I spend less time trying rebuilding and seeing and previewing and really doing and focusing on the content. Yes, this is at the moment only a hello world. So what I promise you a little bit more probably. So let's create something more because I still have, I think a 10 minutes. So let's do that. So let's create a components. I have here prepared a little bit help on the left side and we will be creating the articles and we will be featured of articles on the homepage. So to do that, at first we need to create an article. So we will define how the article would look like. So this is the component article, which is a content type. So we will be creating a real articles. I would like to have here a title. Yes, title is good. Then I would love to have a hero image. I would love to have intro and outro, intro, outro and the prose. This is where we will write our text. There is many ways how you can define the article. This is like the basic one. So the title, very simple. I will just keep it text. I could make a translator or I could require it. Let's require it. Then the hero image. I would love to probably have an image. So let's choose asset and go for image. In the case of intro, I would love to have a longer text. So, but we tell the options, chatted it a lot. I would also replace the upper order. Then outer, I would like to choose outers. Also many ways how to implement it. I'm going for single option at the moment because there should be a single outer and I'm just going to get a name of it. So I'm going to define the outer here, but I could also raise the outers of other stories or external sources or whatever I would like to. So here I will add a sem and I will add a dom. And then the last thing I need a prose. In this case, I'm going to use a rich editor because I love more rich editor than the markdev because I can use their custom classes and also add components inside. So now I've created a schema or definition of my article, but still I don't have the preview of it. I don't have, I cannot render it. That doesn't mean in the headless world and the gem stack that you are blocked and you cannot create articles already. So I am going to add option to my writers to create articles in the articles folder. And I would love them to only create the article types there. So let's add article. They have a folder now and I can add here the article number one and I just very quickly create a new one. I don't have any preview. So next is basically saying, Hey, you, I don't know what do you want to render. So let's focus on the content and I'm going to upload the stuff. So let's upload the image number one here. And of course I could like set the, like this focus point and other stuff there like change crop, change the filters because we offer also the star image service. I'm getting some content and here I would like, of course, write my text. There's many ways how you can set up it. So let's save it and let's create two more articles very quickly. So I will going to duplicate the stuff, just say a two duplicate jump there. And I'm going to only change the images because I would like to see something, uh, uh, real as a change. So here, and let's make a story blog is cool for now and out a little bit dumb. Yes. Save it. So let's go back and, uh, uh, the one more article I said, and that will be our number three, not four, of course. So duplicate create, and sorry, I'm spending a little bit more time maybe on this as I should. Maybe I should pause, uh, but, uh, but you, London is cool and let's keep me out outer. So let's save it. Now let's go here and let's publish all three articles. Uh, sorry, here is the publish button. It's publish it. And now I would love to see, uh, no, there, I would like to go to homepage. So I now will have to see on the homepage, uh, featured those three articles here. So how to do that? Because I don't have a component for it. I'm going to create on the feature gradient teaser. So what do you need to do is, uh, of course I now, uh, have luckily, I, uh, lost almost my project. So I need to create here and new stuff. So I need to create a component called, uh, featured articles. So it will be featured articles. It will be nestable and this nestable, uh, articles will be of core articles that I want to pick by hand. So instead of having that, uh, and I want to pick multiple, then so I'm going for multi options and as a source, I'm going to choose a stories that are coming for the articles folder. So let's save this. And now if I go to content, I still didn't render anything. I can go to the home. I can go to add block. I can see all the featured articles and I can add them on the bottom and nothing is happening here. So hopefully I didn't do any, anything wrong, but as I'm already adding those, you can see that they are adding as a little typo. So, uh, the things, why they are adding and there's rendering is that because I have the code already in this next and the auto, uh, import of the next is already knows that, ah, okay. He wants to render this. So what do you need to do now? So what I did in the next basically, uh, because I now can create a feature articles. I can like move them around and I basically have a website or a component that I can use. So let's save this and jump very quickly to code. So in the code, basically I just created also a featured articles component here. I just rendering a little bit of title with some style. And then of course I'm rendering a list, an ordered list of my articles where I getting my content from, uh, that, uh, call here, I getting the blog articles I'm looping. So exactly, uh, here you see, I'm looping this, uh, field articles. And yes, this is something that I would normally get only the UIDs, uh, of those articles, because thanks to the resolve relations here, here in the featured articles, and also here in the call of the api, I am able to resolve instead of getting, um, IDs, I'm getting the content of my articles. So if now I go to the articles, which is maybe a little bit confusing, I'm just rendering a three article teasers. I didn't create the article teasers in the next, but that's not a, not the issue because I am just making another layer of abstraction directly here in the next project. And here are the article teasers rendering basically image and it's even resizing it. So it's using the story block resize image to resize it to 300, 250, and then the render title intro and outer with a little bit, uh, styling from the tailoring and that's it. So if you have a featured articles, uh, we now could fix this title. So let's very quickly fix this. You can also define schema here, so I get a title, I think it was called. So save schema and say, uh, featured articles. And the, the really nice feature about it is like now you can reuse that featured articles component. And for example, I can copy paste it here. Oh, sorry. Uh, I just wanted to copy paste, not select it's on the top. So I just not jump here. Uh, Dom is in middle. So let's remove the article from Dom and call this a Sam's article. Uh, you can save it, publish and website is deploying that. And I just created something very quickly as, and that's, I think also you can follow how fast you can develop with this approach, your comp, uh, your, your stuff. So if you want to want to know more and you maybe want to finish it to the stage like this, uh, which is on your screen at the moment, also with the multi language, you can go to the storyboard.com slash DC slash nice next JS, where you will find the ultimate, uh, next next, uh, slash view hub for the story block and the next. And you will not learn only about the connection between storybook and view and next, but also get a references to interesting next articles. Also, for example, how to build a videos, which was built also using the story block. Uh, and there's a seven part tutorial there. So just go there and try it out. Also I want to thank you, the story, the organizer of the conference. I want to thank you to the next team, to the view team and all the teams outside there who are building this products because we speakers usually getting on the cherry on the top on the cake. And behind all of these is like many, many, many people who are spending their time saying with study blocks. So if you want to make them happy, like tweet about them, uh, say, thank him. That's really, really important. I really, it's, it's always gave me energy to continue and follow them on the Twitter likes follow us on story block or follow me on Samuel's story block. Oh, sorry. On Twitter and ask us questions. We are happy to answer. And additionally that I have one more, uh, surprise for you. You can go to the storybook.com slash a slash UJS live minus two, uh, 2021 perk, which, uh, will give you a three, uh, three months premium, but as far as I know, it was changed to a different name is not an premium account, but you will get a more expensive account for free for three months to try. Usually you get only 15 days of trying every time you create a new space. And the one last thing before they saying like final, thank you. Just check also the storybook version two coming with all the cool new features like the new visual editor, and you can get a new, you can always, uh, it's already in public beta. You can give us a feedback and we are listening for your feedback. They were asking your feedback and we really want to create the best experience for the modern frameworks like next and view, uh, to, to, to like enable us developers to not spend time on the creating content and back end, but really nice website and applications. Thank you very much. And see you somewhere soon in the life. Ciao.