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 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 the 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 of develop relations at Storyblock, 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 what I want to. I'm tweeting at Samuel Snopko and it will be cool if you follow me. So just jump there and go to some Snopko and you can follow me, in the case you have any questions during this 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 a project or application or whatever you're building with. You can check the code on this link and feel free to jump there, but there will be also like other links that 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. I'm totally recommending to use Create Next app. Whatever you are using, Yarn or NPM, just go for it, name it 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? First of all, just run the localhost. And what the localhost should do is basically start your localhost link. The localhost at my moment 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 setup. 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 the content I choose the headless CMS and in this case I am going for Storyblock.

And Storyblock has a digital platform and software as a service where you can create and set up your project in matter of the components. 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 am going to do here is just create it from scratch. I am going to do the duplication of existing space or play with demo and it is really creating the stuff.

Now I am looking on my load where I have also some copy-pasting that I will basically don't do a lot of typos but anyway I do typos. So here just create the new project and as soon as I create a new project I can close the guide because I am your guide today. And you after this you 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 here only one home page or home representing the index page or home page and of course there are some other areas. You can go check the dashboard and what's going on in your project but in this case we just created it.

So if I would open the home I would see directly the visual editor part. So you see this is not set up. I have here some 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'm 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 then publish. If there will be set up the webhook it will be set up with triggering the webhook and the webhook build and then starting 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 will be getting so probably it's if I would be using REST of the V2 I will be getting something like this in this case.

And now I need to get this content 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 anything. Of course you will be needing Axios, so using the Create NUXT app just install Axios. And then you will need the Storyblock NUXT module. The Storyblock NUXT module, just install it using npm or yarn and then jump to the packages to the NUXT config. The NUXT configuration is quite well explained already in the NUXT website. And you really don't need to set up a lot here. So 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 NUXT 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 a .nf file, but I am not going to do that now, because we just saving some time for the talk. So here is my first access token, but if I need, I can create, of course, as many access tokens as I need, and I can create a publish draft tokens, and then also for different branches in the releases or IDAPs.

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 or maybe not. So let's see what's going on on the screen. And on the screen, we don't see any update at all. And if you think about it, it's okay, because the moment is just important, 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, 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 visual editoring 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'd like to hit here, something special like a development location, I can also add here maybe a versa or Netlify link. So it's works quite well, I just save it. And now if I go to the 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? It means that in my code, the router doesn't know about the home.vue 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 in various ways like setting it directly in Next, but we know that the home page makes sense to name it somehow. So all we need to do is in the story block say, like, hey, this one story or this home represents the index page, which is leaving usually on in the real part. It's just empty slash. So we just add here and override the real part for the real visual editor.

I suddenly see my preview of the next project, and I can close my localhost tab. So now we'll 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 grid. 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 the content types and nestable components.

The content types, of course, used to create the entries or stories in story block. So this could sample as page, home page, article page, but also stuff that is not represented by the page, as the author, that is like appearing on multiple pages. And the nestable components are the blocks on those pages. So let's say we will have a hero image. Sorry, a hero area or a slider or a different style. Like here we have a feature, grid, teaser. So basically exactly that style 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 person of cases, you get the same list in the next project, and also in the storyboard. 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, is name. And if I click on the field here, I can change different field types. There is a default field types for rich text, blocks, etc. 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.

And 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 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, whatever are the nestable components or content types. Then 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 added a body because it's a page and the body is also a type of blocks because we can add there any other blocks or components we already defined.

