Getting started

TL;DR#

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.

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.

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.

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.)

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 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.

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.

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.)

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#

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#

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.

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#

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.

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