Nuxt 3, Algolia, Storyblok, and TailwindCSS Crash Course

hello there in this video I will be doing another recorded live coding session but this time I will be building a very simple digital experience platform so digital experience platform platform is a website that is getting data from several different third-party services so for example from a CMS like a Content management system or search engine or image provider like digital Asset Management so in this video I will be building a digital experience platform with nox3 as icms I will be using store block at the CMS for the search I'll be using algolia and I will be using also very simple image processing with next image for styling I will go with tagline CSS and finally we will deploy our app to Versa let's go okay welcome to this live session so we will be building an app that is actually inspired by the article I wrote for storybook so the apple looks will look like will look more or less like this so we will have the gallery of cuts that will be fetched directly from Star block CMS and we will also have the cuts that will be fetched from algolia so we will have both sources so we'll have CM content from CMS and from the search engine but also what it will do here is we will use the indexer from the algolia module so that we will be able to and populate the index in algolia with the data from storyblock so for example whenever we update the content in storyblock it will also be updated in algolia so that we will have the same data in both places I have already generated a very simple next free project it doesn't have any modules it doesn't have any other dependencies it's just the simple application and what next I will be using a headless CMS as I mentioned the store block and I have already created the home page as well as some components specifically cut image component and this component will have three Fields Title ID and SRC both title and ID will be just simple text type while SRC will be an asset because we will be storing images of our Cuts in storybook so when we go to content and home here and ignore this for now we will add the live preview of our app in a minute but let's take a look at the content here because we already have three Cuts here each of them will have the ID the title and the SRC which will be the image from our asset management in storyblock so each of these cards will have a different text and the image as well in terms of algolia the index I prepared for this tutorial is empty for now but as I mentioned we'll be using the indexer from algoli module that you will be able to populate this indexer with the data from this space in storybook we'll be using next statement module for adding some styling to our app as well as next image to get the optimized image images we'll be using the official storyblock module for next by the storyblock team for algolia we'll be using the nux algoria module which I'm really proud of because I created this module for nux from scratch so most of these functionalities were actually written by me and finally we will publish the app to Verso so that it will be live I'll be going through these documents so that I won't forget any steps but we will do each of them in the code as well and there is also a GitHub repository available but I will also publish a new repository out of this video the the code that we will write together in this live codec session um okay so what we will do first first let's add Tailwind because we will be using it in all places in our app so let's add it right now and we will also add as this is dash dash Dev dependency we will also add the image as well here next image let's add it like this and wait a few seconds for them to install and in the meantime we can also install storybook next not just yet okay and install but normally this time story block next and the algolia module at next JS slash algolia let's wait few seconds to load them okay there is some error app because I suppose it's at store block not just third block okay let's add daywind to our modules array and it will be here I will just change the spacing here to two so we have Tailwind CSS module here we will also add the image module here as well so let's make it separate lines like this we will also add the storyblock module storybook next but we will create an array here and as a second parameter we will pass the configuration which will be the access token like this and we'll be using environment variables for connecting to both store block and algolia so process.env dot story block access token like this and to configure next algolia we'll be doing very similar approach so next algolia and as a second parameter we will pass the configuration which will be which will need API key and the application ID which we will also get from the environment variables process.env.algo yeah API key and in here process .env dot application ID I will add algolia here as a prefix I'll go your application ID okay that's supposed to be all in terms of the next config because we aren't passing any significant configuration to type in CSS and our image Edge or we will see maybe we will need to add some domains to the image module but we will add them later um okay let's add the environment variables so to get the access token from Star block we need to go to the settings and access tokens here I will copy it and create a new file here called Dot anv and I will paste the value here and just copy this one for Simplicity so it will be story block access token equals the value of our token for algolia I need to go to settings and API keys and in here I will have the application ID and the search API key I will also need a admin API key later to populate algolia with the data from store block but for now let's just use application ID and search only API key so copy this here algolia IPI key and algolia application I did it the other way so this is actually application ID and this is API key okay it seems that we have all the basic configuration for the application to work let's add the what else do we have here configuration is done and we can just test it out so let's go to app.view and in the script setup lung equals TS and let's use algolia just to test it out whether it works so we will just copy this and I will explain a second what it does um we will also need to get the result in the template right here we can also get rid of next welcome so in here what it will do is it will call the use algolia search composable that has a param accepts the name of the index that we launched the fetch the data from so in here we have test index so it is not the same index as we have here because in here we are using and the the XP index so just test it out I will be using the test index that contains some dummy eCommerce data for easier testing and later on we will use this dxp which is currently empty I'm structuring both search method and the result and on amount unmounted lifecycle hook I will be just searching this index test index with this query so I will just search for results that contains or hits that contains the keyword Samsung and I will just display the result here so let's start the server and see if it works okay so it seems to be working let's check it out localhost 3000 okay so we have a lot of data here like as you can see it's like yeah a lot so basically this is what is the result of fetching this 400 hits with the Samsung keyword so you have Samsung Galaxy here Samsung Galaxy here Luna and so on and so on so it was it will it fetched all these results here by the query so we know already that this part of the app works so the next step would be to test if our storyblock application works so let's go here and just yeah we'll do something similar here just to test it out so we will copy this it's not as easy to copy and just below this one we'll go with await use store but this time it will be used async story block and what else let's just go here and in another div just show this story what is the value of this story let's go to localhost and see okay we don't see much of the difference we see a lot of data here so let's divide them with just a simple H2 data from storyblock and just below that let's go with data from algolia okay there is no big difference in terms of styling because we are using Taiwan CSS so let's just quickly add um text to excel and the same here so this data like this data here was fetched from the Star block while this data was fetched from algolia so we see already that we have data from two different sources but right now they are like they are not integrated with each other they are just two different sources so we have data about phones from algolia and data about cuts from storybook uh right now let's add yeah so we added store block so we are fetching already the cuts so let's create this cut image component so to make this look a bit better so I will just copy this component here for easier coding so folders components and we will create cut image.view and let's go through this together and I will just take this script and put it higher like this so we have the script setup and we just defined two props SRC and the title so SRC will be source of our image like cut image and the title will be just the title of the cut for example cut the dog or chill cut or whatever else I put into Starbucks but right now it is just a normal image it's not next image so we will replace it in a minute but let's take this and in app.view let's just um I believe this is supposed to be cut image gallery yes so I will copy this as well and create cut image gallery which will be just a gallery of cuts and ignore the typescript complaints about the Styles I will not focus on this right now just for the sake of Simplicity of this tutorial which is already quite advanced and so in this we'll add some styling like very simple styling and we will be just outputting the cut images for how many images we will get from the props um going further we will just use this here and in our app right here instead of just displaying the whole story of storyblock we will just go with this so we will have cut image gallery and as an image prop images prop we'll send story content body and if we go to storyblock here to our content and this page here we will we can go to here and choose draft Json we'll see the same data that we fetched in our application so we will have the story and we will have content and the body somewhere here yeah body here so this is the data that we will fetch and we will map over this body to get the cuts so let's save it we can close cut image gallery and cut image because we won't be using them right now let's see it in our browser so we see here that we have this three cute cuts cut images here displayed and this is the content from store block but as I mentioned right now we can't see the preview yet because we we haven't configured our local server to work with https which is a required thing in storyblock 2. so I will do that in a minute so we will just copy this because I have already installed mksart I will right after add both this and the second one second certificate to the git ignore so that it won't be pushed to the repo and the next step would be to create a local proxy that will proxy our HTTP 3000 up into https so it will proxy this requests to this request to This Server so let's create a new terminal here and just go yarn depth and yes so right here if we go HTTP localhost 3000 it works and in here if we go if we change the url here to https and 3010 save it and go to content and home we can see the preview of our app so you have the same content here and here awesome um what else we can do and just to show you how the preview works we can just [Music] how do I change it I can add another one so let's add a new cut here and we see the preview so we can add new Cuts as well so here this one it's really nice but we won't see this here yet because we haven't saved the file yet the new design so when we click save and let's see here we have new cuts right below the free first cuts so we have this like possibility to get the images or Cuts in general content about the cuts from storyblock just to make it a bit more performant let's go check the images here so they are jpegs from a story block so what we could do right now is we could as we already like installed the next image module let's replace the image here with the next image so next image and what else um foreign we have the SRC but what we want to do here is we want to format the image from JPEG to webp let's save it and see it here when we refresh the page and inspect this one we see that it doesn't work and it doesn't work because we haven't configured the domains this is what I mentioned so if we go to the documentation of the next image and we go to configuration and I believe here yeah domains we need to add the star block domain here in the image configuration why because we have to let module know that this domain is like this store block domain is an acceptable domain to process the image from so we will no we'll just go this and here image and we will add domains but not next JS Arc we will add the domain this one here a DOT storyblock.com we don't need https so it will be a DOT storyblock.com save it and let's see our images right now so we have some of the images are broken for some reason let's inspect that in a minute but as you can see right now we this those images are now proxied through the local ipx instance so when we inspect them here and we go with images we will see that this card dock is actually a webp format not jpeg but for some reason this cute cut doesn't work so we can't get this image to be formatted for some reason ipx fetch error now there's are no logs in the console don't really know what can be causing this like the error is not quite explanatory um okay let's leave it for now as the normal image oh yeah let's let's go with this one because some of the images can be processed what else let me go back to the article so in here we have quite similar result so what we will do here is we will use the um the indexer yeah but for that and to make it work we need to add the indexer option to the store block to Algeria module sorry so in here with algalia we have Ipa key API key and application ID and as a third configuration option We'll add indexer and storyblock so this indexer will actually fetch the content from storyblock and populate algolia with it so that in our app here we won't be getting uh sorry here we won't be getting the data from the this dummy eCommerce index we can just then go with the the XP which is the index that was prepared that I prepared for this video so uh indexer secret this can be anything so let's go with indexer secret and let's go with secret very secret one algolia admin key we need to add it right below and I'll go the index name and the storyblock access token so store block access token is already here so we don't need to add it but we need to add the admin key and the index key so index name sorry index name will be just EXP and the admin key in algolia will be API keys and just this so it seems that we have all of the stuff here let's save this all and see let's also clear the query and just see what results we will get here so we see no results and this is correct because by no I mean that there is like hits which is the results of Mongolia is empty and it is empty because if we go to this index here and we go to dxp it's actually empty but right now with the indexer enabled because we have added this here we can also uh populate the algolia index with the data from Starbucks so let's do this right now and it will work in a way that it's explained here in the in this section so if we access this API indexer we will be able to populate our app or the algolia index with the content from Starbucks so if we go like this it won't work because we need to send a script the secret that we provided here so we will create a secret equals Secret and we see the result algolia indexed indexed with the data from store block So This Server middleware what it did under the hood is it updated our index in argola so let's check it right now as you can see here we have three or even Five results of the cuts so all these data was fetched from storyblock CMS and it was added to our algolian index so you can already think of this as the solution for your next up so for example an app that will be powered by CMS and you want to have very fast search results by algolia so you can have both of them connected by this approach and if we go right now to our app and just go to 3000 once again here we will see the data about our cuts but they don't look great this is just a raw data so what we'll do right now is we will just display the same array of cuts but with the data from algolia and where is it where is it where is it I it will be oh it seems that I forgot to add it to this article so what we'll do here is we will go to app.view copy this cut image gallery and here copy it paste it instead of this div but as the images we will pass the result and it will be hits let's see it in the browser we have the images from Starbucks actually I will revert this next image because it seems to not work correctly so I will delete this and go with image like this so we have the cuts so as you can see we have the cuts from storyblock and we have as well the cuts from algolia it also means because right now what we have done is that for algolia we have just fetched all cuts however and you can see the reason here because as a query we are passing just a simple empty string but what if we want to filter it for example go with chill because this cut is actually named chill cut so when we type a query chill we will just see the chill cut here what else [Music] I think that's will that will be it the app is not very Advanced as I mentioned in just an gallery of cut images but actually what is important is that they are we are getting the data from one source we are populating another source with the data from the first one and we are also fetching the data from here which is up to date with the data from here and right now it's not the best approach because each time we update the content here in storyblock would have to go to here and API indexer which is not the best approach and because we don't want to do it manually so what you could do instead but I won't be going through it right now just for for you in the future is you can go here to storyblock and configure web hooks so when this story will be published or unpublished or data source will be saved you can configure the webhoop so a request that will be sent to a certain page and the certain endpoint so in here with our deployed app we could just say uh VV my app slash API slash indexer and in here you also need to pass a secret like this so it will mean that after adding a new data source or publishing a new story we will also trigger this indexing functionality from algolia module I think right now the last step to do is just to deploy this app to Verso just to see how it works and we will need to add the environment variables there in order to make it work so let's just also in the console here we see the message from the algolia module that the inks index will start with five new entries so five cuts from storyblock um yeah the final step here will be just to push this code to the repository deploy it to Virtual and add this environment variables here so that we can use the app so let's close it let's get add git commit working up let's push it to the repo and let's go to Verso and go to import git repository and I will go with the one next story block algolia television this is the one that I created for this video so we will import it the process is very similar we have very simple the preset will be next the root directory and the environment variables here we will add these environment variables from our DOT EnV file so I am just copying them here and algolia API key here and the value add application ID and this one and we will also add the secret as well as its value and also the admin admin key and the index name as well just for the future at so let's deploy and see if it works in the meantime I'll go to the article and just see if I haven't forgot anything but I don't think so yeah I think everything is included we have the array of cuts from storyblock and the cuts from algalia as well so let's wait a few seconds more okay so it seems that our project is working but for some reason it shows 500 cannot read properties of null reading hints let's inspect that Network fetch all let's see all so we have 500 hmm properties of no reading hits so what it means is that this result does not contain the hits for some reason um what could be the issue here let's close this for now maybe let's add a question mark here maybe this will help oh okay so the issue I think was this question mark that it needs here needed here because at certain point the result is empty so we have our cuts and as you can see we also don't have the image here it's probably because of the same issue with the 403 yes for some reason starblock doesn't allow us to get this image not sure why but it can happen um what is important is that we have deployed the app to Versa that is fetching the data from Star block that cuts here and it's also getting the data from algolia here that was populated by the indexer we also try to make it work with next image so right now what we could do as this third image doesn't work anyway we can just go to components and in here go with next image close this one and go with this format of webp and just push it and next image format push it and let's see the result after pushing this so we'll go to this project and we'll wait for this commit to be built okay so this deployment seems to be okay let's check the app itself so we have the images so it looks very similar to the previous approach but if we go here to image source we will see that these images are actually proxied by The Vessel um personal um personalization but um image optimization service so we will have in the network Tab and we'll go to images and in here we will see that the images of the cuts from Star block are actually webp format not the jpeg format that was like the initial value here as I mentioned the third cut doesn't work for some reason but this will be it that will be it for this video and I hope that you will like this approach because I really enjoy working with next storyblock algolia and other tools here mentioned here as well let me know in the comments what next videos you would or next projects you would like me to build or videos to record and yeah see you next time

Channel: Jacob Andrewsky

Views: 1,579

Keywords:

Id: MQGIxPmgSCM

Length: 41min 2sec (2462 seconds)

Published: Wed Oct 26 2022