Storyblok Tutorial #1: Fetching data

in this video i'm going to show you the fastest way how to use storyblock cms in your web project to create a new project we're going to create a new space in storyblock spaces are like projects and once it's created we're going to skip this demo step and also delete all the default components so let's select all delete we're going to create one component which we are going to use let's call it a page and it's going to act as a content type now we're gonna put some fields into this page component let's say we're gonna put the title to try out the different field types we're gonna put description as well description is going to be a text area not a classical text field that we can change in the edit field tab so we're going to just put text area and to showcase the different field types we're going to also use an image which we can set as an asset with the file type of images so let's save this schema and also put the title and the description fields as required that means that once you using this page component you need to put something into the title or description fields let's click on content and delete the default demo entry which we are not going to need let's create a new entry called landing page which is going to use the content type of page the component that we just created let's switch now in the config to form only so we can see the fields and now we can fill it out with whatever we want so let's put the title of hello world some random laura mixon paragraph and also an image from the asset folder let's save this and i want to show you the draft json this json includes all of our data from the landing page that means that we have here our title our description and also the image asset file with its file name if we look up in the url we see the name of our page which is landing page and all the additional data like the version which is draft the token and the cache version let's copy this url because we're gonna need this in our next step if we want to go to production as well in our application we need to publish the data and these drift or published data is accessible through the different api keys or tokens where you can see that we have a preview or a public now we are switching to our code where we are using view and width as our build tool and we're just gonna copy the draft json end point let's get rid of the cache version as we don't need this and we're gonna fetch this in our application once the data is fetched we can see that we have access to all the data from the draft.json or our storyblock page here just for preview purposes we're gonna put the data in the pretext so we can see that we actually have the same data as we saw in the draft.json we have this we gonna need only the story part of this so let's say story content and here we have in json format what we just filled in in storyblock and with that i have already accessed my data in my application so i will call data.title i will put in this paragraph data.description and for the image i'm going to map the image source to the asset file name that i saw in the data json these components were pre-styled by talvin css so they look okay here we have it now we can delete this json preview and to show you how easy it is to work with storyblock let's change the hello world to something else save it publish it and now as i refresh my application i already have the new data

Channel: LIFTED

Views: 3,081

Keywords:

Id: -fQB8FDYLSg

Length: 4min 23sec (263 seconds)

Published: Wed Mar 03 2021