Skip to content

xavxyz/sms-to-netlify

Repository files navigation

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

About

Deploy a website by sending a SMS using OneGraph and Twilio

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy