Dropbox Trigger Netlify
This is a companion package for gatsby-source-dropbox and enables automatic deploys of a Netlify hosted Gatsby site whenever there are files changes in a specific Dropbox folder.
This module is also implemented in gatsby-starter-dropbox-workflow
How it works
1. It watches your dropbox folder
It expects your Dropbox app to have the following folder structure:
+-- Your Dropbox App Root Name
| +-- _Update
| +-- Content
| | +--Whatever Files you need.md
| | +--Whatever Folders you need
Whenever you drop the Content folder into the _Update folder the module will trigger a new deploy on Netlify. Make sure to do this only when the files in Content are uploaded to your Dropbox.
2. It notifies your once the build is done
When Netlify finished building your site, the module will move the Content folder back to the root level. Whenever this happens, you know that your site was updated
Installation
The get the webhooks working, it is important to do the installation in the correct order.
1. Prepare your Gatsby site
Add gatsby-source-dropbox to your Gatsby site.
2. Setup Netlify Functions
Setup guide.
3. Install module in functions folder
yarn add dropbox-trigger-netlify
or
npm install dropbox-trigger-netlify
Note: Modules used in a Netlify Function need to be installed in the src/functions
folder.
4. Create function
Create a new function called syncDropbox.js
and add the following code:
const dropboxTriggerNetlify = require('dropbox-trigger-netlify')
exports.handler = async (event) => {
try {
const response = await dropboxTriggerNetlify.handleEvent(event, {
dropboxToken: process.env.DROPBOX_TOKEN,
buildHook: process.env.BUILD_HOOK,
})
return {
statusCode: 200,
body: response
}
} catch (err) {
return { statusCode: 500, body: err.toString() }
}
}
5. Create Dropbox App
Go to Dropbox App Console and create a new app, choose your account type, only folder permission (recommended), choose a name and hit create.
6. Generate and Save Dropbox Token
Scroll on app page to "OAuth 2" and click "Generate Token". Copy and save token to .env
file in your projects root directory.
DROPBOX_TOKEN=Your-Dropbox-Token
7. Deploy Site to Netlify
8. Create a new Netlify Build Hook
Go to your Netlify project to settings/deploys#build-hooks
and add a new hook
9. Save Build Hook to .env
file
DROPBOX_TOKEN=Your-Dropbox-Token
NETLIFY_BUILD_HOOK=Your-Hook-You-Just-Added
10. Create Netlify Deploy Notifications
Got to your Netlify project to settings/deploys#deploy-notifications
and add an outgoing webhook for succeeded and failed builds pointing to [you-site-url]/.netlify/functions/syncDropbox
11. Add Environment Variables to Netlify
Add the environment variables from your .env
file to netlify at settings/deploys#environment-variables
12. Add Webhook to Dropbox App
Go to Dropbox App Console to you app and add a webhook pointing to you NETLIFY_BUILD_HOOK