SMS To Netlify

What's up?

This website displays SMS sent to a Twilio number.

When a SMS is sent to this number, the website is deployed to Netlify.

All this is done thanks to OneGraph 🚀

Explore the demo: https://smsto.netlify.com

Main Concepts

• Set-up a GraphQL Subscription sending an event to a Netlify deploy webhook when a SMS is sent to a given Twilio number
• Fetch SMS from Twilio at build time thanks to a GraphQL Query and Next.js static export
• Use the Intersection Observer API to watch scroll without hammering the main thread!
• Make sure links are accessible and have a visible focus effect (try moving around with TAB / SHIFT + TAB!)
• Prefetch assets (cursors) via invisible images
• Confident development iteration with static typings (Flow)

Develop

1. Clone this repository
2. Copy/pasta .env.sample to .env
3. Create an account on Twilio, then create a number that can receive SMS: set your number .env as TWILIO_NUMBER
4. Create an account on OneGraph, then create an app: you'll get a OneGraph App Id that you can set in your .env as ONEGRAPH_APP_ID
5. For this app, create a OneGraph server-side personal token with access rights to Twilio: set it in your .env as ONEGRAPH_BUILD_API_TOKEN
6. Install dependencies with yarn
7. Hack the project with yarn dev 🔨
8. Send a SMS to your number, refresh the page: you see the SMS on your screen! 🌮

Deployment

Let's the party begin! 🥳

Setting up deployment

1. Fork this repository so you have it under your GitHub repositories
2. Create an account on Netlify
3. Create a new site from Git using your fresh fork of this repository
4. Configure the build command as yarn build && yarn export
5. Configure the publish directory as .out
6. Add your environment variables from .env in the advanced settings section.

Automating deployment

1. Create a Netlify build hook

2. Get your Twilio auth token & account SID from your Twilio account setting

3. Go to OneGraph and create a new subscription with all that:

   subscription {
     twilio(
     	webhookUrl: <https://netlify-build-webhook>
     	auth: {
     	  twilio: {
           authToken: <TWILIO_AUTH_TOKEN>
           accountSid: <TWILIO_ACCOUNT_SID>
         }
       }
     ) {
       incomingSMS(input: {to: <TWILIO_NUMBER>}) {
         sms {
           to
           body
         }
       }
     }
   }
   

You are good to go: send a SMS to your Twilio number, your website is deployed automagically to Netlify and you can see all the SMS you have sent to this number on this new website! 😎

Aknowledgments

• Sean Grove from OneGraph who got me started on this project!
• Tim Boelaars who designed the amazing graphics for Framer Loupe Conference