Getting started

TL;DR

⚡️
Here's a quick too-long-don't-read guide on how to deploy your own onedrive-vercel-index.
  1. Fork the repo spencerwooo/onedrive-vercel-index.
  2. Change userPrincipleName in site.config.js to your Microsoft account email address.
  3. Change baseDirectory in site.config.js to a folder under your OneDrive root directory.
  4. Optional - Check if you need to change api.config.js.
  5. Import to Vercel and add an Upstash integration, which imports REDIS_URL env var to Vercel.
  6. Trigger a redeploy, and profit. 🎉

The deployed onedrive-vercel-index will guide you through an authorisation process, and store the required tokens in the Redis database. That's all there is to do!

Getting started (for real now!)

onedrive-vercel-index uses your OneDrive as a storage host, and displays the files, images, videos, songs, and documents stored inside your OneDrive for other people to preview and download.

Screenshots of onedrive-vercel-index on multiple platforms

onedrive-vercel-index is actually a template built with Next.js, which you can host on Vercel, Netlify, or other serverless platforms completely for free. Here's how you would deploy your own onedrive-vercel-index completely from scratch.

⚠️

If you are updating from a project deployed before 2022, check out If you deployed before 2022.

Fork the repo

Fork the project to your own GitHub account, as you will be maintaining your custom version of this project with your own configurations.

Fork the repo to your own GitHub account

Modify configs

Some basic configuration modifications are required. Two config files include config/site.config.js and config/api.config.js. The former is for customising your website, and the latter is for configuring API routes.

Customise site settings

Modify config/site.config.js according to your configs, where you must change:

  • userPrincipalName - used to verify your identity when doing OAuth. It is usually your Microsoft email address when you log into your OneDrive.
  • baseDirectory - the base folder shared using onedrive-vercel-index. You must make sure that the folder exists inside your OneDrive. (You can also create a folder named Public in your OneDrive to keep things same with the main project.)

You must change these two configs for your deployment to work

🍀

There are other optional configs for customising your site, please refer to Custom configs for what they do.

Modify API settings (optional)

If ...

  • You are a OneDrive international version user (not OneDrive Business or Education account, not SharePoint user, not Microsoft 365 E5 user), you can ignore this step and leave config/api.config.js untouched.

otherwise, and only if you must !!!

  • OneDrive 世纪互联 users have different API routes than what we usually use, you need to change authApi and driveApi:

    Change authApi and driveApi only if you are a SharePoint user

    Change them to:

    authApi: "https://login.partner.microsoftonline.cn/common/oauth2/v2.0/token",
    driveApi: "https://microsoftgraph.chinacloudapi.cn/v1.0/me/drive",
  • OneDrive business, education accounts and E5 subscription accounts need to confirm whether they have admin privileges, proceed with untouched config/api.config.js and try the OAuth, if it does not work (telling you to sign in with an account with admin privileges), you then need to use your own clientId and clientSecret as the public one generated by me would not work on your account. More on this in Using your own client id and secret.

Import and deploy in Vercel

Import your forked onedrive-vercel-index GitHub project to Vercel. Change:

  • Build command to pnpm build.
  • Install command to pnpm install.
💡
The default commands may work, but it's always better to be explicit.

Import the forked GitHub project into Vercel

Then hit deploy. Vercel will automatically build and deploy your project. However, the deployment is likely to fail as you have not added the environment variable REDIS_URL yet, which is what we are going to do now.

Create a Redis connection

Create a Redis database, and set the URL of the Redis instance to environment variable REDIS_URL inside the Vercel project. The Redis database is used for storing the required access_tokens and refresh_tokens when interfacing with OneDrive's API.

  • You can use Upstash for this, completely free, full integration with Vercel, documentation here: Vercel Integration (ignore the final step Create Your Redis Client, that is already taken care of in onedrive-vercel-index).
  • You can also host any Redis server, use AWS, Google Cloud, Azure, etc. As long as you have a Redis URL that Vercel can use.

Whatever method you use, you should have a REDIS_URL present in your environment variable in Vercel which should look like:

redis://:[email protected]:35533

or:

rediss://:[email protected]:35533

if you enabled TLS (SSL) on your upstash database.

Using Upstash as the free Redis database for onedrive-vercel-index

Redeploy on Vercel

Finally, trigger a redeployment on Vercel to use the new environment variable, navigate to the newly deployed page, and perform authorisation as guided by onedrive-vercel-index. The domains used by Vercel are listed in your project settings. You can also configure a custom domain here. (More on this in Custom domain.)

Checking the deployed domain and navigate to the live site

Authenticate your onedrive-vercel-index

Navigate to your newly deployed onedrive-vercel-index, usually https://xxx.vercel.app if you have not set a custom domain. As you are not authenticated yet, you will be redirected to the OAuth process.

Step 1 - Preparations

Step 1 - preparing for authentication

Check for anything incorrect about your defined configurations. Especially client_id and client_secret (obfuscated), which should be exactly the same as the main project if you are using the public tokens for authentication. Also check for API scopes, we only require:

  • user.read: for checking your email against the account you use for OAuth, so that some random guy cannot f*ck you up by re-authenticating with his/her account over and over again.
  • files.read.all: for access to the files inside your OneDrive.
  • offline_access: for ... offline access 🙃

If everything seems correct, proceed to step 2. If not, you need to modify config/api.config.js and redeploy on Vercel.

Step 2 - Get auth code

Step 2 - getting the authorisation code

Based on config/api.config.js we have generated the OAuth link for you. Click on the link, a new tab will open and prompt you to login into your Microsoft account. Make sure you login with the same account you defined in userPrincipalName under config/site.config.js.

⚠️

If you are having privilege issues with your account, you may need to use your own client_id and client_secret for authentication. This may happen to OneDrive education or business users. More on this here: Using your own client id and secret.

The localhost URL that you would be redirected to

You will be directed to http://localhost, copy the entire URL in your address bar to the input section below. onedrive-vercel-index will extract the code from the URL and use that to acquire a pair of access_token and refresh_token. Click on Get tokens to proceed.

Step 3 - Get access and refresh tokens

Success! We have acquired the tokens that are needed

Wait for a bit as the tokens need a bit to return. If all goes well, you would be greeted with this: success screen with a pair of valid tokens for you to store in your Redis database. Click on Store tokens to proceed.

📢

Here we will validate that whether you are actually you, so if the button says "Don't pretend to be the site owner", go change the userPrincipalName under config/site.config.js, which is definitely wrong.

Finally, you will be redirected home with your new and fresh onedrive-vercel-index. Enjoy!

⚠️

If you are redirected back to step 1, and you are certain that everything is setup correctly, wait for a bit and try navigating home manually and do a hard refresh. It sometimes take a while for the tokens to propagate through to Redis.