Daptin walk through: oauth2, google drive, subsites and grapejs

Daptin is full-fledged “API first”, server building platform. For a quick backgroud of daptin, checkout this post.

In this walk through, we will use Daptin to

• Connect to google-drive using oauth2
• Use it to store our website source code
• Serve it as a website
• Make live changes with the excellent GrapesJS editor

edit: please use dashboard-classic for this post.

docker run -p 8080:8080 daptin/dashboard-classic

Part 1

OAuth Connection

If you have been working with oauth before, you would know what a basic oauth2 setup looks like.

• OAuth client keys
• OAuth2 token
• token is used for actual calls

The permission of the token is based on the scope parameter of the oauth flow.

Daptin can work with oauth2 flow natively. Add the details of the oauth2 configuration

Dashboard has a quick access button to oauth2 connections page

Click the green plus icon to add a new oauth2 connection detail

Fill in the oauth2 connection details, like client id and client secret, in this case, I have created a new app in from google developers console and generated oauth2 credentials.

Redirection URL

The redirection URL is set to http://site.daptin.com:8080/oauth/response in my case. site.daptin.com points to my localhost and daptin is running at port 8080. This endpoint handles the redirection from oauth2 flow.

Scope

Note that we need to access the google drive for what we are going to do (host a sub site) in this walk through. So I am using this in the scope field:

https://www.googleapis.com/auth/spreadsheets,https://www.googleapis.com/auth/drive

These are two scope . One allows access to google spreadsheets and the second one to google drive.

Clicking Submit will add the new data

Click the grey “expand” icon to go see the details of the connector

Oauth2 Token

Now I want to authenticate using this oauth connection and obtain a token to use for uploading and downloading files from Gdrive. Click the little grey expand icon to go into the details of this connection.

Note that the client secret is encrypted here. The schema of oauth_connection schema tells daptin that client_secret is an encrypted field, so original value is only in memory, never set in response to ui.

On the right side, under Actions, we have Authenticate with OAuth. I will cover actions in depth in another post but they are almost half the things we are using here. Click that button and submit to initiate the oauth2 flow

Google confirms as per the standard oauth2 flow, along with the list of scopes. Clicking allow will take us back to daptin response url, where daptin will verify the token and add if its valid.

The oauth2 flow is complete and we have our new oauth2 token here.

Completing the oauth2 flow takes us back to daptin dasahboard and we can see the new token issued by google.

This completes part 1 of the walk through. This token can now be used in other activities.

Part 2

Associating space on google-drive

Coming back to the dashboard, we see the “Storage” icon. Storage is the conceptual entity for a Cloud storage (thanks to rclone for integrating with a huge list of providers). Here we will use the oauth token issued earlier to access a folder on google-drive.

Go to the Storage page, click the Green plus icon to add new storage details, and we will see the following screen

The root path is for rclone, and it tell rclone which protocol to use to communicate to the storage. We could have has ftp/b2 or some other cloud storage as well (although not tested currently)

Click submit to add this. Now need to associate that oauth token to be used when daptin tries to access this storage. Click the expand button to go in, and come to the “Oauth Token Id” Tab

Click the green plus icon to add, type in “g” to look up for our google token, and Add it.

We have now associated the oauth token with this storage. Note that both the access token and refresh token is encrypted.

Internally, associating token doesn’t make a copy of it, just points to that. So it will be refreshed and taken care of by the system.

Uploading our website as a ZIP

Now Daptin can read/write to the google-drive folder “temp” using the oauth2 token. We will go ahead, click the “Upload file to external storage” and upload a ZIP file which has the site contents.

For this demo, I have download one of the free templates from bootstrap themes.

The ZIP file which I am uploading here has the “index.html” at the root of the zip, and all other assets relative to that.

When uploading a ZIP, daptin extracts it and uploads each file. This is just a convenience method for ZIPs. Does not happen for other archives. Once this is complete (it takes a couple of minutes, the notification just tells you that the upload sync has started).

Logs in the background showing each file upload

Depending on the size/contents, it make take from a few minutes to upto half an hour. For my current ZIP, which has about 60 files, ~2 MB zipped, it takes about 30 seconds. On completion, my google-drive looks like this

Our google-drive storage is ready for next part where we use this to host another site.

This completes the part 2 of our walk through. In the next part we will use this storage as the backend of a sub site.

Part 3

Creating sub site

We have reached the last part of the walk through, and the most interesting one as well. We will finally put all of part 1 and 2 to use and have a new site hosted by daptin.

Sub site is a conceptual entity for daptin, which tell it a “subdomain”, a “path” and a storage folder and daptin has to expose the website on that subdomain /path.

Head over to dashboard and click “Sub sites”, click the green plus icon to create a new sub site

Click sub sites, and proceed to create a new sub site.

We created a site, but have not associated any backing storage yet.

We need to associate the storage we created earlier to this site. Consider this like a mount action. Click the expand icon to go into the site and in the “Cloud Store Id” tab, search “google” to look up our google drive. Add it and this is done.

Look up for the google drive we created earlier and add it to this site.

Our site is ready, we will need to restart Daptin once to get the site live. The button to restart is also on the dashboard.

Clicking restart will make daptin restart itself and it will redirect you back to the dashboard in 15 seconds.

When Daptin restarts, it will check if it has to host any subsite. It connects to the associated storage for each site, get the content on a temporary folder on the current machine and starts serving it under the subdomain/path which we set earlier.

meanwhile logs in the background show us the progress of copying

We have our site ready and live, for me it is at http://site.daptin.com:6336/path1/. We would also be able to access the site at “demo1.daptin.com” or any other sub domain which we configure.

GrapeJS

GrapeJS is integrated in Daptin, so we can live edit this site from right in your browser and publish changes. I have a JS bookmark which injects GrapeJS to the current page and talks to Daptin for assets/components and loading/storing the site changes. Enabling it gets us to the following screen

I can make changes to the site now and click the save button to update it.

I will make a small change for now and change the title text and add a map below it. Save the changes and check the contents in a new tab

Changes are live now.

These changes will reflect back to google drive if we want them to.

Like we have the map and other type of “Static” elements here in grapeJS to drag and drop on our site, daptin also has JSON API powered components, which you can use to render dynamic content.

End

We have completed using this part of daptin end to end. The key take aways:

• Daptin can work with external oauth2 providers and APIs
• Connect to cloud storage, thanks to rclone
• Host subsites using cloud storage
• Live edit subsites, thanks to GrapeJS