Hono Guide
Installation
Get Gateway URL
Before we start you’ll need your Dedicated Gateway domain. When you create a Pinata account, you’ll automatically have a Gateway created for you! To see it, simply visit the Gateways Page see it listed there.Start up React Project
Run the command below to make a new React project:cd
into the project and install pinata
.
.env.local
file in the root of the project and put in the following variable:
VITE_SERVER_URL
is the URL of your server endpoint that will return Presigned URLs. If you don’t have one be sure to follow the Hono guide first. If you did follow it then you’ll remember it was http://localhost:8787
and we’ll need to make sure it’s running in order for our flow to work.
The format of the Gateway domain should be mydomain.mypinata.cloud
.
Implementation
Now that we have our initial setup, open thesrc/App.tsx
file and replace it with the following code.
src/App.tsx
handleSubmit()
. This function will do the following:
- Make a request to our server for a Presigned URL (you will want to handle any server side auth here)
- Use the returned Presigned URL in a client side upload
- Use the upload response to create a link to the file
http://localhost:5173
and upload a file!