Coding

Storyblok and Nuxt.js | Behind the Scenes of Academind

  • 00:00:02 welcome to this video in this video I
  • 00:00:05 want to take a tour behind the scenes of
  • 00:00:07 academy.com
  • 00:00:08 with you we'll have a look at the core
  • 00:00:10 technologies used by US which is vue.js
  • 00:00:13 with Knox Jas and story bloc as a
  • 00:00:16 content management system that's really
  • 00:00:19 interesting we'll take a look at this
  • 00:00:20 and I want to explain how we built this
  • 00:00:23 website and why it works the way it does
  • 00:00:25 work so let's start
  • 00:00:30 so here's a ketamine calm the starting
  • 00:00:33 page of it and if you haven't visited it
  • 00:00:35 yet definitely do so you can never get
  • 00:00:38 around read our articles watch our
  • 00:00:40 videos this is how it works now let's
  • 00:00:43 take a look behind the scenes this is
  • 00:00:45 the project the source code of
  • 00:00:48 academy.com
  • 00:00:49 it's a next jazz project and therefore a
  • 00:00:52 view J's project and of course the heart
  • 00:00:55 of it basically is the pages folder here
  • 00:00:58 all the pages of our application of our
  • 00:01:01 webpage are set up we got that learned
  • 00:01:04 page which is our most important one you
  • 00:01:07 reach it by clicking on learn or the
  • 00:01:09 content is actually also shown on the
  • 00:01:11 starting page and then there we got all
  • 00:01:13 our topics and for each topic we got our
  • 00:01:16 content pieces like articles with a
  • 00:01:18 video or just an article or just a video
  • 00:01:21 and this is the structure you see here
  • 00:01:24 the learn page with a nested topic page
  • 00:01:27 which in turn has the content page the
  • 00:01:31 topic page for example is the page
  • 00:01:32 showing all these content cards so this
  • 00:01:38 page here that would be the topic page
  • 00:01:40 this index dot view file now here I am
  • 00:01:44 as I said using next Jas and view J is
  • 00:01:48 their fourth and as you can see in the
  • 00:01:50 code already I'm of course using loads
  • 00:01:53 and loads of custom components which are
  • 00:01:57 stored in the components folder as in
  • 00:01:59 any Knox project now here we get tons of
  • 00:02:02 components for all the different things
  • 00:02:04 which are rendered and displayed on the
  • 00:02:06 screen and unfortunately I can't really
  • 00:02:09 make that source code available but here
  • 00:02:11 I just built tons and tons of components
  • 00:02:13 each component is a single file view
  • 00:02:16 component single dot view file so to say
  • 00:02:20 has its own template which may consist
  • 00:02:23 of our components or basic HTML building
  • 00:02:26 blocks has some script logic here and
  • 00:02:30 then the styling which is attached to a
  • 00:02:33 given component this is the core
  • 00:02:35 structure nothing spectacular really
  • 00:02:37 just how an AK stand view application
  • 00:02:40 works but might still be interesting to
  • 00:02:42 see this behind the scenes
  • 00:02:44 now besides all these pages and I will
  • 00:02:47 come back to how we fetch the data in a
  • 00:02:49 second besides all these pages if we
  • 00:02:53 have a look at the next config you see I
  • 00:02:55 use a couple of modules X yes to make
  • 00:02:58 HTTP requests but then also PWA
  • 00:03:01 to conveniently turn this into a
  • 00:03:03 progressive web app we of course also
  • 00:03:06 track you with Google Analytics because
  • 00:03:08 we want to know how you work on that
  • 00:03:10 page how you behave on that page what
  • 00:03:12 you like and what you don't like so this
  • 00:03:15 is the code and obviously we could now
  • 00:03:18 dive super deep into that and analyze
  • 00:03:21 all the code I wrote here but ultimately
  • 00:03:23 these are just view components the
  • 00:03:26 interesting part in my opinion is the
  • 00:03:29 data how do we store and manage our data
  • 00:03:33 did we write the back and for this on
  • 00:03:35 our own how is it loaded into this page
  • 00:03:37 and how do we ensure that its search
  • 00:03:39 engine optimized so first of all we
  • 00:03:43 didn't create our own back-end we're
  • 00:03:46 using storey block instead storey block
  • 00:03:50 is an API based headless content
  • 00:03:53 management system which means it's a
  • 00:03:56 content management system that gives you
  • 00:03:57 an admin interface a nice UI where you
  • 00:04:01 can create your content write your
  • 00:04:03 articles link your videos and so on and
  • 00:04:06 which should then fetch where you then
  • 00:04:08 fetch the content why are a P I request
  • 00:04:12 unlike WordPress where the views the
  • 00:04:15 front end is really baked into the
  • 00:04:17 system story block is a headless system
  • 00:04:20 it focuses on the data on your content
  • 00:04:24 and it follows a component driven
  • 00:04:26 approach so that you can really clearly
  • 00:04:29 define how content looks for you
  • 00:04:31 how does an article look like does it
  • 00:04:33 have a title creator a preview text you
  • 00:04:37 can set all of this up and we will take
  • 00:04:39 a look at our story block project in a
  • 00:04:42 second and you can then fetch it in your
  • 00:04:45 next front-end by sending a HTTP request
  • 00:04:48 to your to a certain API endpoint given
  • 00:04:51 to you by story block to get your data
  • 00:04:53 in the form of an array full of Jason
  • 00:04:58 full of JavaScript objects in the end
  • 00:05:00 and then here on the front that I just
  • 00:05:02 transformed it a little bit and
  • 00:05:03 ultimately store in this case here to
  • 00:05:07 load a topic because remember this is
  • 00:05:10 this topic page here and the content for
  • 00:05:14 this topic it's stored here in content
  • 00:05:16 elements so this is densha's data coming
  • 00:05:19 from the back and from story block a
  • 00:05:21 little bit transform and then I use it
  • 00:05:24 here to simply loop through for example
  • 00:05:27 all my content elements create this
  • 00:05:29 custom component for each of them and
  • 00:05:31 passed information which I extract from
  • 00:05:33 that story block data to that component
  • 00:05:36 this is how the data is rendered to the
  • 00:05:39 screen with my own front-end totally
  • 00:05:42 built by myself not coming not made
  • 00:05:45 available by story block but populated
  • 00:05:48 with data stored on story block now why
  • 00:05:51 did we choose story block and not create
  • 00:05:52 this on our own because here we don't
  • 00:05:55 have to manage anything the data base is
  • 00:05:57 managed for us security is managed for
  • 00:05:59 us the caching is done for us and it's
  • 00:06:02 really really fast so they're doing a
  • 00:06:04 great job when it comes to caching data
  • 00:06:06 all of this managed for us and all we
  • 00:06:09 have is just a nice UI where we can edit
  • 00:06:12 our content in a really convenient way
  • 00:06:16 now before I dive into this just a brief
  • 00:06:19 word about search engine optimization
  • 00:06:21 since this is a nextstep we can pre
  • 00:06:24 render it and we are actually pre
  • 00:06:26 rendering it in a static way which means
  • 00:06:29 that we render all the routes to HTML
  • 00:06:32 files at the end of our development
  • 00:06:34 process so we regularly publish new
  • 00:06:37 versions of our page where all pages are
  • 00:06:40 pre rendered as HTML pages and once you
  • 00:06:43 visit them you're back in a single page
  • 00:06:45 application but we're not running this
  • 00:06:47 on a server we're also not running it as
  • 00:06:50 just a single page application but all
  • 00:06:52 the pages are pre-rendered the config
  • 00:06:56 for this is written in the next conflict
  • 00:06:58 ojs file here there in the end we have a
  • 00:07:01 function where we make an API request to
  • 00:07:04 the story blog API and then transform
  • 00:07:06 the data to extract all the different
  • 00:07:08 pieces for the different pages we got to
  • 00:07:11 then really render all the pages
  • 00:07:14 dynamically even the pages which we
  • 00:07:16 haven't hard-coded in here but which are
  • 00:07:18 only defined by the content on the
  • 00:07:20 backend that's why we fetch the content
  • 00:07:22 so that we know which pages need to be
  • 00:07:24 rendered and then all of that is done
  • 00:07:26 here so that we always ship a
  • 00:07:28 pre-rendered version so that the Google
  • 00:07:30 crawler sees what you see and that you
  • 00:07:32 also quickly get a page and don't have
  • 00:07:36 to wait for it to fetch and load in your
  • 00:07:38 browser so this is how we do search
  • 00:07:41 engine optimization but back to story
  • 00:07:44 block how does this work
  • 00:07:46 if you log in and you can create an
  • 00:07:48 account for free
  • 00:07:49 if you check the pricing there is a
  • 00:07:51 starter package available for free get
  • 00:07:53 everything you need to get started if
  • 00:07:54 you start you will see this screen story
  • 00:07:58 block things in spaces and you could
  • 00:08:01 translate space with project or
  • 00:08:03 collection of content like here are a
  • 00:08:06 ketamine space there we have the general
  • 00:08:08 dashboard with the tokens that are
  • 00:08:11 required to make these HTTP requests the
  • 00:08:15 different subscription packages and then
  • 00:08:18 the heart the content now in our case we
  • 00:08:21 got the learn section and then we got
  • 00:08:23 the different topics here as content
  • 00:08:27 pieces if you want to put it like this
  • 00:08:28 and each content piece here has the
  • 00:08:32 different content elements like articles
  • 00:08:36 and videos and so on as sub folders you
  • 00:08:39 could say but the topic itself is just
  • 00:08:42 some content to find by us if I click on
  • 00:08:44 compose here you can see and you may
  • 00:08:47 ignore this error by the way we'll fix
  • 00:08:48 it in a second if you click on compose
  • 00:08:50 you see this is how we configure a topic
  • 00:08:53 with a title and image image I can
  • 00:08:57 explanation video which is laying a
  • 00:09:00 short explanation text and this is not
  • 00:09:03 defined by story block they're not
  • 00:09:05 forcing us to define our content in this
  • 00:09:08 way this would be really inflexible
  • 00:09:10 instead we're using the second big
  • 00:09:12 feature of story block components you
  • 00:09:15 define your own components so the
  • 00:09:18 structure of your data if you want to
  • 00:09:19 call it like that for your content like
  • 00:09:23 for example here the top
  • 00:09:25 that is what we just had a look at topic
  • 00:09:27 is a component where we simply defined
  • 00:09:29 that we will have these properties if
  • 00:09:31 you think in JavaScript objects these
  • 00:09:34 would be your object properties and you
  • 00:09:36 can easily add a new one like this enter
  • 00:09:39 a name and then pick the type of value
  • 00:09:42 you plan on storing and depending on
  • 00:09:44 which type you pick hear the story blog
  • 00:09:46 you I will help you like for example if
  • 00:09:49 you choose image here you will get an
  • 00:09:51 upload button and the image will
  • 00:09:53 automatically be stored in an assets
  • 00:09:55 folder for you on storey blocks servers
  • 00:09:58 so you don't have to manage that if you
  • 00:10:00 pick number you can only enter numbers
  • 00:10:02 if you pick markdown you get a text
  • 00:10:04 editor with some formatting controls so
  • 00:10:07 this is how this works and how you can
  • 00:10:09 work with components now besides these
  • 00:10:12 root components like topic or content
  • 00:10:15 would be another one we also got nested
  • 00:10:17 components like content text this is
  • 00:10:20 simply something like a nested object in
  • 00:10:22 a javascript object now content text
  • 00:10:25 only has text so maybe not the best
  • 00:10:27 example but content image is of
  • 00:10:30 component where we manage our images in
  • 00:10:33 our articles we have the image property
  • 00:10:36 which is of type image which gives us
  • 00:10:39 this nice upload button we define our
  • 00:10:41 alt text and then the dimensions and all
  • 00:10:44 of that can be fetched from the front
  • 00:10:45 end and can be used to render it
  • 00:10:47 correctly there and we do use it like
  • 00:10:49 that we do use that alt text as the alt
  • 00:10:52 text we render to the screen and we do
  • 00:10:54 use the link that is ultimately stored
  • 00:10:56 here for the uploaded image on the front
  • 00:10:58 end to let's have a look at this let's
  • 00:11:01 also fix that error that we had this
  • 00:11:03 error message in the middle here let's
  • 00:11:05 have a look at the web dev trends 2018
  • 00:11:07 article there we still get that error
  • 00:11:09 and that really is just stemming from a
  • 00:11:11 feature story block offers us we can
  • 00:11:14 connect our page to that story block UI
  • 00:11:17 so that we get a live preview of what
  • 00:11:20 we're working on and for that I'll start
  • 00:11:22 my app here in development mode so
  • 00:11:25 locally on my machine I'm not connecting
  • 00:11:27 it to the live version because I won't
  • 00:11:29 see changes there because we have to
  • 00:11:31 publish them before they appear there
  • 00:11:33 but for the development version we see
  • 00:11:35 the changes right away and if I now
  • 00:11:37 reload that
  • 00:11:38 Paige you see a preview here and even
  • 00:11:41 better than that set up correctly you
  • 00:11:44 can click into a field and start editing
  • 00:11:47 it and this actually is also possible
  • 00:11:50 for images and here we see that content
  • 00:11:53 image component I showed you a second
  • 00:11:55 ago here you see some of the fields are
  • 00:11:58 filled out and for example because I
  • 00:12:00 chose the type image for that image
  • 00:12:03 property
  • 00:12:04 we got an upload button or we can choose
  • 00:12:06 one from the collection of images we
  • 00:12:09 have on that account so this is how this
  • 00:12:12 works and how we can conveniently work
  • 00:12:14 with the content and again this is in
  • 00:12:16 development mode my project is
  • 00:12:19 configured to automatically show in
  • 00:12:21 development mode content in the
  • 00:12:24 development mode of our project but once
  • 00:12:26 I hit publish it would also be visible
  • 00:12:28 on the live version of the website so
  • 00:12:30 academy.com and all of the configuration
  • 00:12:34 stuff and how you connect your project
  • 00:12:36 to story block can be found in the story
  • 00:12:38 block docks and you can of course find a
  • 00:12:40 link in the video description this is
  • 00:12:43 why we work with story block it's really
  • 00:12:45 easy we can just focus on the content we
  • 00:12:48 can get a live preview we can edit our
  • 00:12:50 content we can publish it and that's the
  • 00:12:53 coolest feature for us maybe
  • 00:12:54 besides the speed which is awesome we
  • 00:12:57 work with components and we work with
  • 00:13:00 components in the front and – and you
  • 00:13:02 don't just work with components if
  • 00:13:04 you're working with next or view or
  • 00:13:06 angular or react you can basically think
  • 00:13:10 of any web page consisting of components
  • 00:13:13 it doesn't matter if you use a framework
  • 00:13:15 that calls it a component if you got
  • 00:13:17 reusable building blocks which you use
  • 00:13:20 in your webpage beat it a single page
  • 00:13:22 app or a server rendered one or beat it
  • 00:13:24 a mobile app you probably have reusable
  • 00:13:27 pieces of content and story block things
  • 00:13:30 just like your front-end which is why it
  • 00:13:32 is a really good fit for us and which is
  • 00:13:34 why we use it and I hope with that
  • 00:13:36 you've got a an overview of how we built
  • 00:13:40 academy.com it's a next view application
  • 00:13:43 with a powerful back-end that is exactly
  • 00:13:46 tailored to our needs but not because we
  • 00:13:49 pay so much money to story block
  • 00:13:52 because it's how story block works so if
  • 00:13:54 you were building a comparable project
  • 00:13:56 you might want to give it a try of
  • 00:13:59 course you might also build your own
  • 00:14:01 back end or find a different solution
  • 00:14:03 that works better for you but this
  • 00:14:05 component based approach is really
  • 00:14:07 powerful and I hope this was a nice
  • 00:14:10 brief glimpse behind the scenes of
  • 00:14:12 academy.com
  • 00:14:13 if you found this interesting definitely
  • 00:14:16 let me know and we can for example build
  • 00:14:19 somehow comparable project in the future
  • 00:14:22 using story block and some front end
  • 00:14:25 like viewer next so hopefully see you
  • 00:14:28 there bye