com. Storyblock is a headless CMS that allows us to manage our content in a nice easy to use interface, but then consume that content via a REST API on any site of our choice. So in our case, our Nuxt app. If you don't already have a Storyblock account, go ahead and sign up now.
Or if you do have an account, you can just go ahead and log in. I've already got my account opened up. here in this other tab. So once you've created your own account, you should see something similar to this.
Now of course you won't have any existing spaces already, but it should look somewhat the same. Now the first step to setting up any new project in Storyblock is to create a new space. I can do that with the add space button here up in the top right hand corner. You can think of a space as all the content for a particular website.
Thus different websites or apps would get different spaces. So let's call our space my portfolio since we're going to be building a portfolio website and I'll click create space awesome Now we're presented with some steps to get started quickly, but we've already got our next project started So let's navigate over to the content page here. You can see here that we start out with a simple home page This is what's known as a story in StoryBlock, and every story that you make is going to be defined by exactly one content type. In this case, our content type is a page.
When I click into it, we get a preview of what it'll look like to edit our content. Over on the right-hand side is the panel for actually editing our content. We start off with a teaser that's set to Hello World, and we could update that to whatever we wanted, and hit publish to save it. Going back here, it also looks like there is a grid that we can edit.
And it contains different columns. One is a feature, another feature, and another feature. And we can rename those in any way we see fit. On the left hand side though is the really cool part.
This is where we can actually hook up a preview of our NuxJS website. so that it updates in real time as we make the edits on the right hand side. Here is that access token that I mentioned in the previous lesson that we need to hook things up. Let's copy it and paste it into our project.
Next, we'll want to tell StoryBlock which preview URL we want to use for our live previews. For me, that's localhost 3001. Yours might be regular old 3000 or something else. Back in the StoryBlock editor, I can come up here to this button that says Change URL.
Then I'll select Add or Change Preview URLs. Awesome. Let's go back to Content, Home, and this time we get a little message stating that HTTP is not allowed. So unfortunately, we can't directly preview our local host app because it's not being served over HTTPS.
As a workaround, we can do a couple of different things. html in our project with the following content. I chose to go with method number one of installing an HTTPS proxy. Now, I've already completed these first three commands here, as well as installed local SSL proxy globally via NPM.
So that just leaves this one last command for me to run in my project Go ahead and pause this video now and run through these steps yourself Perfect after running the local SSL proxy command with these proper arguments on there I have a secure URL in order to pass to story block I'll copy that and paste it into the story block interface and back to content home again Awesome. Now we can see that Hello World message that we have hard-coded in our app. The last thing I want to do in this video is actually get the proper content displaying in the app and show you the real-time updates. To do that, I'll use the StoryBlock composable that ships with that StoryBlock package we installed earlier.
I'll create my script setup section and then call use StoryBlock. Now I don't actually have to import this to use it. since Nux provides automatic imports for us, and the StoryBlock module is set up to take advantage of that. The first argument that I need to pass to use StoryBlock is the path for the content that I want to fetch.
For us, this is home, or the slug for the home page. The second argument is an options object, and for our case, all we need at this point is to say that we want the draft version of the content. Finally, I'll await the result of this composable, since this is making the actual request to the REST API. And I'll store it in a variable called story.
Nice. Now let's just print story out to the page so that we can see what we get. Back over in the browser, you can see this JSON being printed out to the page. And sure enough, let's see, we have a content property here.
And under that is a body property. And under that is our headline. Hello world updated. Nice.
Let's try updating this on the right hand side and see what happens. Sweet. In our Nuxt app, we see that the text updates automatically. js.
com. Storyblock is a headless CMS that allows us to manage our content in a nice easy to use interface, but then consume that content via a REST API on any site of our choice. So in our case, our Nuxt app. If you don't already have a Storyblock account, go ahead and sign up now.
Or if you do have an account, you can just go ahead and log in. I've already got my account opened up. here in this other tab. So once you've created your own account, you should see something similar to this.
Now of course you won't have any existing spaces already, but it should look somewhat the same. Now the first step to setting up any new project in Storyblock is to create a new space. I can do that with the add space button here up in the top right hand corner. You can think of a space as all the content for a particular website.
Thus different websites or apps would get different spaces. So let's call our space my portfolio since we're going to be building a portfolio website and I'll click create space awesome Now we're presented with some steps to get started quickly, but we've already got our next project started So let's navigate over to the content page here. You can see here that we start out with a simple home page This is what's known as a story in StoryBlock, and every story that you make is going to be defined by exactly one content type. In this case, our content type is a page.
When I click into it, we get a preview of what it'll look like to edit our content. Over on the right-hand side is the panel for actually editing our content. We start off with a teaser that's set to Hello World, and we could update that to whatever we wanted, and hit publish to save it. Going back here, it also looks like there is a grid that we can edit.
And it contains different columns. One is a feature, another feature, and another feature. And we can rename those in any way we see fit. On the left hand side though is the really cool part.
This is where we can actually hook up a preview of our NuxJS website. so that it updates in real time as we make the edits on the right hand side. Here is that access token that I mentioned in the previous lesson that we need to hook things up. Let's copy it and paste it into our project.
Next, we'll want to tell StoryBlock which preview URL we want to use for our live previews. For me, that's localhost 3001. Yours might be regular old 3000 or something else. Back in the StoryBlock editor, I can come up here to this button that says Change URL.
Then I'll select Add or Change Preview URLs. Awesome. Let's go back to Content, Home, and this time we get a little message stating that HTTP is not allowed. So unfortunately, we can't directly preview our local host app because it's not being served over HTTPS.
As a workaround, we can do a couple of different things. html in our project with the following content. I chose to go with method number one of installing an HTTPS proxy. Now, I've already completed these first three commands here, as well as installed local SSL proxy globally via NPM.
So that just leaves this one last command for me to run in my project Go ahead and pause this video now and run through these steps yourself Perfect after running the local SSL proxy command with these proper arguments on there I have a secure URL in order to pass to story block I'll copy that and paste it into the story block interface and back to content home again Awesome. Now we can see that Hello World message that we have hard-coded in our app. The last thing I want to do in this video is actually get the proper content displaying in the app and show you the real-time updates. To do that, I'll use the StoryBlock composable that ships with that StoryBlock package we installed earlier.
I'll create my script setup section and then call use StoryBlock. Now I don't actually have to import this to use it. since Nux provides automatic imports for us, and the StoryBlock module is set up to take advantage of that. The first argument that I need to pass to use StoryBlock is the path for the content that I want to fetch.
For us, this is home, or the slug for the home page. The second argument is an options object, and for our case, all we need at this point is to say that we want the draft version of the content. Finally, I'll await the result of this composable, since this is making the actual request to the REST API. And I'll store it in a variable called story.
Nice. Now let's just print story out to the page so that we can see what we get. Back over in the browser, you can see this JSON being printed out to the page. And sure enough, let's see, we have a content property here.
And under that is a body property. And under that is our headline. Hello world updated. Nice.
Let's try updating this on the right hand side and see what happens. Sweet. In our Nuxt app, we see that the text updates automatically. js.