Deployment Guide

Getting Started

Chiheisen-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. Ciheisen-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 Chiheisen-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. Its for customizing your website.

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

Import and Deploy in Vercel

Import your forked Chiheisen-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 Aiven.io for this, completely free. 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://:xxx...@some-thing-like-27934.e.aivencloud.com:27934 OR rediss://:xxx...@some-thing-like-27934.e.aivencloud.com:27934

Aiven Redis (ValKey)

Open Aiven.io and select get started for FREE After that sign-up using Google or Email. Then select "Personal" as shown in the above image. Fill in the required details. Then select "ValKey" from the drop down menu. Fill in the required details, and create the FREE service Then copy the redis connection URL.

Add REDIS to Vercel

Inside the Vercel app settings, select "Environment Variables" and add a new Variable "REDIS_URL" whose value would the REDIS CONNECTION URL that u copied from Aiven.io

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 Chiheisen-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 you Chiheisen-vercel-index

Navigate to your newly deployed chiheisen-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. If you are somehow not redirected to the authorization process, visit this site - https://xxx.vercel.app/onedrive-vercel-index-oauth/step-1/ Replace xxx with your vercel custom domain.

Step-1 Preparations

Step-2 Get auth code 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. Chiheisen-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 Chiheisen-vercel-index. Enjoy!

Password protecting a Folder/route

• Declare the protected folder's path under protectedRoutes (which is an array) in config/site.config.js.
• Create a plain text file that is named .password (character for character, must be this name), and move this file under the folder that you wish to password protect.
• Open this .password file with a text editor, like VS Code or Notepad, and save the password inside (in plain text format).
• Finally, redeploy your Chiheisen-vercel-index in Vercel so your website picks up the newest protected folder configs.

If you are wondering what to define in protectedRoutes, here is an example. Suppose we have the following folder structure: We want to password protect the /u-need-a-password directory, so we would write inside protectedRoutes the absolute path to root. If you want to add another route, then add it to the next item in the array. f there is no directory for you to password protect and you want to disable this function, you can simply pass an empty array [] to protectedRoutes. If you are confused about whether you need to encrypt your password, don't. Put that plain text inside .password. Whatever you save inside .password, you are going to use as the password for entering the protected directory.

I personally cannot guarantee that this protection is impenetrable and fully secure. Hence, I would not recommend protecting sensitive information with this method. Think of this as an extra layer of annoyance to keep files you want to share with only the people you wish.

Do Not Change Anything in api.config.js file or else index won't work.