Nuxt, Medusa, TailwindCSS Crash Course

hello there I haven't uploaded a video in a while but today we have it as you can see there's a little bit of a change in my background here and here somewhere two of my cards are in the background for today's video today I will be building a very simple e-commerce website with maxfree Tailwind CSS and Medusa let's go welcome to the live coding session of this next Medusa taiwin CSS crash course if you are looking for a written version of this crash course make sure to check out the article that I wrote for devtool that you can see right now on the screen my application is already running in here in the background on the port 3000. to connect to Medusa we will be using the NAX Medusa module this is the module that I created few days ago I'm and I'm pretty happy about the fact that I can use it today in the video next for the styling we will be using nag stay with module and for optimized images we will be using next image we will change the default PNG or jpeg images into more performant web p finally what we will do is we will deploy our application to Verso so that it is accessible from anywhere around the world my application is already running and it doesn't have any modules installed yet or nor any plugins so what we will do right now is we will stop the server here and we will start installing the modules let's start with Medusa and by the way those modules they have pretty similar approach in terms of installing them so what I will do here is I will go to get started I will copy this command yarn at dash dash Dev Max Medusa and I will paste it here however that's not all because apart from though that what we will do is we'll go to table documentation and as you can see here the method is quite similar so what I will do is I will just copy the name of the module so that we can install other modules the same way and next image Edge let's click enter and let's install all modules the next step for each of these modules is to add them to the modules array in next config.js file or dot TS file so I will copy this and in my nextconfig.ts file here I will paste it and also I will paste the next day wind and also next image for next day wind and for next image they will work right now without any configuration however for next Medusa what we will need to do is we will need to add the Medusa URL that is described right here in order to be able to fetch the data from the Medusa e-commerce platform by default if you are running Medusa on your local environment it will probably be running on localhost and port 9000. however for the sake of this tutorial what I will do is I will use the playground Medusa playground URL and we will also use the same playground for our deployment in versa so let's create a new DOT EnV file here and just save this so that we won't have any issues later and what I will do right now is I will copy this Medusa URL and the value which is https API demo Medusa commerce.com this is the official Medusa playground that you can check it out check out as well one more thing here which is also described in the Medusa documentation about the course by default Medusa store Medusa e-commerce platforms expect storefront to be running on Port 80 000. so what I will do is I will also add one more environment variable called Nitro port so that our application by default will be running on Port 8000 instead of 3000. so right now we have the modules registered in our next config.ts file we have the environment variables so what we can do right now is we can try to test it out in our application in up.view component just to see if the and Medusa module is working as expected so script setup lung equals TS and in here what I will do is I will just copy this two lines here and I will explain them in a minute so what they do is they will first of all we will register a or call the use Medusa client composable and what we'll get out of it is the client the client that will allow us to fetch the data from Medusa and just below that we are using this client to basically fetch the list of products so what we can do next next let's maybe just console log these products console log products so let's try to run it yarn Dev and see in the browser how it works and how it looks like 3000 is no longer working which is correct we need to go to 8 000. also important stuff make sure to not make a type of as I did here it's not skipped it's script it should be now working let's run it again and see if it works we have the welcome page from next let's see in the console what we get from the client so what you could do here is we could even go one level deeper and just say products so that we can get the nested products and in here we see a list of seven products that were fetched from Medusa so what we could do right now is we could create two new pages in view one will be responsible for the home page or the category page or basically the list of products and the second one will be responsible for displaying data about one certain product so let's me let me just clear this out for now and in here instead of Max welcome we'll use next page okay so we have the next page created so what we need right now is we need to create a new folder called pages and inside of these Pages we'll create two view Pages New View components that will act as pages one will be index.view and basically in our case it will be a home page that will also display a list of products so I will create a new script tag with setup and lung equals TS and inside here I will just use the same logic that we had in before the step before in the update view so I will have the client here and from the client I will fetch products and specifically the list so that I can get the some certain amount of products next I will create a template section or template tag in below that so you have template and in here I will copy some code from my previous tutorials for the product list so let me get through it quickly we have a section that has a display flex and inside of it we have we are looping over the array of products to get one certain product and this product will have an image which will be next image so this image will be optimized we will do that in a second as a source for that image we are passing the thumbnail this is by the way the structure of Medusa object or Medusa product object so thumbnail is responsible for the image next we have the product title we have the price which is the price for the first variant and specifically the amount and just below that we have description so if we save that and we move into browser we should see yeah we should see the list of products however if we inspect the image here you will see that this image is actually or maybe it will be better to see it in the network tab especially if we filter it by images you will see that all of these images are actually pngs so what we could do here is we could utilize the next image to have more performant images to have better format like webp so in here what I will do is I will say format equals web P but this one will not work yet because in order to make it work what we need to do is we need to set the certain domain in that next image can optimize images from it is described here in the configuration and inside here you have domains so we need to do something similar I will copy this and I will close this up because this won't be needed this won't be needed as well in here just below the modules array I will create this image um object and inside domains here I will instead of next jsorg I will pass this starting path here so Medusa public until.com and I will paste it right here so what should happen right now is instead of this SRC we should see yeah something like this so it's proxied for the local ipx instance and thanks that what we get is right now we have the images in the webp format so they should load much faster so we have our product list so right now they don't act exactly as the product list because we can't really go to the product detail page we need so to have the links and we also need to have the product detail page so right now we will add the list at the link component around this whole product item and we'll also create a new page that will be responsible for displaying the data about certain product so let's go to the code and in here what we will do is we'll wrap this whole Thief with a next link and we will copy all of this inside and this next link it will have a two two and it will also be dynamic because in here what we will have is we'll have string interpolation so in our case let's say that the path will be slash P for products and Slash will be product Dot ID let's save it and let's see if it works so right now we see in the top in the bottom left corner we see that each of these elements of product cards when we hover over them we have a link to slash B slash prod something something let's create a folder called p for products and in here what we'll do is we will go with ID Dot View and this tells view or next that this will be a dynamic parameter that we will get from the URL so let's save it and for now let's just do script setup blank TS and use the router so const or reuse root instead so we have root use root or even we can get from here params so let's go to template and in here just display the params.id so we'll go with p and params.id let's see if it works so when we click on the first element okay so this not oh it works okay I needed to reload the application so in here we see this ID that was passed as a parameter so right now what we could do is we could actually fetch the data of the certain product and for that I will be using a different method from the same Medusa client so I will just copy this in here but instead of going for clients.products.list I will instead use another method here called retrieve which will retrieve only one product based on the ID so as a parameter here as you can see I can pass the ID so I will just pass this ID here and this is probably yeah because this is um parameters from view router can be either string or a an array of strings well this retrieve expects only a string so we will just go as string because we are sure that it will be only one string and from here what we can do is we can just go with um let's say result for now just to see the structure of it here okay so as you can see the structure is quite big so we will go probably with product it will still be quite huge but what we can do here right now is to create a product detail page that so that the data will look a bit nicer I will copy some code once more from my previous tutorial and I will just input some data so let me just format it with print here so that it looks better we have the div wrapper around our product detail page we will have the image but we can change it to next image and as a source we will pass product images which will be the first image and the URL and we will also change format to webp below that we will have the product title and we will have the product description and finally we will also have a button that will just say pay and a certain amount of the certain price for the product so let's just save it and let's see how it looks like so as you can see here we have the product image we have product title product description and this button that's also displays the product price let's go to the home page once again and let's try to fetch the data about this different products so let's go for this cool Medusa mug and we see title description and the price and obviously the image so at this point I think we have this sorted out so what we need to do ask the last step is to basically just deploy this very simple e-commerce application to Verso so we'll go to Verso but first I forgot I'm always forgetting about this we need to push this code to the Repository so I will just add all of this and I will stop my server and I will say git commit and I will say feature um working up I would say git push so it will push the code to the Repository and right now this repository should be visible here yeah so we have Max Meadows that they wind we will import it very cell automatically recognizes the next JS as the framework for our application root directory is okay we don't need to edit that we don't need to edit any build configuration or commands because these are selected by default and they are they're basically working the last thing we need to do is we need to add the environment variables and we have as you remember we have two of them we have Medusa URL and Nitro Port so what we'll do here is I will just copy the content of this.env file and as you can see here I can paste the dot in V above to populate the form so let's see if it works and it works we have metaza URL that points to the Medusa playground and the night report so that our application is running on Port 8000. I think that's it let's click deploy and see if it works okay congratulations as you can see by the confetti our app was successfully deployed let's see it we have the product list here that are fetched from the playground and when we click on a certain one we will see the product detail page and that was it we have just built a very simple e-commerce website with next free taiwin CSS and Medusa just two final notes for my site first of all you don't need this Nitro Port environment variable for your um vessel deployment it's not needed I just copied the whole file just to show you that you can very easily copy the whole dot EnV file in there and another thing maybe you have noticed that some of the products were disappearing after certain amount of time it's because of the course policy that doesn't allow um websites with certain domains to access the Medusa playground so I explained at the very beginning of the video and we managed to have a workaround for it by setting a port for next application to 8000 however in our production application we have this like nag stay wind medusa.versal.app domain which is not registered in course settings for the Medusa but it can be easily fixed with setting this option in your Medusa configuration see you next time

Channel: Jacob Andrewsky

Views: 5,346

Keywords:

Id: EuakPz8M7CM

Length: 23min 4sec (1384 seconds)

Published: Wed Mar 08 2023