And the teaser also has only one field, a headline. Very straight forward. And the headline is type task. So what do we have on the next site? Because we don't see still the preview of those components and the reason is because we didn't render them. So how to render them? Like first we need to create them in Nuxt. So in Nuxt I am creating them, I already created them and you can see here I have a feature component which I basically render with Tailwind styling a name, a text. The text or the content 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 VUD 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 touched and it's so fast as possible or as you can make it. The same goes that for of course for the teaser we are just rendering the headline and same So you will be seeing a lot of this block because the same thing is happening in this grid where I am getting my content through the block but here is a little bit a trick that I am 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 feature so as I don't know what kind of components will come here I have here, I am looping through the block called columns so here you can see that this is the field called columns and 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 these columns have three objects and those three objects represent those three features which you can see here in the grid. And the same thing happens here we just loop through them find out what kind of type it is, so block.component is the type of the component that's it here, that component is returning the feature and if this block.component return 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 in 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 Nuxt 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 requested the data from storyblock we just connected the storyblock to the Nuxt project but didn't requested it. So we need still call and use the axios call the API. So to do that we need to jump to the page index page in this case and this is also what I am doing is only in this sample you can abstract these functions and then reuse them on the many pages as you need and there are like I have workshops on how to do it multilanguage and other stuff like this. So what I am 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 now let's make it a little bit bigger that you see is 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 am 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 the 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 am 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 modulator already. So on the context.app I have Story API and here I am asking for the home content. I am asking statically for content and not dynamically because I know I am 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 will be able to find out should I get for production content or should I get draft content for Storyblock, so exactly something like that you will find out the version. This is basically asking data and in the case we get 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 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 job, 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 on the, 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 is it mean? And it'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 developed environment. But we are also have like clicks here. So there's like the connection and if I click on the feature too, the right content is open on the right hand. I can and this doesn't work on the one way, it works also the other way. So if I start to change the hello, for example, back to the Hello London, 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 backwards. So 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 the stuff. So let's say they would try it out if the six feature was worked, so they can duplicate and they can play it on the mobile screen, they can play it on the tablets. They can go also like a little bit more dynamic and then in the upcoming V2, it's even better the visual editor and it has even more features and power.

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 publish 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 ten minutes, so let's do that.

So let's create a component. 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 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 outer, intro, outer and the prose, this is where we will write our text. There is many ways how you can define the article, this is the basic one. So the title, very simple, I will just keep the text. I could make a translate table 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. And in the case of intro, I would love to have a longer text, but without the options I changed it a lot. I would also replace the upper order. An author, I would like to choose authors, also many ways how to implement it. I am going for single option at the moment because there should be a single author and I'm just going to get a name of it.

So I'm going to define the authors here, but I could also raise the authors of other stories or external sources or whatever I would like to. So here I will add a SAM and I will add a DOM. And then the last thing I need a PROS in this case I'm going to use a rich editor because I love more rich editors in the markdown because I can use their custom classes and also add a component inside. So now I've created a schema or definition of my article, but still I don't have the preview of it. I can't render it, but that doesn't mean in the headless world and the JAMstack 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 will love them to only create 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, 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 act like this focus point and other stuff there. It's 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 two, duplicate, jump there. And I am going to only change the images because I would like to see something real as a change. So here and let's make a story blog is cool for now and author will be Dom. Yes. Save it. So let's go back. And there's one more article I said and the author 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, but view London is cool and let's keep me out outdoor. So let's save it. Now let's go here and let's publish all the articles. So here is the publish button. Let's publish it. And now I would love to see, I would like to go to homepage. So I and I would love to see on the homepage feature those three articles here. So how to do that? Because I don't have a component for it. I can create a feature gradient teaser. So what do you need to do is, of course, I now have luckily, I lost almost my project. So I need to create here a new stuff. So I need to create a component called featured articles. So it will be featured articles. It will be a nest table. And this nest table articles, I will be, of course, articles that I want to pick by hand. So instead of having that and I want to pick multiple, and 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 say this. And now if I go to content, I still didn't render anything. I can go to the home I can go to blog. 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 anything wrong. But as I am already adding those, you can see that they are adding. There is a little typo. So the things why they are adding and there is rendering is that because I have the code already in this next and the auto import of the next is already knows that. OK, he wants to render this. So what do you need to do now? So what I did in the next basically. Is 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 am rendering a list list of my articles where I getting my content from that call. Here I getting the blog.articles, I'm looping. So exactly, here you see I'm looping this field articles. And yes, this is something that I would normally get only the UIDs of those articles, but thanks to the resolved relations here. Here in the featured.articles, and also here in the call of the API, I am able to resolve of getting 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 an issue because I am just making another layer of abstraction directly here in the next project. And here the article teasers rendering basically image and even resizing it. So it's using the storybook resize image to resize it to 300, 250, and then render title intro and outer with a little bit of styling from the tailoring. And that's it.

So if you have a featured articles 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 featured articles. And 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. I just wanted to copy paste not select. It's on the top. So I just now jump here. DOM is in the middle. So let's remove the article from DOM and call this sam's article. You can save it, publish and the website is deploying. Done. And I just created something very quickly.

And that's awesome. You can follow how fast you can develop with this approach your stuff. So if you want to know more and you maybe want to finish it to the stage like this which is on your screen at the moment. Also with the multi-language you can go to the storyblog.com.tc.js where you will find the ultimate Next.js have for the Storyblog and Next. And you will not learn only about the connection between Storyblog and Next but also get a references to interesting next articles and also for example how to build a videos which was built also using Storyblog and this is a seven part tutorial there. So just go there and try it out.