Importing and using npm packages on Wix Studio sites is fully supported with a seamless setup. By the end of this video, you will learn how to install and use the npm package PDF kit on your Wix Studio site. With developer mode enabled, click on the curly braces, then click Packages and Apps.
Next, click Install Packages from npm. All public npm packages can be found right here. We will search for PDF kits when considering which packages to install on your site. Some good indicators include packages with a large amount of weekly downloads that are well-maintained, established, and have good documentation. Suppose you are looking for an older version of a package. In that case, you can choose the version by clicking the three dots to the right of the package. Next, click install, and click the X to close. Now, you will see that the package and version are listed on your site. First, you will write out your back logic to create a new backend file. Click public and backend, add a new web module, and create a file called generate pdf.web.js.
This file will give you some boilerplate code and comments. You can go ahead and delete all of the code comments up to the import statement for this demo. You will also be using the media manager to store generated PDFs, so go ahead and import media manager from Wix's media backend, then create a const for PDF document and require the PDF kit npm package next modify the default function and give it a name of generate download link you can leave the permissions set to anyone this function will be what is called from the front end that starts the logical flow it will take one parameter of file name that the user will.
Define and will be an asynchronous process in the add a TR catch statement and Define a const of buffer that will result from a function called generate PDF. Now let's create the logic for the generate PDF function in this code we are generating a very simple PDF just for proof of concept, you can build the PDF to your specifications and even pass data to it from your site, for now we will hardcode a hello world example after we build the doc, we are returning a buffer, which is one of the accepted ways to upload to the media manager, which is what we'll do next the full documentation for the PDF kit will be linked in the description when you are writing code that has multiple steps, it is good practice to test each piece of functionality as you build to test that you are getting a buffer back in your main function, add a return statement for the buffer, then you will see a blue arrow to the left of your code to run this function, click on that then you can add testing parameters here and click run to test your code you should see the data a buffer comeb back in the result next, you will create a function to take this buffer and the userdefined file name and then upload it to the media manager then using the upload method on the media manager API, you will declare the folder location for your files and pass the file and some other media options the full documentation for media manager will be in the description of this video next updates your return statement in the main function so you can test now that you get the file back from the upload call the last step will be to generate a download link that we will pass on to the users so that they can retrieve their file add one last function, and we are going to call the get download URL method and pass the file URL returned from the previous upload response and finally do one last test to make sure everything comes together as expected on your backend now that your backend code is tested and working, you will want to open your frontend code file on your canvas make sure that you have an input with an idea file name and a button to generate the download that is disabled now at the top of the code file import your PDF function from the back end then inside the on ready first you will listen for input into the field and check if the input is valid when it returns true, the button will enable that will trigger the PDF generation to start the validity rules for the input can be added via regular expression in the field settings here, I'm doing a simple check for regular characters, but you may want to modify this for your use case on click, we will update the state of the button to say please wait and disable the button while the download link function is being executed an improvement to this would be to create a loading animation while the user is waiting when the URL come back we will then add the link to the button update the text and enable the button again so the user knows that the download is now ready now, let's run the code to test it when we enter a file name, we can see the button becomes active, and on click we can see the button States change and finally our new PDF is ready for download working with npm packages like PDF kit allows you to bring in external functionality easily to your Wix Studio sites to be able to test ideas and build complex applications quickly if you're interested in continuing to build out a more robust PDF functionality, I will leave some comments in the code in the repo so that you can keep going. Let us know what else you would like to see in the comments, and don't forget to like and subscribe for more developer content.
