Tutorial: button that downloads a zip file

Showcase
1

:information_source: [Used Gatsby framework] These days I tried adding a button which trigger the download of a zip file, and found that you can approach it as follows:

  1. Make sure your Button component root element is an Link <a> element, and have the link and download component settings (the gear icon while having a button component selected)
  2. In the code, Add the file you want to be downloaded on static folder:
    ◦ I added it on static/downloads
    ◦ :information_source: This can be done later, but for context makes sense to be here
  3. In plasmic UI, set the path for both link and download properties as follow: /downloads/file_name.format

Notes:
• make sure after pushing the update to github, to add the file to that path.
• make sure Gatsby doesn’t add a / slash symbol at the end of url. This can be done by adding trailingSlash: "ignore", in the gatsby-config.ts file
:warning: I think this works only with custom hosting (vercel in my case), and only on the deployed version. (doesn’t work on localhost)

image.png
image.png514×388 12.6 KB

image.png
image.png620×306 15.2 KB

2

Nice tip for simple, static downloads!