How to Integrate Vimeo into React application
A quick guide to integrating Vimeo video upload into your React application

Media content is a major part of any application. Here we discuss an approach using Vimeo as storage for video content dynamically uploaded by users. Here we also try to reduce the number of hits on our server, which means completing as many actions as possible via the Vimeo server or client-side (client browser).
If you would like to support me as a writer follow me to get more knowledge and like the article.
1 Create React application from the scratch
Since we need to have some endpoints on our server, let’s create an application with NextJS applying typescript:
yarn create next-app --typescript
In the terminal, CLI offers you to choose a project name (let’s say its name is vimeo-integration
) and it will create a project boilerplate in a project with the same name.
2 Vimeo Account
2.1 Create a Vimeo Account
Just visit the Vimeo site, click the “Log in” button, and in appeared popup find and click the “Join” button and choose the appropriate way to sign up.

2.2 Create an Application within a created account
As soon as we created a Vimeo Account to get access to Vimeo API we need to create an Application. In the main navigation go to Resources -> Developer Tools. On this page find the button “New App” on the right bottom corner and fill in all necessary fields and click the “Create Application” button.

On the page of new created Application, let’s scroll down to the Authentication section and generate Access Token. Click the “Authenticated” radio and check the following options: “Private”, “Create”, “Edit”, “Upload”, and “Delete”. Click the “Generate” button. Copy generated token, we will use it soon and keep it secret. It allows a user to upload video on our account's behalf.

3 Resuamble approach to upload video on Vimeo
Vimeo provides several ways to upload video and here we go with a resuamble or tus approach. For other ways to upload you may discover this page. We’ve chosen the Resuamble approach since it allows polling the progress of the upload as it’s occurring.
Resuamble approach is supposed to follow the several steps: - get a presign link to upload a video - upload video via tus protocol using presign link which has been got in the previous step
Here I would like to highlight some crucial points which were important for us. Getting a presign link is required to fetch metadata from the Vimeo service and this request should be associated with the access token which we generated in the 2.2 chapter. We need to implement this part on our server since we could not expose a secret token on the client-side. A presign link is just some metadata that generates a link that we will use afterward to upload video, and it does not require us to attach any tokens anymore and we may complete the upload on the client-side only. This process is depicted in picture 4.

4 Implementation
We covered all details which are necessary and let’s start to implement them.
4.1 Server endpoint
As we discussed in the previous section we need to get a presign upload link and this request should be delivered to Vimeo Server with an access token. We don’t like to expose this token on the client-side, therefore we need to develop an endpoint on our server which attaches our token and it will be like a proxy server.
Since we initialized our application with NextJS, it’s easy to implement just by creating a file with the name vimeo.ts
under the folder /pages/api
. This handler will be available by this endpoint then /api/vimeo
. Let’s implement this one. Our server should send a request to this endpoint
POST https://api.vimeo.com/me/videos
Including these headers:

The shape of the request body will be the following:
{
"upload": {
"approach": "tus",
"size": "{size}"
}
}
Where thesize
parameter is the length of the video file in bytes. Besides those required fields you may also need to change the way in which this video will be shown in an iframe afterward. For example, you may change the color of controls or hide some control buttons like “share” or “like”, or hide the Vimeo logo. All possible options you may discover by visiting this link. In our example, I would like to change the color of the control buttons and hide the Vimeo logo, our request then will look like that:
{
"upload": {
"approach": "tus",
"size": "{size}"
},
"embed": {
"color": "#4338CA",
"logos": {
"vimeo": false
}
},
}
Ok, without any further ado let’s implement this handler: