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