OneManager - Deploy a free OneDrive List App using Heroku and Cloudflare

In my previous post : Fast OneDrive Index - A Serverless OneDrive Index Setup , I have shown a way to set up a serverless application to list your One Drive content. That has used GitHub page and Cloudflare workers to complete the task. In this post, I am introducing another GitHub project to list your One drive with a Heroku app and cloudflare. You will be able to upload files and use your own domain for the page.

GitHub : https://github.com/qkqpttgf/OneManager-php
Demo: https://herooneindex.herokuapp.com/

Pre-requirement:
1. Heroku account
2. Cloudflare accout
3. Your own domain (optional)

Deploy OneManager into Heroku

Click

to deploy OneManager application into Heroku for see, which is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

If you don't have an account with Heroku, you can create a free one.

After you entered app name and clicked Deploy app, Heroku will start automatically to deploy this GitHub app into Heroku cloud.

The Heroku will automatically deploy the OneManager app from GitHub to their container under your account and make it available to public using the app name you entered as a secondary sub domain name with herokuapp.com .

You can click view to see the page after deployment completed, usually less than 1 minute:

Configure Your Heroku App

1 Click to install the project

After you launched the url provided by Herukuapp.com, you will see an Error since we have not configure the app yet. We did not link this app with our One Drive account. We just need to follow the wizard link to complete this configuraiton.

2 Select Lanaguage, Enter API Key and Set Admin Password

For API Key, click "Create API Key", and you will be brought to Dashboard of your Heroku site to create api key or copy it out.

For admin password, you can enter it here and you will be able to change it from app settings. Once all information entered, click submit, you will be redirected to jump page, in one sec, you will be able to see OneManager page with a login link.

Heroku App Settings:

3 Click login and enter that admin password you entered at step 2
The login button will change to Operate button. Once your mouse hovers on it, it will show a menu with setup option there. Click it. Now you have a link to add your own OneDrive Disk into this app.

4 Enter any OneDrive disk tag and OneDrive showed name, click submit. You will be redirected 3s jump page then jump to Office365 login page:

Enter your office365 account if you have not logged in. Grant the permission for this app to access your Office365 One Drive. Wait 5s jump back to OneManager app home page as show below. You are all set.

Here is the screenshot how it looks like:

That is all steps you will need to set up this OneManager in Heroku cloud. If you want to change some settings such as apikey, password for admin, you can go to app settings page - Config Vars to do that;

Create a Cloudflare Worker and a domain route

1 Create a new Cloudflare worker

As I did in following screenshot, I created a new worker named it as od1.51sec.workers.dev. You will need to change your url.hostname configuration to match your heroku app name.

addEventListener(
  "fetch",event => {
     let url=new URL(event.request.url);
     url.hostname="your_sub_domain.herokuapp.com";
     let request=new Request(url,event.request);
     event. respondWith(
       fetch(request)
     )
  }
)

For more details about how to create a Cloudflare workers, please visit post:
"Build a Reverse Proxy Using Cloudflare Workers"

2 Create a new sub domain

I created a new DNS A record under my domain 51sec.org. For ipv4 address, you can put any ip in since it wont be used. I am using 8.8.8.8 as an example.