One thing you'll notice in the StoryBlock editor now is that you are still looking at the local dev server for the preview. Notice the URL here still says localhost 3010. For those editors who aren't developers and won't have the dev environment running on their local machine, we need to instead point this preview at our live site. Well, with StoryBlock, we can actually do this really easily, and we can actually support multiple different preview URLs at one time.
To do that, I'll go to Change URL here, and then click Add or Change Preview URLs. Now, in addition to the default environment up here of my local host, I can add multiple other preview URLs and give them a name. Let's call this one Live, and then I'll set it to the actual URL for my live website. We can grab that from Netlify.
Also, it's very important with these preview URLs that you add the slash at the end. Otherwise, the preview will not behave appropriately. Awesome. So now I'll just click add, save, and go back to the editor view for my homepage.
Now we're pointed at gracefulsable blah blah blah dot Netlify dot app. Awesome. And if I click change URL here, you can see that we have quick and easy access to our different environments. Best of all, our homepage preview is still working fine.
However, let me show you what happens when we try to create a brand new page, for instance, adding a new project. To do that, I'll come over to this little arrow here next to where it says Home, and then you can see this is another way to browse our content. Here I'll click on Projects, Then I'll click plus to add a new project. Let's call this one the egg scrambler and hit create.
Wah wah wah. Sadly our page is now not found even though the URL for the project looks correct. html file that's been statically generated under slash projects slash the egg scrambler. So what do we do about this?
To tackle this issue we can take advantage of the additional query parameters that StoryBlock adds to the preview page. So here I am in the StoryBlock documentation and you can see exactly what those additional parameters are. We have an underscore StoryBlock parameter and then a bunch of others that kind of give some more information about the setup of StoryBlock. But really all we need to know is that we're inside of the StoryBlock editor.
and so just looking for the existence of this underscore story block should do us just fine. We can combine this with Netlify's ability to define our own custom redirects in an underscore redirects file. As you can see here, their redirects file can give us very fine-tuned control over our URL matches with query parameters. The example shown here is having a slash store URL with the query parameter of ID equals my blog post.
And then using underscore redirects to redirect that to slash blog slash my blog post. We can do something similar by saying anytime the underscore story block parameter exists in the URL, I want to redirect to the homepage of our website. html will always exist at the root of our site. Then at that point, if the static page delivered differs from the hydrated SPA that actually comes from the URL itself, then Nuxt will take over and display the proper page.
The location in our project that we want to put this underscore redirects file is inside of a directory called public. This is a special directory of Nuxt. and anything that lives in here will just be copied over to the dist directory in our built project, which is exactly where we need the underscore redirects file to live in order for Netlify to recognize that it exists. So in the built-in terminal, I'll add the change to my GitHub repository, commit it, and push it to GitHub to be redeployed by Netlify.
Back over in the Netlify dashboard, I should be able to see the new deploy. And yeah, right here we've got new deploy, add Netlify redirect. Let's hop into there and wait for it to finish building. Once the build is complete, we can go up here, refresh the page.
And as part of our deploy summary, you'll be able to see that one redirect rule was in fact processed. That means that Netlify was able to properly find our rule and understand it without any issues. Let's head back over to story block now to create another new project and see if we get a different result than before I'll call this one the micro Wait Perfect. This time the 404 is gone, but we did see a quick little flash of the home page Let me refresh the page so you can see that one more time.
That's the statically generated home page But the JavaScript side of things scraps that pretty quickly and shows us the proper page based on the URL. And I think this is just fine for our internal editors. Nobody on the actual published site will see such a thing. Cool.
To end up this video, let's just fill out this page with some proper information. This is the microwave. We'll add an image. And for the description, let's just say something like the friendly microwave who likes to say hi.
Cool. Now I'll save that and go add it to my featured projects. One thing you'll notice in the StoryBlock editor now is that you are still looking at the local dev server for the preview. Notice the URL here still says localhost 3010.
For those editors who aren't developers and won't have the dev environment running on their local machine, we need to instead point this preview at our live site. Well, with StoryBlock, we can actually do this really easily, and we can actually support multiple different preview URLs at one time. To do that, I'll go to Change URL here, and then click Add or Change Preview URLs. Now, in addition to the default environment up here of my local host, I can add multiple other preview URLs and give them a name.
Let's call this one Live, and then I'll set it to the actual URL for my live website. We can grab that from Netlify. Also, it's very important with these preview URLs that you add the slash at the end. Otherwise, the preview will not behave appropriately.
Awesome. So now I'll just click add, save, and go back to the editor view for my homepage. Now we're pointed at gracefulsable blah blah blah dot Netlify dot app. Awesome.
And if I click change URL here, you can see that we have quick and easy access to our different environments. Best of all, our homepage preview is still working fine. However, let me show you what happens when we try to create a brand new page, for instance, adding a new project. To do that, I'll come over to this little arrow here next to where it says Home, and then you can see this is another way to browse our content.
Here I'll click on Projects, Then I'll click plus to add a new project. Let's call this one the egg scrambler and hit create. Wah wah wah. Sadly our page is now not found even though the URL for the project looks correct.
html file that's been statically generated under slash projects slash the egg scrambler. So what do we do about this? To tackle this issue we can take advantage of the additional query parameters that StoryBlock adds to the preview page. So here I am in the StoryBlock documentation and you can see exactly what those additional parameters are.
We have an underscore StoryBlock parameter and then a bunch of others that kind of give some more information about the setup of StoryBlock. But really all we need to know is that we're inside of the StoryBlock editor. and so just looking for the existence of this underscore story block should do us just fine. We can combine this with Netlify's ability to define our own custom redirects in an underscore redirects file.
As you can see here, their redirects file can give us very fine-tuned control over our URL matches with query parameters. The example shown here is having a slash store URL with the query parameter of ID equals my blog post. And then using underscore redirects to redirect that to slash blog slash my blog post. We can do something similar by saying anytime the underscore story block parameter exists in the URL, I want to redirect to the homepage of our website.
html will always exist at the root of our site. Then at that point, if the static page delivered differs from the hydrated SPA that actually comes from the URL itself, then Nuxt will take over and display the proper page. The location in our project that we want to put this underscore redirects file is inside of a directory called public. This is a special directory of Nuxt.
and anything that lives in here will just be copied over to the dist directory in our built project, which is exactly where we need the underscore redirects file to live in order for Netlify to recognize that it exists. So in the built-in terminal, I'll add the change to my GitHub repository, commit it, and push it to GitHub to be redeployed by Netlify. Back over in the Netlify dashboard, I should be able to see the new deploy. And yeah, right here we've got new deploy, add Netlify redirect.
Let's hop into there and wait for it to finish building. Once the build is complete, we can go up here, refresh the page. And as part of our deploy summary, you'll be able to see that one redirect rule was in fact processed. That means that Netlify was able to properly find our rule and understand it without any issues.
Let's head back over to story block now to create another new project and see if we get a different result than before I'll call this one the micro Wait Perfect. This time the 404 is gone, but we did see a quick little flash of the home page Let me refresh the page so you can see that one more time. That's the statically generated home page But the JavaScript side of things scraps that pretty quickly and shows us the proper page based on the URL. And I think this is just fine for our internal editors.
Nobody on the actual published site will see such a thing. Cool. To end up this video, let's just fill out this page with some proper information. This is the microwave.
We'll add an image. And for the description, let's just say something like the friendly microwave who likes to say hi. Cool. Now I'll save that and go add it to my featured projects.