SendGrid Dynamic Blocks

Build re-usable component blocks, and update multiple SendGrid templates at once!

Key features

• Create blocks based on SendGrid drag-and-drop compatible code and components
• Save your collection of blocks and fully manage the collection structure
• Ability to import existing blocks created on SendGrid Design Editor
• Export/Import your collections
• Easy to use interface to update multiple SendGrid templates with your dynamic block
• Upload your zip file with the HTML/CSS/IMG structure and automatically create a template out of it
• Local storage to persist your collections on the browser
• Twilio Functions middleware to call the SendGrid APIs and therefore avoid exposing SG API Keys within the app
• Authentication via JWT tokens and httpOnly cookies
• (Optional) Segment CDP integration to send Web Vitals - or add your own metrics!

Pre-requisites

1. Install the Twilio CLI
2. Install the serverless toolkit
3. Create a SendGrid API Key. You don't need to give it full permissions. Template Engine should be enough
4. (Optional) Create a Segment CDP Source If you want to send data like Web Vitals to Segment CDP, create a Javascript Source - we will use the Write Key below

Setup

• Clone the repository and cd into it:

git clone https://github.com/evanTheTerribleWarrior/sendgrid-dynamic-blocks.git
cd sendgrid-dynamic-blocks

• Go to frontend directory and run npm install:

cd frontend
npm install

• Go to serverless directory. Run npm install and then create .env file and set the SG_API_KEY env variable with the SG Key you created. Also add USERNAME, PASSWORD, JWT_SECRET that are used for authentication. Make them hard to guess if you deploy this! Optionally, if you want to send Web Vitals to Segment CDP, add your Segment JS Write Key

cd serverless
npm install
cp .env.example .env

Option 1: Build remote (Twilio account)

• Run the setup-remote.sh script (if you use other shell, use the equivalent command):

zsh setup-remote.sh
# View your app at https://[my-runtime-url].twil.io/index.html

Option 2: Build local - same ports for backend and frontend

• Run the setup-local-same-port.sh script (if you use other shell, use the equivalent command):

zsh setup-local-same-port.sh
# View your app at http://localhost:3002/index.html (or set the port you want)

Option 3: Run local - different ports for backend and frontend (easier for changing/testing code)

• Run the setup-local-diff-port.sh script (if you use other shell, use the equivalent command):

zsh setup-local-diff-port.sh

This will effectively use npm run start to start the frontend on the standard 3000 port and have it runninng in the background. But in package.json we added proxy: http://localhost:3002/ so that all requests are proxied to the same port as the functions backend. This way we can use credentials: 'same-origin' when authenticating

Blog Post

The below blog post shows the app and the different sections in place, along with technical details https://www.twilio.com/en-us/blog/sendgrid-dynamic-blocks-react-app

Considerations

• This is not an official Twilio SendGrid repository.
• As this is a personal work, updates will be published at non-standard intervals. You are of course free to take the code and shape as you wish

Limitations

• Currently, there is no signup / setting multiple users with a proper database. The logic is to start fast and simple only via your Twilio Account. A proper user login/signup management will need an external backend
• Because of the above, data is saved locally on the browser. Users can export their work and import it easily. But a backend integration would also require separation of each user's work to avoid conflicts

TODO - Future

• Overall: Cleanup unused/redundant code
• Overall: Review fail conditions / fail gracefully
• Overall: Comments!
• Update templates: How to exclude templates not valid for drag and drop editor
• Zip upload: When uploading images, utilise better promises or even exponential backoff?
• Block creation: Ability to move components up or down in the hierarchy?
• Block creation: When importing block, dropdowns are reset currently
• Block creation: validate the created block structure
• Settings: 2FA?
• Settings: More segment integration
• Security: Secondary token for navigation?
• Security: CSRF?
• Security: Zip check and rejection?